React Intermediate - Class 2

Lecture 56 :- React Intermediate - Class 2

In "React Intermediate - Class 2," we'll continue exploring more intermediate React concepts and build on what we learned in the previous classes. We'll cover topics such as React Router advanced usage, form handling, and controlled components.

Step 1: React Router - Advanced Usage

In the previous classes, we used basic routing with React Router. However, React Router offers more advanced features, such as nested routes, route parameters, and redirects.

Nested Routes:

Nested routes allow you to render components within other components based on their URLs. This is useful for creating layouts with multiple sections.

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; function App() {  return (    <Router>      <div>        <h1>Hello, React!</h1>        <nav>          <ul>            <li>              <Link to="/">Home</Link>            </li>            <li>              <Link to="/about">About</Link>            </li>            <li>              <Link to="/products">Products</Link>            </li>          </ul>        </nav>        <Route exact path="/" component={Home} />        <Route path="/about" component={About} />        <Route path="/products" component={Products} />      </div>    </Router>  ); } function Products() {  return (    <div>      <h2>Products</h2>      <ul>        <li>          <Link to="/products/1">Product 1</Link>        </li>        <li>          <Link to="/products/2">Product 2</Link>        </li>      </ul>      <Route path="/products/:id" component={ProductDetail} />    </div>  ); } function ProductDetail({ match }) {  const { id } = match.params;  return <h3>Product Detail: {id}</h3>; } // Rest of the components (Home, About) are the same as before...

In this example, we have nested routes for the /products page. The Products component renders a list of products and provides nested routes for individual product details using the :id route parameter.

Step 2: Form Handling and Controlled Components

In React, you can handle form inputs using controlled components. Controlled components are components where form data is handled by React state.

jsxCopy code

import React, { useState } from 'react'; function Form() {  const [formData, setFormData] = useState({    username: '',    email: '',    password: '',  });  const handleChange = (e) => {    const { name, value } = e.target;    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));  };  const handleSubmit = (e) => {    e.preventDefault();    // Process form data here...  };  return (    <div>      <h2>Form Example</h2>      <form onSubmit={handleSubmit}>        <input          type="text"          name="username"          value={formData.username}          onChange={handleChange}          placeholder="Username"        />        <input          type="email"          name="email"          value={formData.email}          onChange={handleChange}          placeholder="Email"        />        <input          type="password"          name="password"          value={formData.password}          onChange={handleChange}          placeholder="Password"        />        <button type="submit">Submit</button>      </form>    </div>  ); } export default Form;

In this example, the form input values are controlled by the formData state. The handleChange function updates the state whenever a user types in the input fields.

Step 3: Using Components Together

Now, let's use the advanced React Router features, Form, and the ThemeProvider from the previous class in the App.js.

jsxCopy code

import React from 'react'; import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About'; import Form from './Form'; import ParentComponent from './ParentComponent'; import UserList from './UserList'; import Button from './Button'; import { ThemeProvider, ThemeContext } from './ThemeContext'; function App() {  const { theme, setTheme } = React.useContext(ThemeContext);  const toggleTheme = () => {    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));  };  return (    <Router>      <ThemeProvider>        <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333' }}>          <h1>Hello, React!</h1>          <nav>            <ul>              <li>                <Link to="/">Home</Link>              </li>              <li>                <Link to="/about">About</Link>              </li>              <li>                <Link to="/products">Products</Link>              </li>            </ul>          </nav>          <Switch>            <Route exact path="/" component={Home} />            <Route path="/about" component={About} />            <Route path="/products" component={Products} />            <Route path="/form" component={Form} />            <Route path="/user-list" component={UserList} />            <Route path="/parent-component" component={ParentComponent} />            <Route path="/button" component={Button} />          </Switch>          <Button onClick={toggleTheme} text="Toggle Theme" />        </div>      </ThemeProvider>    </Router>  ); } export default App;

Congratulations! You've completed the second class of React Intermediate. You've learned about React Router advanced usage, form handling with controlled components, and nested routes.

React offers a wide range of possibilities for building powerful and interactive user interfaces. As you continue your React journey, you can explore more intermediate and advanced topics such as custom hooks, state management libraries like Redux, and server-side rendering with Next.js.

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