Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

React JS Complete Course with ASP.NET Core APIs

Name: React JS Complete Course with ASP.NET Core APIs
Rating: 3.9 (44 reviews)

Master React.js from Basics to Advanced – Learn Hooks, Redux, Routing, and Integrate .NET 6 APIs to Build Real-World App

Created byNoor Uddin

Last updated 3/2025

English

What you'll learn

You will learn all the basics concepts of React Js
Master the "Redux" part in this React Js tutorial
Understand class and functional components
Learn how to use Hooks in ReactJs
Create ASP .NET Core Rest APIs
Learn how to implement ASP.NET API in React JS Application
You will learn React DOM events handling in detail
Create your own React Hooks Forms & save data in SQL DB using ASP.NET 6 Core APIs
Learn how to use inline CSS, export external CSS files
Great Control: Easily implement ReactJs Bootstrap
Understand how to navigate between different components using React Router, NavLink React
You will learn all basic React Js Installation for development
Use Postman to test React API and React fetch data from API
Create full-stack web application by React Js advanced concepts
Learn how to create Nav Menu and application Layout
Redux implementation in the app by complete example
AXIOS for APIs call

Course content

12 sections • 58 lectures • 8h 38m total length

Download and install visual studio code2:37
In this video, you will learn about the basic installation of visual studio code on your machine.
Download and install NPM1:58
In this video, I have explained how to install npm on your machine.
Verify NPM and Node version on your PC1:30
After installation of npm and node and then if we have to check whether it is installed successfully or not, then you can see the explanation in this video.
Create first react js app4:34
In this video, we have to create our first react js application.

React JS app folder structure6:10
In this lecture, you will learn about the basic folder structure of any React JS web application.
public folder
src folder
node_modules
App.js, index.html, and index.js files5:26
In this video, you will get a piece of very basic knowledge about App.js file, index.html file, and index.js file
Reactjs how to import, export components?4:54
In React JS and in many other programming languages like Java, Python, we are using the import keyword for importing any library, packages, or module inside a js file. For example, we use the following statement for importing react inside a React component.
import React from "react";
Same as we have to use the following statement if we want to enable a component to export.
export default Home;
Difference between HTML class & React Js className3:21
In this video, you will be able to see the basic difference between HTML class and React js class. In normal HTML we use class like in below syntax:
<div class="row"><h2>React Js</h2></div>
In React JS, we can use above syntax like:
<div className="row"><h2>React Js</h2></div>
You can see that there is a small difference between these two syntaxes.
React JS button onClick Event4:03
Handling events with React elements is very similar to handling events on DOM elements. In this video, I have explained how to call a function if someone clicks on a button in React JS component.

Class component in react js5:01
In React Js App, there are basically two ways of writing a React component. One uses a function and the other uses a class component. Recently functional components are becoming more and more popular.
In this video, I have explained React Js class component.
Function component in react js8:16
A functional component is basically a JavaScript/ES6 function that returns a React element (JSX). In this video, I have explained the function components of React Js.
Main difference between class and function component2:42
Functional Component:
A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
Class Component:
A class component requires you to extend from React. Component and create a render function that returns a React element.

In this video, I have explained the basic difference between functional and class components.
State in class component16:58
The state object is where you store property values that belong to the component. In class components, we initialize the state inside the constructor of the class.
I have explained in detail the concept of state in react js class component in this lecture.

Inline css in ReactJs app8:13
We are using inline CSS in any HTML page directly on the tag if required. We can also use inline CSS in ReactJs but there is a small difference as compared to the normal HTML inline CSS declaration. I have explained this all in this lecture.
Import external css file in React Js App5:49
If you are familiar a little with HTML & CSS then you will remember that we import the CSS file in the <head> tag or in any other part of the HTML page. In ReactJs, we import CSS files inside the <head> tag of index.html or we can directly import inside the React Js component by using the import statement.
How to use Bootsrap in React Js Web Project11:22
Bootstrap is a free and open-source CSS framework that we are using since 2011. We can also use Bootstrap in React Js application. I have explained in this video how to integrate Bootstrap in the ReactJs application.

What is hook?11:43
Hooks are a new addition in React Js. They let you use state, useEffect, and other React features without writing a class in a more simple way. We will introduce the concept of React Js Hooks in this lecture.
useState hook in React Js8:08
The useState() is a Hook that allows you to have state variables in functional components. In the bracket of useState Hook, we pass two elements, the first element is the initial state and the second one is a function that is used for updating the state.
useEffect hook in ReactJs6:36
By using this Hook, you tell React that your component needs to do something after rendering the component. In a normal Web app, we use the JQuery document.ready and JavaScript window.load functions if we want to do some kind of activity after loading the page. In ReactJs functional components, we use the useEffect() hook for this purpose.
4. Rules of Hooks2:58
There are some rules of hooks. We should be aware of the rules of React Js Hooks. I have defined the rules of hooks in this lecture.
Complete example of hooks16:20
In this video, I have explained the hook in more detail by doing coding activity.

How to install route in ReactJs?1:01
I have shown the process of how to install the route in react js application in this video. The command for installing route in react js application is "npm install react-router-dom"
How to define routers in React Js?14:49
ReactJs Router is one of the important concepts for navigation and routing in any React Js Application. In this lecture, I have defined routing in React js applicaiton.
Difference between Link and Navlink?5:31
The main difference between these two's is a class attribute. When we use NavLink as a tag, it automatically inherits an active class when clicked. On the other hand, the Link tag does now have an active class when clicked.
How to make simple nav menu in React JS?8:41
In this lecture, I created a very simple nav menu. In the menu, then I inserted some simple links to navigate between different components.

