React JS Tutorial in Hindi: Learn React Step-by-Step

Hey guys! Are you ready to dive into the awesome world of React JS? If you’re looking for a comprehensive React JS tutorial in Hindi , you’ve come to the right place! This guide will take you through everything you need to know to get started with React, from the very basics to more advanced concepts. We’ll be coding along the way, so get your code editor ready!

Introduction to React JS

So, what exactly is React JS? React is a JavaScript library for building user interfaces. It’s maintained by Facebook and a large community of developers. React makes it easy to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

One of the key features of React is its component-based architecture. Everything in React is a component, which is a reusable piece of code that renders a part of the UI. These components can be composed together to create complex UIs. React uses a virtual DOM, which is a lightweight copy of the actual DOM. When the state of a component changes, React updates the virtual DOM and then efficiently updates the actual DOM, resulting in faster performance.

React is declarative, meaning you describe what you want the UI to look like, and React takes care of updating the DOM to match that description. This makes your code easier to reason about and maintain. React is also very flexible and can be used to build a wide variety of applications, from single-page applications to complex web applications.

Why should you learn React JS? Well, it’s one of the most popular JavaScript libraries out there, and it’s used by many companies, from startups to large enterprises. Learning React can open up a lot of job opportunities for you. Plus, it’s a lot of fun to work with! React has a large and active community, so you’ll find plenty of resources and support when you need it.

Setting Up Your Development Environment

Before we start coding, we need to set up our development environment. Don’t worry, it’s not too complicated! First, you’ll need to make sure you have Node.js and npm (Node Package Manager) installed on your computer. If you don’t have them already, you can download them from the official Node.js website.

Once you have Node.js and npm installed, you can create a new React project using Create React App. Create React App is a tool that sets up a new React project with all the necessary dependencies and configurations. To create a new project, open your terminal and run the following command:

npx create-react-app my-react-app

Replace my-react-app with the name you want to give to your project. This command will create a new directory with the specified name and set up a new React project inside it. Once the project is created, you can navigate to the project directory by using the cd command:

cd my-react-app

Now you can start the development server by running the following command:

npm start

This will start the development server and open your React application in your default web browser. You should see a page that says “Welcome to React.” If you see this, congratulations! You’ve successfully set up your development environment.

Now, let’s take a look at the project structure. The src directory contains all the source code for your application. The public directory contains the static assets, such as the index.html file. The package.json file contains the metadata for your project, including the dependencies and scripts. You’ll be spending most of your time working in the src directory.

Understanding React Components

As we mentioned earlier, everything in React is a component. A React component is a reusable piece of code that renders a part of the UI. There are two types of components in React: functional components and class components. Functional components are simpler and easier to write, while class components are more powerful and offer more features.

Let’s start with functional components. A functional component is simply a JavaScript function that returns JSX. JSX is a syntax extension to JavaScript that allows you to write HTML-like code in your JavaScript files. For example, here’s a simple functional component:

function MyComponent() {
 return (
 <div>
 <h1>Hello, world!</h1>
 <p>This is my first React component.</p>
 </div>
 );
}

This component renders a div element containing an h1 element and a p element. To use this component in your application, you can import it into another component and render it like this:

import MyComponent from './MyComponent';

function App() {
 return (
 <div>
 <MyComponent />
 </div>
 );
}

This will render the MyComponent inside the App component. Notice the <MyComponent /> syntax. This is how you render a component in JSX. Now, let’s take a look at class components. A class component is a JavaScript class that extends the React.Component class. Class components have a render method that returns JSX. For example, here’s the same component as a class component:

import React from 'react';

class MyComponent extends React.Component {
 render() {
 return (
 <div>
 <h1>Hello, world!</h1>
 <p>This is my first React component.</p>
 </div>
 );
 }
}

This component does the same thing as the functional component, but it’s written as a class. To use this component, you can import it into another component and render it the same way as the functional component.

Working with Props and State

Props and state are two important concepts in React. Props are used to pass data from a parent component to a child component. State is used to manage the data within a component. Let’s start with props. To pass a prop to a component, you can add an attribute to the component when you render it:

<MyComponent name="John" />

In this example, we’re passing the name prop to the MyComponent . To access the prop inside the component, you can use the props object:

function MyComponent(props) {
 return (
 <div>
 <h1>Hello, {props.name}!</h1>
 <p>This is my first React component.</p>
 </div>
 );
}

In this example, we’re accessing the name prop using props.name and displaying it in the h1 element. Now, let’s take a look at state. State is used to manage the data within a component. To use state, you need to define it in the component’s constructor. Here’s an example:

import React from 'react';

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 count: 0
 };
 }

 render() {
 return (
 <div>
 <h1>Count: {this.state.count}</h1>
 <button onClick={() => this.setState({ count: this.state.count + 1 })}>
 Increment
 </button>
 </div>
 );
 }
}

In this example, we’re defining a count state variable and initializing it to 0. We’re also adding a button that increments the count state variable when clicked. To update the state, you can use the setState method. The setState method takes an object as an argument, which contains the new values for the state variables. When you call setState , React will re-render the component to reflect the new state.

