React Basics - Class 4

Lecture 52 :- React Basics - Class 4

In "React Basics - Class 4," we'll continue exploring more advanced React concepts and build on what we learned in the previous classes. We'll cover topics such as React Router, conditional rendering with ternary operators, and mapping data to components.

Step 1: React Router

React Router is a popular library that allows you to handle routing and navigation in a React application. It enables you to create multiple pages and switch between them without a full page reload.

Let's install React Router and set up basic routing for our application:

Install React Router:

Open your terminal and run the following command to install React Router:

bashCopy code

npm install react-router-dom

Set Up Routing:

Create a new file called Home.js inside the src folder with the following content:

jsxCopy code

import React from 'react'; function Home() {  return <h2>Welcome to the Home Page!</h2>; } export default Home;

Next, create another file called About.js inside the src folder with the following content:

jsxCopy code

import React from 'react'; function About() {  return <h2>About Us</h2>; } export default About;

Now, modify the App.js to set up routing using react-router-dom:

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>          </ul>        </nav>        <Route exact path="/" component={Home} />        <Route path="/about" component={About} />      </div>    </Router>  ); } export default App;

Now, when you run the application, you'll have a basic navigation bar with links to the Home and About pages. Clicking on the links will display the corresponding components.

Step 2: Conditional Rendering with Ternary Operators

In the previous classes, we used if-else statements for conditional rendering. You can also use ternary operators to achieve the same result in a more concise way.

Let's update the Counter component to use ternary operators for conditional rendering.

jsxCopy code

import React, { useState } from 'react'; function Counter() {  const [count, setCount] = useState(0);  const incrementCount = () => {    setCount((prevCount) => prevCount + 1);  };  const resetCount = () => {    setCount(0);  };  return (    <div>      <h2>Count: {count}</h2>      {count === 0 ? (        <p>Start counting!</p>      ) : count === 10 ? (        <p>You reached 10!</p>      ) : count === 20 ? (        <p>You reached 20!</p>      ) : null}      <button onClick={incrementCount}>Increment</button>      <button onClick={resetCount}>Reset</button>    </div>  ); } export default Counter;

Step 3: Mapping Data to Components

In many cases, you'll receive data in the form of an array and want to render components for each item in the array. You can use the map function to achieve this.

Let's create a simple list rendering example using an array of names.

jsxCopy code

import React from 'react'; function NameList() {  const names = ['Alice', 'Bob', 'Charlie', 'David'];  return (    <div>      <h2>List of Names</h2>      <ul>        {names.map((name) => (          <li key={name}>{name}</li>        ))}      </ul>    </div>  ); } export default NameList;

Step 4: Using Components Together

Now that we've created separate components for React Router, conditional rendering, and list rendering, let's use them in the App.js.

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Counter from './Counter'; import NameList from './NameList'; function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>          </ul>        </nav>        <Route exact path="/" component={Home} />        <Route path="/about" component={About} />        <Counter />        <NameList />      </div>    </Router>  ); } export default App;

Congratulations! You've completed the fourth class of React Basics. You've learned about React Router, conditional rendering with ternary operators, and mapping data to components.

React provides powerful tools to build dynamic and interactive user interfaces. As you continue your React journey, you can explore more advanced topics like React Context, custom hooks, and state management libraries.

Keep practicing, building more complex applications, and exploring the vast possibilities of React! Happy coding!