ReactJS Tutorial: A Complete Guide for Beginners

Introduction:

In modern times, users want to make interactive and dynamic single-page applications. If you create a website using HTML, CSS, and JavaScript, the website’s loading time is very slow, and the performance of the application is affected. But using React, your website gives fast performance, loading time will be very fast.

In this article, we will discuss React.js Tutorial from the beginner level to the professional level of developers. React.js is mostly used JavaScript library to gain now as it provides many advanced features and a huge community.

React.js

React.js is a popular and useful JavaScript library for making dynamic user interfaces. Everything in React works as a Component. It was released and invented by Facebook in 2011, but nowadays it’s maintained by Meta.

This focuses on the MVC (Model-View-Controller) architecture for the view layer. React.js uses the concept of virtual DOM for faster response and updates. The latest version of React is 19.1.1, released on July 28, 2025.

Example

Code:

import React from ‘react’;

function App() {

return (

<>

<h1>Welcome to My React App</h1>

<p>This is a simple example of a React component showing user information.</p>

 

<div>

<h2>John Doe</h2>

<p><strong>Profession:</strong> Software Developer</p>

<p><strong>Location:</strong> New Delhi, India</p>

<p><strong>Skills:</strong></p>

<ul>

<li>React</li>

<li>Node.js</li>

<li>JavaScript</li>

<li>MongoDB</li>

</ul>

</div>

 

<footer>

<p>Created with using React</p>

</footer>

</>

);

}

export default App;

Output:

Welcome to My React App

This is a simple example of a React component showing user information.

John Doe

Profession: Software Developer

Location: New Delhi, India

Skills:

• React
• Node.js
• JavaScript
• MongoDB

Created with using React

Why learn React.js?

Before React, creating a website using HTML, CSS, and JavaScript was very difficult and gave low performance, increasing loading time. But with React, you can easily create highly performant, decreasing loading time, and fast rendering. Some of the key points are as follows:

• Huge Community: js supports huge communities in the real world. These communities support a rich ecosystem of tools, libraries, and frameworks like Material UI, Redux, and Next.js, etc.
• Fast Rendering: React uses a fast-rendering system because it uses virtual DOM (this means update only the required list).
• Ease to learn: js is very easy to learn because it’s based on a component-based architecture. If you learn JavaScript up to an advanced level, you can easily learn React.js Fastly because it’s a JavaScript library.
• Integrated Apps development: With the use of React, you can create Mobile apps, Web apps, and many websites such as Facebook, Airbnb, Instagram, and YouTube etc.

Features of React.js

React.js plays a major role in the front-end library. Many features are shown below in detail:

• Virtual DOM: These features help to build faster updates for React Apps. It’s only updating this list that is required for React. This represents the real DOM of the HTML Document.
• Component-Based Architecture: Everything in React works in a component-based way. It helps to build code reusability, scalability, and flexibility.

Set up your React Environment

There are many ways to set up your React.js on many Operating systems, such as Windows, Linux, and macOS etc.

Download React.js On Windows:

Before installing React.js, you must install Node.js from https://nodejs.org/en and the NPM (Node.js Package Manager) package. If you want to verify whether the install or not, you can check through node -v and also npm -v.

Run this command below on the Command Prompt or Windows Terminal to set up for creating app:

• npx create-react-app my-app
• cd my-app
• npm start

Open your browser to run on the local host http://localhost:3000 to start a React app.

JSX (JavaScript XML)

JSX is also referred to the JavaScript XML. With the use of JSX, you can write HTML in JavaScript. It is used to embed expressions within curly braces {}, representing Objects, Attributes, React components, etc. You can easily convert HTML tags into React elements. Conditional statements are not used inside the JSX.

Example

Code:

import React from ‘react’;

 

function App() {

return (

<>

<h1>Hello, React!</h1>

<p>Welcome to my first JSX example.</p>

 

<h2>Student Information</h2>

<p><strong>Name:</strong> Tpoint Tech</p>

<p><strong>Website:for fresher or experienced</strong></p>

<p><strong>Address:</strong> Noida</p>

 

</>

);

}

export default App;

Output:

Hello, React!

Welcome to my first JSX example.

Student Information

Name: Tpoint Tech

Website:for fresher or experienced

Address: Noida

Props in React

It is also referred to as the properties. With the help of props, you can pass data from one component to another component. It’s used in both components such as functional and class components.

Example

Code:

import React from “react”;

// Child Component

function Greet(props) {

return (

<h2>

Hello, {props.name}! You are {props.age} years old.

</h2>

);

}

 

// Parent Component

function App() {

return (

<div>

<h1>Props Example in React</h1>

{/* Passing props */}

<Greet name=”Alice” age={22} />

<Greet name=”Ananya” age={25} />

</div>

);

}

 

export default App;

Output:

Props Example in React

Hello, Alice! You are 22 years old.

Hello, Ananya! You are 25 years old.

State in React:

With the use of state, you can pass data within the component and mutable. State is used for both operations, like read and write.

Example

Code:

import React, { useState } from “react”;

 

function FormExample() {

// State to store input value

const [name, setName] = useState(“”);

 

// Handle input change

function handleChange(event) {

setName(event.target.value);

}

 

return (

<div>

<h1>React Form State Example</h1>

<input

type=”text”

placeholder=”Enter your name”

value={name}

onChange={handleChange}

/>

<p>Hello, {name ? name : “Guest”} </p>

</div>

);

}

 

