Lecture 49 :- React Basics - Class 1

In "React Basics - Class 1," we'll introduce you to the fundamentals of React, a popular JavaScript library for building user interfaces. React allows you to create reusable UI components and efficiently manage the state of your application.

Before we begin, make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download Node.js from the official website (https://nodejs.org) and npm will be automatically installed along with Node.js.

Let's start by creating a new React project and exploring the basics of React:

Step 1: Create a New React Project

Open your terminal (command prompt) and run the following command to create a new React project using Create React App:

bashCopy code

npx create-react-app my-react-app

Replace "my-react-app" with your preferred project name. This command will create a new directory with the project structure and all the necessary files.

Step 2: Navigate to the Project Directory

Change your current working directory to the newly created project directory:

bashCopy code

cd my-react-app

Step 3: Start the Development Server

Start the development server with the following command:

bashCopy code

npm start

This will launch your React application, and you can access it in your web browser at http://localhost:3000.

Step 4: Understanding the Project Structure

Inside the "src" folder, you'll find the main files and folders that make up your React application:

index.js: This is the entry point of your application. It renders the root component and mounts it into the DOM.

App.js: This is the default component that represents your application. You can modify this component or create additional components as needed.

index.html: The main HTML file where your React application is injected. You can find the root element with the ID "root" that serves as the entry point for rendering the React components.

Step 5: Edit the App Component

Open the App.js file and edit its content to display a simple "Hello, React!" message.

jsxCopy code

import React from 'react'; function App() {  return (    <div>      <h1>Hello, React!</h1>    </div>  ); } export default App;

Step 6: React Components

In React, components are the building blocks of your application. They are reusable and self-contained pieces of UI that can be composed together to build complex user interfaces.

Components can be either function components or class components. We used a function component in the previous step. Let's see how to create a class component.

jsxCopy code

import React, { Component } from 'react'; class Welcome extends Component {  render() {    return <h2>Welcome to React!</h2>;  } } export default Welcome;

Step 7: Using Components

Now, let's use the Welcome component we created in our App.js.

jsxCopy code

import React from 'react'; import Welcome from './Welcome'; function App() {  return (    <div>      <h1>Hello, React!</h1>      <Welcome />    </div>  ); } export default App;

Step 8: Props

Props (short for properties) are a way to pass data from a parent component to a child component. Let's modify the Welcome component to accept a prop and use it.

jsxCopy code

import React, { Component } from 'react'; class Welcome extends Component {  render() {    return <h2>Welcome to {this.props.name}!</h2>;  } } export default Welcome;

Now, we can pass the name prop to the Welcome component when using it in App.js.

jsxCopy code

import React from 'react'; import Welcome from './Welcome'; function App() {  return (    <div>      <h1>Hello, React!</h1>      <Welcome name="React App" />    </div>  ); } export default App;

Step 9: State

State is a mechanism to store and manage data within a component. Unlike props, which are read-only and set by the parent component, state is mutable and managed internally within a component.

Let's create a component with state and a button to update that state.

jsxCopy code

import React, { Component } from 'react'; class Counter extends Component {  constructor() {    super();    this.state = {      count: 0,    };  }  incrementCount = () => {    this.setState((prevState) => ({      count: prevState.count + 1,    }));  };  render() {    return (      <div>        <h2>Count: {this.state.count}</h2>        <button onClick={this.incrementCount}>Increment</button>      </div>    );  } } export default Counter;

Now, use the Counter component in the App.js.

jsxCopy code

import React from 'react'; import Welcome from './Welcome'; import Counter from './Counter'; function App() {  return (    <div>      <h1>Hello, React!</h1>      <Welcome name="React App" />      <Counter />    </div>  ); } export default App;

Congratulations! You've completed the first class of React Basics. You've learned how to create a new React project, create components, use props and state, and build a simple React application.

In the next class, we'll explore more advanced React concepts and build more complex applications. Keep practicing and exploring the vast possibilities of React!