React Js arrow function6:30
Arrow functions are (mostly) just “syntactic sugar” for conventional function declarations. There is no performance difference.
Events handling in React20:50
An event is an action that could be triggered as a result of the user action or a system-generated event. For example, a mouse click is an event that fired if somebody click on a button, link, etc.
Forms handling in React Js18:55
In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. In this lecture, I have explained forms handling.
React Js props12:02
Props are arguments passed into React components. Props are passed to components via HTML attributes. I have explained props in detail in this video.
How to pass data from one component to other?2:33
In this lecture, I have explained how to pass data from one component to another component.
React Js arrays and list14:17
I have explained arrays and lists in detail in this lecture.
If condition, switch statement11:55
React Js html table9:49
In HTML we have a table. In React Js we can also use the HTML table. I have just explained how to use the HTML table in React js.
How to install axios?1:42
In ReactJS, Axios is a library that serves to create HTTP requests that are present externally like calling an API. In React, we are using axios for calling APIs. In this video, I have shown the installation process of axios.
Use of axios for fetching api data12:25
In this video, I have given an example about fetching data using axios.
Ternary operator in React Js5:47
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark ( ? ), then an expression to execute if the condition is truthy followed by a colon ( : ), and finally the expression to execute if the condition is false

Installing visual studio 20194:36
In this video, I will tell you about how to install the popular code editing environment, Visual Studio for ASP .NET 6 APIs development for react js application development.
Installing sql server and sql server management studio1:52
In this lecture, we will install the SQL Server and SQL Server Management Studio for our ASP .NET 6 API creation and database operation for React Js application.
Installing post man3:03
Postman is an API platform for building and using APIs. We can use Postman for testing any API. In this lecture, I have shown the process of installing Postman.

Create API project & folders structure10:23
In this video, I have created an ASP .NET 6 Core API project for creating our APIs for the React js application.
What is model?2:47
In ASP .NET, the Model is just like a class. In the model folder of the project, we are keeping our class of database tables.
What are controllers?18:27
The controllers process incoming requests, perform operations on Model data, and return data. In this lecture, I have just explained the controller.
Routings in ASP .NET API project4:08
Routing is used to map requests to route handlers. Routes are configured when the application starts up and can extract values from the URL that will be used for request processing.
Connections string setting for SQL Server2:40
A connection string provides the information that a provider needs to communicate with a particular database. The Connection String includes parameters such as the name of the driver, Server name, and Database name, as well as security information such as user name and password.

Creating new SQL Data Base1:56
In this video, I have created a new MS SQL Database.
Creating student table in SQL Data Base3:26
I have created a table "Students" in the database in this lecture.
Creating .NET Core Insert Data API30:19
In this video, I have created a complete ASP .NET insert record API.
Creating React js insert form9:50
In this lecture, I have created a form in react js application for inserting student data.
Calling API from React Js insert form and show success message16:46
In this video, I have call the insert record API from React js Form Submit event.

Requirements

A computer with Internet Connection
Just basic knowledge of HTML and JavaScript
A mindset to learn React Js with ASP.NET 6 Core APIs in a most Simplest Way
You have a mission to get higher paid Job in software industry as React Js Developer

Description

Welcome to the Ultimate React.js Tutorial!

Hi there!

Are you ready to dive into the world of React.js? This course is designed to help you learn React.js in a fast, simple, and practical way.

Why This Course?

Many tutorials focus solely on React.js frontend development, but very few teach you how to integrate real-world REST APIs to build a full-fledged web application. That’s where this course stands out!

In this course, you'll master:
React.js for frontend development
ASP .NET 6 for creating REST APIs

By the end of this course, you’ll be able to develop a complete, fully functional React.js web application with seamless backend integration.

What You’ll Learn:

React.js Fundamentals

React.js Core Concepts
Functional & Class Components
React State Management
Event Handling & Forms

React.js Advanced Concepts

React Hooks (useState, useEffect, etc.)
Redux & State Management
React Router for Navigation
Props & Data Passing

Styling in React

Inline & External CSS
Bootstrap Integration

Connecting React.js with ASP .NET 6

Creating REST APIs in ASP .NET 6
Making API Calls with Axios

Bonus Topics

Arrow Functions in JavaScript
Best Practices for React Development

Start Your React.js Journey Today!

This course is packed with practical knowledge to help you build real-world applications. If at any point you feel the course isn’t meeting your expectations, you can unroll anytime—your learning matters the most!

Enroll now and let’s start coding!

Who this course is for:

This course is for anyone who wants to learn React Js from basic to advanced with ASP.NET 6 Rest API
This course is best for all those who wants to learn ReactJs in most simplified way
If you want to learn how the people in software industry using React Js for real world development then you are at the right place because I am working in software companies and know better how to use ReactJs in Real World development
If you want to take one course and learn React Js, ASP.NET Rest APIs and a little about SQL Server then you should enroll in this course
Beginners React Js Developer want to enter the industry with a React developer tools and techniques
All Web Developers

React JS Complete Course with ASP.NET Core APIs

What you'll learn

Explore related topics

Course content

Basic installation for React JS4 lectures • 11min

Introduction to React JS5 lectures • 24min

Reat Js Components4 lectures • 33min

Styling React Js Components3 lectures • 25min

React Js Hooks5 lectures • 46min

Routing in react js4 lectures • 30min

React Js Advanced Topics11 lectures • 1hr 57min

Basic installation for .Net core APIs3 lectures • 10min

Introduction to .NET Core5 lectures • 38min

React JS insert operations using net Core API5 lectures • 1hr 2min

Requirements

Description

Who this course is for: