React JS Tutorial 2026 | Introduction To React JS | React JS Tutorial For Beginners | Simplilearn

Key Takeaways

[music] Are you looking to build dynamic high performance user interfaces with minimal effort? Then React is a tool you need. It is developed and maintained by Facebook. React is one of the most popular front-end libraries for building modern web applications. With its component-based architecture, React allows developers to create reusable UI components leading to faster development and cleaner code. In today's tutorial, we will dive into React basics from setting up your development environment to building your first React app. By the end of the session, you'll be confident while using React. Now, here's the agenda of our today's session. First, we are going to start with introduction to React and why to use it. Then, we are going to set up React development environment. Moving ahead, we are going to discuss about React components and understanding JSX and rendering. Then, we are going to deep dive into props and state in React. Moving ahead, we are going to handle events in React. And finally, we are going to explore React router. Now, here's a short quest to test your knowledge. What is the primary purpose of React? And your options are backend development, building user interfaces, database management, serverside rendering. Please mention your answers in the comment section below. Now, before we move on, just a quick info guys. Simply learn has got AI powered fullstack developer program. You can become job ready with AI powered fullstack developer course. In this course, you're going to develop modern apps using Monstag, Java and EI powered tools. You can boost your CV with 60 plus hands-on project and also you are going to earn Microsoft certificate. So guys, hurry up now and join the course. The course link is mentioned in the description box. So let's get started. Now let's start with first understanding what is React. So, React is basically a JavaScript library which is used to build user interfaces particularly for single page application where you need fast and interactive UI. But first question you would ask why React? Because React follows component-based architecture. You can break down your UI into small and manageable components and you can reuse it across your application. The next reason why I would say you should choose React is because of virtual DOM. React improves performance by minimizing direct DOM manipulation and it uses virtual DOM to efficiently update the UI only when necessary. So it also you know resolves the problem of rerendering every time. And finally React has a huge ecosystem and community support. React has one of the most largest developer communities and has a massive ecosystem of tools, libraries and resources. Now let me give you some example. Imagine you are building an e-commerce website and the UI has the search bar, product list, shopping cart and user profile components. Now with React, you could easily manage and update each of this UI part without refreshing the whole page. Sounds amazing, right? And when you click add to cart, React will update only the card component rather than reloading the entire page. So in this all entire process, React uses a declarative approach for building UIs. This means you can describe the desired outcome and let React take care of updating the UI. Now let us move ahead and try to do some hands-on. So first of all, let us set up our React. Now before you get started, make sure that you have NodeJS downloaded on your system. Now you can go to the official website of NodeJS and you can choose your operating system and based on that you can download it. Now there are various ways to install NodeJS but I would say install it locally. So you can see either you can directly install using the standalone version or you can run these in your command prompt. Now for installing NodeJS I would say use chocolatey and use npm as your package manager. So open your powershell and type first command this then you should type choco install nodejs version and then verify that you have node version installed or not and then verify whether you have npm or not. Now the next step you should follow is open your command prompt and type node v and you can see I have node 22.30 installed on my system and similarly you can check for npm v and it is going to show you the current version. Make sure that your node is updated to the latest version. So you follow the documentation and follow the same process to install. Now after that what I would say is make a folder. Let's say I have created a new folder. It's called react to. And uh if you don't have VS code installed on your system you should go to the official website of VS Code and type VS code download and then you can download VS Code. So if your operating system is Windows click all over here. If you're using Ubuntu you can use here. If you're using Mac, you can choose this. Since I have all of these installed on my system, so I will directly proceed. Now, let us open our VS code. Now, the next step that you need to do is go to file, open folder and check for your respective folder which you have created. Now, let us create our first React app. Go to view and here you can see terminal all over here. Now maximize this. Now after this type this command next all you need to type is npx create react app and then you can give the name of your react app. Let's say I've given very simple name my react app and then it is going to ask you to install the following package. Just click on Y and let it install all the important packages in your project folder. Now you can see it has started created a new react app and when you open this given folder you can see it has created my react app folder and under this it is going to install node modules and the important folders necessary for you to start developing your react app. Let us wait for a couple of time till then the installation is complete. Now you can see all over here that we have successfully created our react app. Now let us start our given server and let us run our first react app. So for starting the given react app first let us explore this package.json JSON and here you can see in the scripts the command is start. So all you need to type here is npm run start and it is going to start your given react app. Okay. Now you can see if you do this most of the time you're going to get error like this. Now the problem here is we are not inside this given folder. So let us go inside this given folder. So type cd my react app and now we are inside this directory. Now you can type the same command npm run start and it is going to install and it is going to start your given react app. So guys you can see all over here this is our given react app. Now let us try to understand the folder structure all over here. So you can see all over here that this is your node modules. So this is very much important. Okay. So this has all these important libraries that is needed to run your react app. Without node modules, your react app won't start. Then you can see this is a public file. So in the public file, you can have your images or assets which is required to actually build the UI. Let's say you are building any book management system and in this you have the catalogs of the books available. So what you can do is you can put your images under this public folder. So you can have your images of the books like book one, book two, book three and all these images can be stored here. Now this is the main folder that we are going to explore. So you can see all over here we have app.tss, dot js app dot css and index dot css and app test.js. So app dot css has the important CSS file which is important for your given application. App dot js is a main file. Now I'll show you something. So let us first delete all of those things. And here what you can do is you can just say hello world. So if you type div container and just say uh h1 tag and you can just write just say say hello world and you can see all over here that it has used. Now you can see there is one warning that logo is defined but never used. We are not using this. So you can just delete this and it is going to resolve this given error. Now all over here you can also remove the app dot CSS file if you want. You can write your CSS from the scratch. And here you can see instantly you are seeing hello world. Now this is a very amazing feature of React and we call it as hot reloading. So whatever changes you are doing in your code, it is going to be visible on your given UI instantly. So this is a very important file for us. Now this file is basically used for testing. Let's say you have built any component and you want to test its functionality. So you'll use this given file. Now this is index dot CSS. Here is a root CSS for your given file. So this is kind of the simple folder structure. Now there is one more very much important file that you have that is called as package.json. Now here you are going to see the dependencies and the packages and the commands that will be mentioned all over here. Let's say these are the script commands. Let's say if you want to start your given react app. So the command is start. You can change this to let's say npm rundev also. Then this is the build command for building the React scripts. This is the test for testing your React scripts. And if you want to eject it, this is the eject command. Now here you are going to see the dependencies you are installing. So you can see there is a testing library all over here. Then you have React version 19.2.0. Then you have React DOM. You have React scripts and web vital. Now let's close all those things and let's start from the scratch. Okay. Now open your given app dot js file and let us try to understand a very important style of writing react. And this style of writing react code is called as JSX. Now what is JSX? JSX stands for JavaScript syntax. So JSX is a syntax extension which basically allows you to write JavaScript inside HTML like code. So React uses this to define the structure of the UI in a very declarative app. So let's say if you want to write hello world. So you can see you are creating a function app and then you are using a return uh statement all over here and inside this you are putting your given HTML code kind of pretty much uh you know amalgamation of your JavaScript and your HTML. Now we will be using this format to write our given React scripts. Basically JSX allows us to write the HTML like code inside JavaScript. Now what is going to happen? It is going to be transpiled into a regular JavaScript using Babel. Okay. So before you run it into the browser, let's say you are working on this social media app and you could use this JSX syntax to create components. Let's say for displaying post, comments and user interaction. Now JSX will allow you to describe the UI with HTML tags and it is going to make the code more cleaner and more readable. So this is a little bit theory about JSX which is a very important concept for you to get started with React. Now let us move ahead and try to learn the next part that is creating React components. So guys, React apps are made up of components and components are reusable independent pieces of code that define how a UI should appear. They can either be class component or functional component. But for this tutorial, we are going to focus on functional component. Now let us create our first functional component called greeting.js. And you can create one folder called components all over here. So let us create one folder under src and you can call it as components. Now inside this component what you can do? You can create a given file. Let's say greeting dojs. Now all over here you can give greeting dot dot dot dot dot dot dot dot dot dot dojs or you can also rename it as greeting.jsx for your react style file. Next up you need to create a function. So since I already told you we will be focusing on building functionalbased component. So you are going to write javascriptbased code in order to proceed. So let us create a function called greeting and let's say the function is greeting all over here and very simple after this you need to make sure that you use a return statement okay and inside this you can write your given uh HTML code let's say we want to just return hello world or let's say welcome to the react okay so you can just use a div tag all over here and Inside the div tag, you can create a H2 tag all over here. And let's say welcome to React. So you can write something like this. Welcome to React components. Now you need to also export this given component so that you can put this component inside your app do.js. So all over here what you need to do next is export. and then you can just type export default function greeting. Now you can use this component inside your app dot js. So one of the most important thing is don't forget to import your greeting component. So let's say in inside this given div tag what you can do just directly you can pass a greeting component. So let's say for example this is your greeting component and okay now you can see all over here we have inserted our given greeting component and it is imported from greeting/ component/ greeting basically it is importing this given function from here and you are putting up in app dot js file now let us see if any problems are coming no the problem is nothing but there is one error that it's saying that greeting is not defined. Okay, we have resolved that. Now let us open our given uh host and you can see all over here that it's showing some error that greeting is not defined. Let us resolve this. So I think there some typo issue has happened. Okay, so this is pretty much fine. Okay, now go to your greeting component. So this is function greeting. Welcome to React components and here you can see there is a export error. Now you can see the error is resolved. Okay. So make sure you are following the given thing. Now guys you can see all over here we are seeing welcome to react components. Now in this way you can create your components and you can render it inside your app.js file. So this is a very simple React component that we have built. Now let us move ahead and try to understand the next concept. Now guys let us try to understand what is props. So basically props stands for properties and it is a very very important concept in react. So let's say you want to pass data from one component to the another and with the props you can easily do that. Let me explain you with a real world example. Let's say you are building a social media app like Facebook and you have different users all over here. With each user there is like the image, you can see the bio or you can see the profile picture and also what are the post given by a given user. What I exactly mean is let's say you create a normal component called profile.jsx JSX and in this you basically pass this given argument which is called as props. So this will be very much efficient for passing the data to the different components. And let's say each of the user has given names bio and the image. Okay. So you can see in the written statement I have accessed the data name of the given user and the bio and the image. So instead of making this for each of the you know uh users you just generalize it with the help of props. Now I'll tell you the benefit of this. Now if you go to your app do.jx file. Now inside this let's say you have two given profiles which you want to return. And here you can see here you have h1 tag saying welcome to the user profile page. And there are two profile components that you have passed. So you can pass any number of profile components and you can exactly uh you know replicate this by changing the image and the name and the bio and here you just create only one component. So with the help of that you can easily generalize your you know react development. Now what I mean to say is you can see all over here we have these two users John Doe and Jane Smith. Now they have their given image and here you can see some bio written uh passionate software developer and here is Jane Smith which says loves building react app. Now what I have done is instead of creating the component individually for each one of them I have used a concept of props and I have just created one profile component in which what I'm trying to return is the name bio and the image. If you want to return something else, you can add all over here. Let me show you. Let's say and here in the given app dot jsx you can also mention these things. So below this you can just add designation and here you can give something like let's say react. Now if you see all over here then you can see here you are getting designation. So and uh let us first change the name all over here. So and you can return something like this all over here that S3 tag you could just use designation. Now you are going to see all over here that the designation shows reactive which is pretty interesting. And similarly you can add the same component all over here for Jane Smith. So from this given example guys you can understand why properties or props are one of the most important concepts in React. So this was about props. Now guys before learning about hooks. Let us talk bit about state management. See state in react basically represents the data that can change over time such as it could be user input or data fetched from an API and the use state hook allows us to add state to the functional components. So if I say what are hooks? So basically hooks are functions which basically add your life cycle to your react component. Now let us say we have a very basic function all over here. let's say the counter and whenever I click on increment it updates the value based on our given input now it remembers the previous state also that what was our previous state let's say if it is two and if I press the button it is going to change it to three similarly to 4 5 6 but when you refresh the page it is going to start from zero now let us try to understand this concept so first of all let us create a component print counter.jsx. So now here you need to declare your given state variables. Now for this always you need to have two of the given things. One is your given variable, one is the function. So count is your variable and set count is a function that you are going to use. And let's say the initial state of our counter is zero. Now if you change it to one all over here you are going to see that the state has changed to one. Pretty interesting. Now all over here you can see there is one function that I have written increment and it is using the set count function. Really I have just put count + one. So this is basically incrementing the count + one when you hit the increment. Now in the return what basically I'm saying that I'm returning the count variable. What is the number of count which you are seeing this in the UI. Okay. And all over here there is a button also. So let's say if you want to add buttons. So you are going to use the button component which is a kind of inbuilt component in react. So next step you are adding this functionality. So on clicking what change is going to happen? So I am just passing this given function increment. So when you are going to hit the button increment is going to happen. And then you have closed this given thing and you have exported your given counter now and just pass this given counter component. Now what is going to happen all over here that in this given scenario you have successfully used the use state and you have managed your given state and let me show you guys if I refresh it now the counter state is one from the start. So this is what we exactly mean by the use state. So whenever you are using the use state hook so make sure you are basically declaring two given variables one will be the function and one will be the given variable which will take the responsibility of maintaining your given state and in this way I'll also ask you to create one given counter function let's say decrement when you click it it basically you know uh does the decrement part so what you can do Just copy the same thing. Okay. And you could write one more given function increment. So let's say change this name to decrement. And instead of set count minus one, you can just put set count minus one. Now you can create two buttons all over here. Okay. And here you can pass decrement with the help of use state hook. Now let us see our given UI and you can see there are two buttons increment and decrement. Now when I press this the value goes up when I press this the value goes down. Pretty much easier guys I hope so you would have got the idea of managing state in react. Now let me give you one real life scenario. Now let's say you are building app and in that you are adding a functionality of user authentication in a login page. Now here the use state hook can be used to manage the login state whether the user has logged in or not. Let's say when a user submits the form the state changes and the UI updates and reflects the logged in state. So the use state hook in react mechanism enables the UI to automatically update when the state changes and each state update causes a component to rerender reflecting the new data in the UI. Pretty much amazing guys. I hope so you would have got a brief idea regarding this. Now let us try to look at this given example. Let's say I type something like hi how are you? And you can see whatever I'm typing it's showing the same thing. Now let us try to understand what exactly is happening. So guys we call this thing as event and handling events like on clicking on change or onsubmit is kind of pretty straightforward. You attach event handlers to the element just like regular JavaScript but with react specific syntax. Now let's say in this given example we want to add a input field and also we want to update its state. So let's say whatever you type your state is updated and showed all over here. So for this given example, what you need to do is just use the ustate hook. Okay. So this is another example of using the use state hook and try to handle the events. So let us say the text we are writing. So we create our U state and initially we initialize it with something empty. So that's why there is nothing all over here. And let's say there are two variables and here you can see I have dstructured this. So it is text and set text. Now text will be the variable which will keep count of the given text that you have typed and set text is going to change the given thing. Now all over here I'm using the set text function and here you can see I'm using e.target dot value. Basically this means that I am updating the state with the input value whatever you type. Now this is the given event that is going to happen whenever the user interacts with the given application. Now in the return statement nothing just there is H1 tag and there is one input field that you have created. So for creating the input field just use the input tag and there you can type text what is the value and on change this is the given event handler that I am basically handling and then you are basically trying to use this given function all over here. So this is going to change whenever you are going to type handle change and in the placeholder it's written type anything. So if I refresh this you can see here the placeholder says type something. So this is something like this and whatever you have typed you can display this with this given state. So this variable is very much important for us to track that. So let's say you have typed the given text P and then you have exported your given default app. And when you run this given thing you're going to see something like this. So guys, similarly you can do with button like onsubmit function or on click function. Let's say if you are working with forms you can just use the onsubmit functionality and if you are working with button you can use on click event handler. Now let me give you a real world scenario. Let's say you have a to-do list app. So you can use event handlers to update the state as users type task into the input field. Now whenever the user presses enter a new task can be added to the list dynamically. So in the react event handling uses synthetic events to ensure compatibility across all the browsers and these events are normalized and provides a consistent interface. I hope so guys you would have got a brief idea regarding this. Now let us move ahead to the next part which is also pretty much interesting which is react router. So guys, React Router is a library for handling navigation in single page application. It basically lets you create multiple pages and helps you navigate between them without reloading the page. So that's what's the importance of React Router. Now the first and important thing is you need to install React Router DOM. So all you need to type is npm install react router DOM and just click enter and you can see it will start downloading and after this given dependency has been installed what you can do you can go to your package.json and check for the installation of your react router DOM. Now let us look all over here and you can see we have the react router DOM version 6.30.1. Now let us try to understand what we have basically done. Let's say you in a given web application you might have different different pages. So let's say you have a about page and a homepage. Now in the about page okay let us create first a folder page under src. And in this you can just create these two given thing about do.js file and homepage.js. In the about jx file what you are basically doing is you are creating a function about and you are just returning a h2 tag with about page. Similarly you are doing with the homepage. Now these are the two different pages in your given web application. After this go to your app dot jx file and here you need to import browser router as router route link and routes which are involved in routing. So it all comes from react router DOM and then you need to import page and then next is homepage. Now all over here the coding style that we are following for react routing is that first you need to use this component router and under this you are using a navigation tag and here you are giving a link. Let's say this is link to home. So home I have not added anything but let's give this as/home. So this is your link to /home page and this is link to about page. Then here you can see all over here this is a routing path also add home and then you have added the route path for your given about page. So first of all you need to start with you know router tag then you can give the navigation links whatever the links you want to give like for homepage or about page and then you give the respective routes which are involved in that. So if you are giving the routes based on the given path so you you need to use route then as a next parameter path and then here you need to give the URL that you are you know basically using to show the respective pages. So I have these two respective pages for home and for about I'm using /about and let's say in the given element I have /home as one component and about as another. So this is a very simple application of showcasing how you can show different pages in your given application with the help of react router. Now let us try to run this given application. Now you can see all over here when I'm going to let's say /home I'm seeing these two URL home URL and about URL. Now whenever I click to home URL I'm navigated to /home URL. And let's say if I'm trying to go to the about page there I can see about the about page. So this is how react basically helps you to deal with routing. So I hope so guys. Now let me give you one real life scenario. Let's say you have a travel website. So there you can use react router to manage pages like homepage, destination listings and booking confirmation without reloading the entire page. So users can click between home and about pages and react router will handle the page transition very much seamlessly and believe me guys this has a very much additive advantage over improving performance and also improving user experience. I hope so guys you would have got a brief idea regarding react router DOM library. So guys that was kind of a beginner friendly tutorial to React. We have covered some of the basic components like components, props, state management, event handling and routing. Now guys, I want to conclude this session with saying that React is powerful because of its component-based architecture. And once you get the hang of it, you can build complex and interactive UIs with ease. So guys, that was all for today's session. If you like these kind of videos then do not forget to hit the subscribe button and click the notification bell icon such that you don't miss out any update from our end. Thank you guys for watching this video.