Learn React JS and Web API by creating a Full Stack Web App

Install SQL Server Developer Edition and SQL Server Management Studio, configure the database engine, set authentication, restart, and connect to a local database to run a basic select query.

Learn to download and install Visual Studio 2019 Community edition, choose desktop development options, and test the setup by creating a hello world console app.

Create a database for your application in MS SQL Server using object explorer or a SQL query, name it employee, and refresh to confirm creation.

Create a department table in ms sql with two columns, an identity id and a department name, insert sample data like finance, then verify with a select.

Create an employee table in ms sql by defining an identity employee_id, name, department, email, and date_of_joining; then practice create table, insert data, and simple select queries.

Create a web api project in Visual Studio 2019, add a values controller, run the app, and call api/values to receive value 1 and value 2.

Learn to force a Web API to return JSON only by configuring media types and headers, returning a data table as JSON, and testing the endpoint at /api/values.

Install the postman client to test all api methods—get, post, put, and delete—beyond browser limitations. Demonstrate sending requests in postman and viewing responses.

Create model classes for department and employee in the models folder, defining department name, employee name, and date of joining to map the two tables.

Create Web API controllers for departments and employees, implementing get, post, put, and delete methods from scratch.

Implement get methods for department and employee in the Web API using stored procedures. Use a web.config connection string and format the joining date to year-month-day.

Implement the post method for departments and employees in the web API, using insert queries and returning added successfully or failed to add, with postman testing using JSON bodies.

Implement put method in web api to update department names and employee details using update queries, and verify changes with postman tests.

Implement delete method in web api by renaming the put method for department and employee controllers, deleting records by id, and returning deleted successfully or failed to delete.

Download and install Node.js on Windows using the 64-bit installer, run as administrator, and accept defaults. Then verify the installation by checking the Node.js version.

create a react js project from a starter template using create react app, name the app, and run npm start to see auto recompiled changes in the browser.

Install react bootstrap in your react project using npm install react bootstrap bootstrap, add the bootstrap stylesheet reference in index.html, and verify by rendering a react-bootstrap button.

Learn to create and render three React components—home, department, and employee—as separate pages, and handle import and test in a parent component.

Learn to implement routing in a React app by mapping URLs like /, /department, and /employee to corresponding components, install and configure react-router-dom, and test navigation.

Learn to implement a reusable navigation menu in a React app by creating a navigation component with React Bootstrap and wiring links to home, department, and employee pages.

Learn to display department details in a table using React Bootstrap. Map department state data into rows with headers department id and department name, using dummy data for now.

Consume the department get api in a React app, fetch and parse json, and update the department state to display details.

Learn to enable CORS for your React publication to secure your API by configuring access to a provided URL and testing API access in a full stack web API project.

Implement a modal pop up with React Bootstrap triggered by an add department button to enter a department name and create a new department in the database.

Add a department name text box and a save button with React Bootstrap form components. Implement handleSubmit to prevent default and alert the entered value, preparing for an API post.

Learn to consume a post method in React JS to insert department data into the departments table using fetch, with JSON headers and success or failure alerts.

Learn to refresh a React Bootstrap table automatically when a new department is added by calling a refresh list inside the componentDidUpdate lifecycle, ensuring real-time updates without page reload.

Replace the alert box with a Material UI snackbar in a React app, configuring open state, message, auto hide duration, and a close action for user-friendly notifications.

Implement an edit department feature with a modal popup, allow editing the department name, show the department ID, update via the PUT method, and display a save confirmation.

Implement delete functionality for the department details table with a delete button that asks for confirmation, then calls the api delete endpoint using the department id and json headers.

Replicate the department template to implement the employee tab with get, post, put, and delete methods and add ad employee and edit employee models for a react web api app.

Learn to build an add employee modal in React, with fields for employee name, department, email, and date of joining, posted to the /employee api, with snackbar feedback.

Implement a department dropdown populated from fetched department details and use a date picker for date of joining, then post the employee data to the API.

Implement an edit employee feature in a React app using a dedicated edit model, switch to the put method, and auto-populate fields in a modal form.