React Tutorial

Last Updated : 01 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

React is a powerful JavaScript library for building dynamic and interactive user interfaces (UIs). It is developed by Facebook. React is known for its component-based architecture which allows you to create reusable UI elements, making complex web applications easier to manage and maintain. React is used to build single-page applications.

react-tutorial-copy-2

React Tutorial

In this React tutorial, you’ll learn all the basic to advanced concepts of React such as React components React props, React state, Functional components in React, React hooks, etc.

React Tutorial Prerequisites:

Also Check: Recent Articles on ReactJS

Table of Content

Getting Started with React: Installation and Environment Setup

Before embarking on your React journey, ensure you have a suitable development environment set up. Here’s a roadmap to get you started:

  1. Node.js and npm: Download and install Node.js (https://nodejs.org/en/download/package-manager/current) as it provides the runtime environment for JavaScript code execution. npm (Node Package Manager) is bundled with Node.js and is used to manage project dependencies.
  2. Create React App (CRA): Using Create React App (CRA) to establish a new React project with minimal configuration. Run npx create-react-app my-react-app in your terminal, replacing my-react-app with your desired project name.

Basic Example of React:

ReactJS 
import React from 'react';
import ReactDOM from 'react-dom/client';

function Hello(props) {
  return <h1>Hello GeeksforGeeks</h1>;
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Hello />);


This code defines a functional component named App that returns JSX code displaying the text “Hello GeeksforGeeks”. Save the file and run your development server using npm start. Navigate to http://localhost:3000/ in your browser to view your webpage.

Why Learn React JS?

React, the popular JavaScript library, offers several exciting reasons for developers to learn it.

First, React is flexible – once you learn its concepts, you can use it across various platforms to build quality user interfaces. Unlike a framework, React’s library approach allows it to evolve into a remarkable tool.

Second, React has a great developer experience, making it easier to understand and write code. Third, it benefits from Facebook’s support and resources, ensuring regular bug fixes, enhancements, and documentation updates. Additionally, React’s broader community support, excellent performance, and ease of testing make it an ideal choice for web development.

Features of React

1. JSX (JavaScript Syntax Extension):

  • JSX combines HTML and JavaScript, allowing you to embed JavaScript objects within HTML elements.
  • It enhances code readability and simplifies UI development.

Example:

const name = "GeekforGeeks";
const ele = <h1>Welcome to {name}</h1>;

2. Virtual DOM (Document Object Model):

  • React uses a virtual DOM, which is an exact copy of the real DOM.
  • When there are modifications in the web application, React updates the virtual DOM first and then computes the differences between the real DOM and the virtual DOM.
  • This approach minimizes unnecessary re-rendering and improves performance.

3. One-way Data Binding:

  • React follows one-way data binding, where data flows from parent components to child components.
  • Child components cannot directly return data to their parent components, but they can communicate with parents to modify states based on provided inputs.

4. Performance:

  • React’s virtual DOM and component-based architecture contribute to better performance.
  • Separate components allow efficient rendering and faster execution.

5. Extension:

  • React has a rich ecosystem and supports various extensions.
  • Explore tools like Flux, Redux, and React Native for mobile app development and server-side rendering.

6. Conditional Statements in JSX:

  • JSX allows writing conditional statements directly.
  • Display data in the browser based on provided conditions.

Example:

const age = 12;
if (age >= 10) {
  return <p>Greater than {age}</p>;
} else {
  return <p>{age}</p>;
}

7. Components:

  • React divides web pages into reusable and immutable components.
  • Component-based development simplifies code organization and maintenance.

Core React Concepts

here are some essential concepts to learn:

  • Props: Components can receive data from parent components through props, enabling you to pass information and customize component behavior.
  • State: Components can manage their internal state using the useState hook. This state dictates the component’s appearance and behavior, and updates trigger re-renders.
  • Lifecycle Methods: React provides lifecycle methods like componentDidMount and componentDidUpdate that allow you to perform actions at specific stages of a component’s lifecycle.
  • Conditional Rendering: Control what gets displayed on the screen based on certain conditions using conditional statements within JSX.

React Advantages

  • Composable: We can divide these codes and put them in custom components. Then we can utilize those components and integrate them into one place.
  • Declarative: In ReactJS, the DOM is declarative. We can make interactive UIs by changing the state of the component and ReactJS takes care of updating the DOM according to it.
  • SEO Friendly: ReactJS affects the SEO by giving you a SPA (Single Page Application) which requires Javascript to show the content on the page which can be rendered and indexed.
  • Community: ReactJS has a huge community because of its demand each company wants to work with ReactJS. Companies like Meta, Netflix, etc built on ReactJS.
  • Easy to learn: HTML-like syntax of JSX makes you comfortable with the codes of React, it only requires a basic knowledge of HTML, CSS, and JS fundamentals to start working with it.
  • If you want to learn more refer to this article React JS Advantages
  • Debugging is Easy: The debugging of ReactJS is unidirectional which means while designing any app using ReactJS the child components are nested within parent components. So, the data flow is in a single direction it gets more easier to debug errors.

React Tutorial

React Basic Concepts

React Hooks

React DOM Events

Lifecycle of Components

Important React Packages

React Interview Questions

React Online Quizs

React Online Practice Exercise

Embark on your React learning journey with our online practice portal. Start by selecting quizzes tailored to your skill level. Engage in hands-on coding exercises, receive real-time feedback, and monitor your progress. With our user-friendly platform, mastering React becomes an enjoyable and personalized experience.

Elevate your coding expertise by going through our carefully curated Free Online React Quiz.

React Complete References

Refer to the following articles to have a quick glance at all the important key concepts which are helpful while developing web applications using React

If you want to have a simple, quick reference to commonly used React methods you can refer to ReactJS Cheat Sheet article

Frequently Asked Questions on React

What is React used for?

The primary goal of React is to create a User Interface, Single-Page Application, Progressive Web Application and more.

Which language is used in React?

React used Javascript programming language.

Is React a front-end language?

React globally used for Front-end JS framework and it popular with both software and project speoncer.

Which is in demand ReactJS or AngulerJS in 2024?

React is far more popular than AngulerJS because ReactJS comes with more libraries.

Which is better NodeJS or ReactJS or AngularJS

Choosing the framework always depends very much on your requirements. All of these three frameworks are quite popular, and users choose them based on what they want to do. But if we do so more specifically, then ReatJS is better.

Is this ReactJS tutorial for beginners or for advanced

As we said at the beginning of this article, this course is for beginners as well as for advanced. 



S
shobhit__sharma
News
Improve
Next Article
React Introduction

Similar Reads

Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Approach: In this ar
2 min read
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic
2 min read
React Suite Icon extension React Icons
A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React Suite Icon extension React icons. React Icons, contains various popular
3 min read
Implement Nested Routes in React.js - React Router DOM V6
Nested routes in React JS are implemented using the outlet in React Router Dom. Routing in React not only provides routing for the pages but also for switching the content inside that page. Nested routes implement this by defining Routes for Child components inside parent route components. Prerequisites: React JSReact RouterReact Router DomApproach
4 min read
How to Add MUI React Button Icon in React-Bootstrap ?
In this article, we will learn how to add the mui react button icon in react-bootstrap. Icons can be added in the react-bootstrap by importing the MUI icon component and using it within your React-Bootstrap button. React-Bootstrap is a front-end framework that was designed keeping React in mind. Steps to Create React Application And Installing Modu
2 min read
How to import from React-Select CDN with React and Babel ?
In ReactJS, import from React-Select CDN is not done in a simple way as we do with the npm packages. To use them we need to use directly them in the HTML file. It does not work with the project set-up by creating a react app. Prerequisites:React JSHTML, CSS, JavaScriptSteps to Import React-Select CDN with React and Babel:Step 1: Create index.html w
2 min read
Explain new features of React Memo in React v16.6 ?
React memo is a Higher Order Component (HOC) introduced in React v16.6. As the name suggests, Memo API uses the memoization technique to optimize performance and make the application faster. The Memo API avoids unnecessary re-renders in functional components thereby optimizing the performance of the application. We will see two different examples m
2 min read
What is the difference between react-fetch and whatwg-fetch in React.js ?
React-fetch and Whatwg-fetch are both libraries for making HTTP requests in a React application, but they are used for different purposes and have different features. Table of Content React-fetchWhatwg-fetchDifference between React-fetch and Whatwg-fetchReact-fetch: `react-fetch` is a library offering a higher-order component (HOC) for streamlined
2 min read
Plugin "react" was conflicted between "package.json » eslint-config-react-app
The error Plugin "react" was conflicted between package.json and eslint-config-react-app generally arises when there is a conflict in naming convention or package.json data. However, this is not the only reason for this conflict. Some of the other reasons can be due to a different version or conflict in project dependencies. Error image from Termin
2 min read
How to Zoom in/Zoom out using React-PDF in React JS ?
Zooming in or out in React-PDF within a React JS application is achieved by using the 'scale' prop inside the `&lt;Page /&gt;` component. The 'scale' prop accepts decimal values; values greater than 1 zoom in, while values less than 1 zoom out the page. Prerequisites:React JSReact Functional ComponentsSyntax: &lt;page scale = {value} /&gt; // When
2 min read
Why to use React Hooks Instead of Classes in React JS ?
The introduction of React Hooks has changed the way we are managing states and lifecycle features. They offer more easy and functional way as compared to class based components. In this article, we will learn why to use React Hooks Instead of Classes in ReactJS, but lets first discuss about both React hooks and class based components. Table of Cont
4 min read
What are React Hooks, and why were they added to React?
React Hooks are a way to add functionality to functional components in React. Before Hooks, functional components were more limited compared to class components in terms of what they could do. With Hooks, users can now use state, lifecycle methods, and other React features in functional components, making them more powerful and flexible. Hooks Addr
2 min read
Difference between React.memo() and useMemo() in React.
In React applications, optimizing performance is crucial for delivering a smooth user experience. Two key tools for achieving this are React.memo() and useMemo(). While both help improve performance, they serve different purposes and are used in distinct scenarios. Table of Content What is React.memo() ?What is useMemo() ?Difference Between React.m
3 min read
How does React.memo() optimize functional components in React?
React.memo() is a higher-order component provided by React that can help optimize functional components by reducing unnecessary re-renders. Let's explore how it works and how it optimizes functional components: Table of Content Optimizing with React.memo()When to use React.memo() ?Benefits of memoization using React.memo()How to use React.memo() ?C
4 min read
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How does React Router handle navigation in a React application?
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. Let us create a simple application to React to understand how the React Router works React Router simplifies navigation in React applicat
3 min read
What is the use of React Context in React-Redux?
React Context is a feature that React provides us to manage states required in multiple components. Redux is also a state management library and solves the same problem that React Context does but in a different way. In this article, we will see in detail what is react context, why and how to use it, how it is related to and different from react-re
5 min read
Implementing React Router with Redux in React
This article explores implementing React Router with Redux for enhanced state management and routing in React applications. Table of Content What is React Router and Redux?Approach to implement React Router in ReduxSteps to Setup the React AppWhat is React Router and Redux?React Router facilitates routing in React apps, managing component rendering
3 min read
Implementation of React.memo() and useMemo() in React
React.memo allows functional component to have same optimization as Pure Component provides for class-based components. useMemo is for memoizing function's calls inside functional component. What is React.memo() ?React.memo() is a higher-order component (HOC) provided by React that memoizes functional components. It means that it caches the result
3 min read
What are the React Router hooks in React v5?
React Router hooks perform client-side single-page routing that provides a functional and streamlined approach to managing navigation in React applications. It provides a way to directly access the state of the router from functional components, this simplifies tasks like retrieving information about the desired URL and navigating through web pages
5 min read
How to Fix React useEffect running twice in React 18 ?
In React applications, the useEffect hook is commonly used for handling side effects, such as data fetching, subscriptions, or manually changing the DOM. However, encountering the issue of useEffect running twice can lead to unexpected behavior and impact the performance of your application. In this article, we'll explore various approaches to reso
4 min read
How to create Chip in react-native using react-native-paper ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
What is the difference between React Native and React?
In modern web and mobile application development, two technologies have been making waves: React and React Native. Both are open-source frameworks developed by Facebook, designed to streamline and enhance the process of building user interfaces. But what sets them apart? This article will tell the key differences between React, primarily used for w
4 min read
Compare React Testing Library and Enzyme for Testing React Components.
React Testing Library and Enzyme are widely used testing utilities for React components. Although they serve the same purpose, their approaches and features differ. React Testing LibraryReact Testing Library is a lightweight testing utility for React. It emphasizes testing components from the user's perspective. This means focusing on how users int
4 min read
How to Use react-select in React Application?
React Select is a flexible and handy dropdown library for React that handles multi-select, loading data asynchronously, custom options, and more in your components with ease. In this article, we will see how to use react-select in React Application. PrerequisiteNode.js installednpm or yarn package managerBasic knowledge of ReactApproachTo implement
2 min read
How to install React-Bootstrap in React Application ?
React Bootstrap is a popular library that let us use the Bootstrap framework's power and flexibility to React.js applications. By combining the flexibility of React with the UI components provided by Bootstrap, you can create responsive and visually appealing user interfaces with ease. In this article, we'll see the process of installing React Boot
4 min read
How to Use React Suspense to Improve your React Projects ?
Suspense is a React component used to suspend the rendering process to perform some asynchronous tasks like getting data from API or loading any other component lazily. In simple words, Suspense is like waiting for something to happen, where we are not sure when it will happen. Suspense is beneficial in code splitting and data fetching processes. W
3 min read
How to use React Context with React-Redux ?
React context with React-Redux is a popular state management library for React applications. Using React context with React-Redux is a powerful way to provide the Redux store to components deep within your component tree without manually passing it down through props. PrerequisitesNode.js and NPMReactReact-ReduxJavaScriptApproach:First, define a Re
3 min read
Create a New React App - npm create-react-app
The create react app command allows us to create a development environment and install all necessary libraries for creating single-page applications using React. The CRA tool is used to set up a new React project quickly, providing a standard structure and configuration. It includes a development server, build scripts, and support for modern JavaSc
3 min read
Difference between React.Component and React.PureComponent?
A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. But React has two types of Components: React.PureComponent: It is one of the most significant ways to optimize React applications. By using the pure component, there is no
3 min read
Article Tags :