Handling Events in React

Handling events in React is similar to handling events in HTML. You can add event listeners to elements using the on prefix, followed by the event name. For example, to add a click event listener to a button, you can use the onClick attribute:

<button onClick={this.handleClick}>Click me</button>

In this example, we’re adding a click event listener to the button and assigning it to the handleClick method. The handleClick method will be called when the button is clicked. To define the handleClick method, you can add it to the component’s class:

import React from 'react';

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 message: 'Hello'
 };
 }

 handleClick = () => {
 this.setState({ message: 'Goodbye' });
 }

 render() {
 return (
 <div>
 <h1>{this.state.message}</h1>
 <button onClick={this.handleClick}>Click me</button>
 </div>
 );
 }
}

In this example, we’re defining a handleClick method that updates the message state variable when the button is clicked. When the button is clicked, the message state variable will be updated to Goodbye , and the component will be re-rendered to display the new message.

Conditional Rendering

Conditional rendering in React allows you to render different elements or components based on certain conditions. This is useful for displaying different content based on the user’s input, the state of the application, or other factors. There are several ways to perform conditional rendering in React. One way is to use the if statement:

function MyComponent(props) {
 if (props. isLoggedIn) {
 return <h1>Welcome, user!</h1>;
 } else {
 return <h1>Please log in.</h1>;
 }
}

In this example, we’re using an if statement to check if the isLoggedIn prop is true. If it is, we render a h1 element that says “Welcome, user!”. Otherwise, we render a h1 element that says “Please log in.”. Another way to perform conditional rendering is to use the ternary operator:

function MyComponent(props) {
 return props.isLoggedIn ? <h1>Welcome, user!</h1> : <h1>Please log in.</h1>;
}

This code does the same thing as the previous example, but it uses the ternary operator instead of the if statement. The ternary operator is a shorthand way of writing an if statement. It takes three operands: a condition, a value to return if the condition is true, and a value to return if the condition is false. You can also use the && operator to perform conditional rendering:

function MyComponent(props) {
 return props.isLoggedIn && <h1>Welcome, user!</h1>;
}

In this example, we’re using the && operator to check if the isLoggedIn prop is true. If it is, we render a h1 element that says “Welcome, user!”. Otherwise, we render nothing. This is because the && operator returns the second operand if the first operand is true, and it returns the first operand if the first operand is false.

Lists and Keys

When rendering lists of elements in React, you need to provide a unique key prop to each element. The key prop helps React identify which items have changed, been added, or been removed from the list. This allows React to efficiently update the DOM when the list changes. Here’s an example of rendering a list of items:

function MyComponent(props) {
 const items = [
 { id: 1, name: 'Apple' },
 { id: 2, name: 'Banana' },
 { id: 3, name: 'Orange' }
 ];

 return (
 <ul>
 {items.map(item => (
 <li key={item.id}>{item.name}</li>
 ))}
 </ul>
 );
}

In this example, we’re rendering a list of items using the map method. For each item in the list, we’re rendering a li element with the key prop set to the item’s id . It’s important to use a unique and stable value for the key prop. The id is a good choice because it’s unique and doesn’t change. Avoid using the index of the item as the key prop, as this can lead to performance issues and unexpected behavior when the list changes.

Forms in React

Handling forms in React involves controlling the input elements and managing their state. There are two types of input elements in React: controlled components and uncontrolled components. Controlled components are input elements whose values are controlled by React state. Uncontrolled components are input elements whose values are controlled by the DOM.

Let’s start with controlled components. To create a controlled component, you need to bind the input element’s value prop to a state variable and update the state variable when the input element’s value changes. Here’s an example:

import React from 'react';

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 name: ''
 };
 }

 handleChange = (event) => {
 this.setState({ name: event.target.value });
 }

 render() {
 return (
 <input
 type="text"
 value={this.state.name}
 onChange={this.handleChange}
 />
 );
 }
}

In this example, we’re creating a controlled input element. The input element’s value prop is bound to the name state variable. The onChange prop is set to the handleChange method, which updates the name state variable when the input element’s value changes. Now, let’s take a look at uncontrolled components. To create an uncontrolled component, you need to use the ref attribute to access the input element’s value. Here’s an example:

import React from 'react';

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.inputRef = React.createRef();
 }

 handleSubmit = (event) => {
 event.preventDefault();
 alert(`Name: ${this.inputRef.current.value}`);
 }

 render() {
 return (
 <form onSubmit={this.handleSubmit}>
 <input type="text" ref={this.inputRef} />
 <button type="submit">Submit</button>
 </form>
 );
 }
}

In this example, we’re creating an uncontrolled input element. The ref attribute is set to the inputRef variable, which is a reference to the input element. The handleSubmit method is called when the form is submitted. The handleSubmit method accesses the input element’s value using this.inputRef.current.value .

Conclusion

Great job, guys! You’ve made it through this React JS tutorial in Hindi . You’ve learned the basics of React, including components, props, state, events, conditional rendering, lists, and forms. Now you’re ready to start building your own React applications. Keep practicing and experimenting, and you’ll become a React master in no time! Good luck, and have fun coding!