export default FormExample;

Output:

Components in React

Components are used for a reusable block of code in a React application. It can be used for app consistency. You can easily change only the component rendering, but not the whole page. All React components must start with an upper-case letter.

Types of Components:

There are mainly two types of Components:

1. Functional Components:

It is also referred to as the stateless components. This allows us to use React Hooks like useState, useEffect, etc to manage lifecycle and state. It returns that JSX.

Syntax:

function ComponentName(props) {

return (

<div>

{/* JSX code goes here */}

</div>

);

}

export default ComponentName;

Example

Code:

import React from “react”;

 

// Functional Component with props

function Greeting(props) {

return (

<div>

<h1>Hello, {props.name}!</h1>

<p>Welcome to {props.place}.</p>

</div>

);

}

export default Greeting;

Output:

Hello, !

Welcome to .

2. Class Components:

It is a modern concept of ES6 classes and allows the React lifecycle methods in a React component. This component extends React.Component statement, and it works as the Inheritance to React.Component. It uses the render() method to return html. Lifecycle methods provide features like mounting, updating, and unmounting. This cannot be used with the React hooks, but only with the functional components.

Syntax:

class ComponentName extends React.Component {

render() {

return (

<div>

{/* JSX code here

*/}

</div>

);

}

}

 

Example

Code:

import React, { Component } from “react”;

 

class Greeting extends Component {

constructor(props) {

super(props);

 

// State

this.state = {

message: “Welcome to React!”,

Age: 22

};

}

 

// Event handler to change message

changeMessage = () => {

this.setState({

message: “Thanks for visiting, ” + this.props.name

});

};

 

render() {

return (

<div>

<h1>{this.state.message}</h1>

<p>Age: {this.state.Age}</p>

 

</div>

);

}

}

 

export default Greeting;

Output:

Welcome to React!

Age: 22

 

React Hooks

Hooks help to manage state and other features of React without any extra functionalities. It allows us to use React life cycle methods in functional components. It can be called at the first level and cannot be used conditional statement.

Types of React Hooks:

There are many types of React hooks, some are as follows:

1) useState:

This helps to manage the state within the component. It contains two state-like states that store the value of the state and setState to modify the state. With the use of this, you can easily update and read the state in the component.

Syntax:

const [set, setState] = useState(initialValue);

Example

Code:

import React, { useState } from “react”;

 

function PasswordInput() {

// state to track visibility

const [showPassword, setShowPassword] = useState(false);

const [password, setPassword] = useState(“”);

 

return (

<div>

<h1>useState Example: Show / Hide Password</h1>

 

<input

type={showPassword ? “text” : “password”}

placeholder=”Enter password”

value={password}

onChange={(e) => setPassword(e.target.value)}

/>

 

<button onClick={() => setShowPassword(!showPassword)}>

{showPassword ? “Hide” : “Show”}

</button>

 

<p>Your Password: {password || “N/A”}</p>

</div>

);

}

 

export default PasswordInput;

Output:

 

2) React useEffect:

This helps to manage side effects within the components. It provides you to fetch data from API, directly update the DOM, use timers like setTimeout, setInterval, ClearInterval, etc. It contains two arguments: function and dependency.

Syntax:

useEffect(() => {

// code runs only once when the component mounts

 

return () => {

// Write your code here to be executed

};

}, []);

Example

Code:

import React, { useState, useEffect } from “react”;

 

function DigitalClock() {

const [time, setTime] = useState(new Date());

 

useEffect(() => {

// update time every second

const timer = setInterval(() => {

setTime(new Date());

}, 1000);

 

 

return () => clearInterval(timer);

}, []);

return (

<div>

<h1> Digital Clock via useEffect </h1>

<h2>{time.toLocaleTimeString()}</h2>

</div>

);

}

export default DigitalClock;

Output:

 

3) React Router:

It is a JavaScript library that manages React applications. With the use of this, you can easily create layouts, handle browser history, and manage multiple pages in a single-page application.

With the use of this command to install the react-DOM npm install react-router-dom.

Advantages of React.js

React.js helps to manage the user interface and provides many offers for web development:

• Virtual DOM for performance: Virtual DOM helps to manage faster updates because it manages the updates required for React applications.
• Scalability: It provides component-based architecture and efficient ways to build and maintain large application systems.
• Easy to learn: Any developer can easily learn to React.js because it’s a JavaScript library. It’s easy for both beginner-level and experienced developers.

Best Practices for Beginners

• First of all, learn the Advanced JavaScript
• Manage UI with the use of Components
• Use Hooks with functional Components
• Use React Router for Navigation for multiple pages.
• After learning, create a small project to enhance your skills to advanced levels.

Conclusion

This article provides a deeper understanding of React tutorials from beginner to advanced levels. React is not just a library; it helps developers build fast, flexible, scalable, and user-friendly applications. If you are a beginner-level programmer to learn these concepts like fragments, props, state, JSX, components, and Hooks etc.

I recommend that you can learn ReactJS from the Tpoint tech website, as it provides React.js Tutorials, interview questions, and all its related topics in simple language.