Introduction

In this article, we will learn the step by step process of creating an employee contact list using React.js and Web API. React is an open-source JavaScript library that is used for creating user interfaces, particularly for single-page applications. It is used for controlling the view layer for web and mobile applications. React was developed by Jordan Walke, a software engineer at Facebook, and it is currently maintained by Facebook.
Prerequisites
  • Basic knowledge of React.js and Web API
  • Visual Studio
  • Visual Studio Code
  • SQL Server Management Studio
  • Node.js
This article covers the following:
  • Create a database and table
  • Create a Web API Project
  • Create React Project
  • Install Bootstrap and React strap
  • Add Routing
  • Install Axios

Create a database and table

Open SQL Server Management Studio, create a database named ContactManager and in this database, create a table. Give that table a name like contacts
  1. CREATE TABLE [dbo].[contacts](
  2. [Id] [int] IDENTITY(1,1) NOT NULL,
  3. [Firstname] [nvarchar](50) NULL,
  4. [Lastname] [nvarchar](50) NULL,
  5. [Phone] [nvarchar](50) NULL,
  6. [Email] [nvarchar](50) NULL,
  7. [Password] [nvarchar](50) NULL,
  8. CONSTRAINT [PK_contacts] PRIMARY KEY CLUSTERED
  9. (
  10. [Id] ASC
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  12. ) ON [PRIMARY]
  13. GO

Create a Web API Project

Open Visual Studio and create a new project.
How To Create A Contact List Using Web API And React
Change the name as Employeemanager and Click ok > Select Web API as its template.
How To Create A Contact List Using Web API And React
Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
How To Create A Contact List Using Web API And React
Click on the "ADO.NET Entity Data Model" option and click "Add".
How To Create A Contact List Using Web API And React
Select EF Designer from the database and click the "Next" button.
How To Create A Contact List Using Web API And React
Add the connection properties and select database name on the next page and click OK.
How To Create A Contact List Using Web API And React
Check the Table checkbox. The internal options will be selected by default. Now, click the "Finish" button.
How To Create A Contact List Using Web API And React
Our data model is successfully created now.
Now, right-click on the Models folder and add a class - createcontact and paste the following code in this class.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  6. namespace Employeemanger.Models
  7. {
  8. public class Createcontact
  9. {
  10. public int Id { get; set; }
  11. public string Firstname { get; set; }
  12. public string Lastname { get; set; }
  13. public string Phone { get; set; }
  14. public string Email { get; set; }
  15. public string Password { get; set; }
  16. }
  17. }
Right-click on the Controllers folder and add a new controller. Name it "Employee controller" and add the following namespace in the Employee controller
  1. using Employeemanger.Models;
Now, add a method to insert data into the database.
  1. [Route("Addorupdatecontact")]
  2. [HttpPost]
  3. public object Addorupdatecontact(Createcontact contact)
  4. {
  5. contact ct = new contact();
  6. ct.Firstname = contact.Firstname;
  7. ct.Lastname = contact.Lastname;
  8. ct.Phone = contact.Phone;
  9. ct.Email = contact.Email;
  10. ct.Password = contact.Password;
  11. DB.contacts.Add(ct);
  12. DB.SaveChanges();
  13. return new Response
  14. { Status = "Success", Message = "Record SuccessFully Saved." };
  15. }
Add another method to fetch data from the database.
  1. [Route("employeelist")]
  2. [HttpGet]
  3. public object employeelist()
  4. {
  5. return DB.contacts.ToList();
  6. }
Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines:
  1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
  2. config.EnableCors(cors);

Create React Project

Now create a new React.js project using the following command.
  1. npx create-react-app contactmanagerapp
Open the newly created project in visual studio code and install bootstrap in this project by using the following command:
  1. npm install --save bootstrap
Use the following command to add routing in React:
  1. npm install react-router-dom --save
Now go to src folder and add 3 new components:
  1. Addemployee.js
  2. Employeelist.js
Now, open the Addemployee.js file and add the following code.
  1. import React, { Component } from 'react'
  2. import axios from 'axios';
  3. export class Addemployee extends Component {
  4. constructor(props) {
  5. super(props)
  6. this.state = {
  7. FirstName: '',
  8. LastName: '',
  9. Email: '',
  10. Phone: '',
  11. Password: '',
  12. }
  13. }
  14. Addemployee = () => {
  15. debugger;
  16. axios.post('http://localhost:2345/api/employee/Addorupdatecontact/', {
  17. FirstName: this.state.FirstName, LastName: this.state.LastName,
  18. Email: this.state.Email, Phone: this.state.Phone,Password: this.state.Password
  19. })
  20. .then(json => {
  21. if (json.data.Status === 'Success') {
  22. console.log(json.data.Status);
  23. alert("Data Save Successfully");
  24. this.props.history.push('/EmployeeList')
  25. }
  26. else {
  27. alert('Data not Saved');
  28. debugger;
  29. }
  30. })
  31. }
  32. handleChange= (e)=> {
  33. this.setState({[e.target.name]:e.target.value});
  34. }
  35. render() {
  36. return (
  37. <div class="container">
  38. <div class="row">
  39. <div class="col-sm-12 btn btn-primary" style={{"margin":"6px"}}>
  40. Add New Contact
  41. </div>
  42. </div>
  43. <div class="card o-hidden border-0 shadow-lg my-5" style={{"marginTop":"5rem!important;"}}>
  44. <div class="card-body p-0">
  45. <div class="row">
  46. <div class="col-lg-12">
  47. <div class="p-5">
  48. <div class="text-center">
  49. <h1 class="h4 text-gray-900 mb-4">Create a New Contact!</h1>
  50. </div>
  51. <form class="user">
  52. <div class="form-group row">
  53. <div class="col-sm-6 mb-3 mb-sm-0">
  54. <input type="text" name="FirstName" onChange={this.handleChange} value={this.state.FirstName} class="form-control" id="exampleFirstName" placeholder="First Name" />
  55. </div>
  56. <div class="col-sm-6">
  57. <input type="text" name="LastName" onChange={this.handleChange} value={this.state.LastName } class="form-control" id="exampleLastName" placeholder="Last Name" />
  58. </div>
  59. </div>
  60. <div class="form-group">
  61. <input type="email" name="Email" onChange={this.handleChange} value={this.state.Email} class="form-control" id="exampleInputEmail" placeholder="Email Address" />
  62. </div>
  63. <div class="form-group row">
  64. <div class="col-sm-6 mb-3 mb-sm-0">
  65. <input type="text" name="Phone" onChange={this.handleChange} value={this.state.Phone} class="form-control" id="exampleInputPassword" placeholder="Phone" />
  66. </div>
  67. <div class="col-sm-6">
  68. <input type="password" name="Password" onChange={this.handleChange} value={this.state.Password} class="form-control" id="exampleRepeatPassword" placeholder="Password" />
  69. </div>
  70. </div>
  71. <button type="button" onClick={this.Addemployee} class="btn btn-primary btn-block">
  72. Create Contact
  73. </button>
  74. <hr />
  75. </form>
  76. <hr />
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. )
  84. }
  85. }
  87. export default Addemployee
Now, in Employeelist.js file, add the following code:
  1. import React, { Component } from 'react'
  2. import axios from 'axios'
  3. export class EmployeeList extends Component {
  4. constructor(props) {
  5. super(props)
  6. this.state = {
  7. Employeelist: []
  8. }
  9. }
  10. componentDidMount() {
  11. axios.get('http://localhost:2345/api/employee/employeelist').then(response => {
  12. console.log(response.data);
  13. this.setState({
  14. Employeelist: response.data
  15. });
  16. });
  17. }
  18. render() {
  19. const items = []
  20. for (const [index, value] of this.state.Employeelist.entries()) {
  21. items.push(<li key={index}>{value}</li>)
  22. }
  23. return (
  25. <div class="container-fluid">
  26. <div class="row">
  27. <div class="col-sm-12 btn btn-primary" style={{ "margin": "6px" }}>
  28. Contact List
  29. </div>
  30. </div>
  31. <div class="row">
  32. {
  33. this.state.Employeelist.map((p, index) => {
  34. return <div key={index} class="col-xl-3 col-md-6 mb-4">
  35. <div class="card">
  36. <div class="card-header py-3">
  37. <h6 class="m-0 font-weight-bold text-primary"> <img style={{ "height": "25px" }} src="https://img.icons8.com/nolan/64/contact-card.png" />Contact Details</h6>
  38. </div>
  39. <div class="card-body">
  40. <div class="row no-gutters align-items-center">
  41. <div class="form-group row">
  42. <div class="col-sm-12">
  43. <div class="row">
  44. <div class="col-sm-2">
  45. <img src="https://img.icons8.com/office/16/000000/user.png" />
  46. </div>
  47. <div class="col-sm-8 col mr-2">
  48. {p.Firstname + ' ' + p.Lastname}
  49. </div>
  50. </div>
  51. </div>
  52. <div class="col-sm-12">
  53. <div class="row">
  54. <div class="col-sm-2">
  55. <img style={{ "height": "20px" }} src="https://img.icons8.com/nolan/64/email.png" />
  56. </div>
  57. <div class="col-sm-10">
  58. {p.Email}
  59. </div>
  60. <div class="col-sm-2"></div>
  61. </div>
  62. </div>
  63. <div class="col-sm-12">
  64. <div class="row">
  65. <div class="col-sm-2">
  66. <img style={{ "height": "20px" }} src="https://img.icons8.com/nolan/64/phone.png" />
  67. </div>
  68. <div class="col-sm-8">
  69. {p.Phone}
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. })
  79. }
  80. </div>
  81. </div>
  82. )
  83. }
  84. }
  86. export default EmployeeList
Open the App.js file and add the following code.
  1. import React from 'react';
  2. import './App.css';
  3. import EmployeeList from './EmployeeList'
  4. import Addemployee from './Addemployee'
  5. import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
  6. function App() {
  7. return (
  8. <Router>
  9. <div className="container">
  10. <nav className="navbar navbar-expand-lg navheader">
  11. <div className="collapse navbar-collapse" >
  12. <ul className="navbar-nav mr-auto">
  13. <li className="nav-item">
  14. <Link to={'/EmployeeList'} className="nav-link">Contact List</Link>
  15. </li>
  16. <li className="nav-item">
  17. <Link to={'/Addemployee'} className="nav-link">Add Contact</Link>
  18. </li>
  19. </ul>
  20. </div>
  21. </nav> <br />
  22. <Switch>
  23. <Route exact path='/' component={EmployeeList} />
  24. <Route exact path='/EmployeeList' component={EmployeeList} />
  25. <Route path='/Addemployee' component={Addemployee} />
  26. </Switch>
  27. </div>
  28. </Router>
  29. );
  30. }
  32. export default App;
Now, run the project by using 'npm start' command and check the result.
How To Create A Contact List Using Web API And React
Enter the values, click on Create contact button and check
How To Create A Contact List Using Web API And React

Summary

In this article, we learned the step by step process of creating an employee contact list using React.js and Web API.