Lecture 55 :- React Intermediate - Class 1

In "React Intermediate - Class 1," we'll build on the foundation of React basics and explore more intermediate concepts and techniques to enhance our React applications. We'll cover topics such as reusable components, prop drilling, and context API.

Step 1: Reusable Components

Creating reusable components is a fundamental concept in React. Reusable components allow you to write clean and modular code, making it easier to maintain and scale your application.

Let's create a simple Button component that can be reused throughout our application.

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

jsxCopy code

import React from 'react'; function Button({ onClick, text }) {  return (    <button onClick={onClick} style={{ padding: '10px 20px', fontSize: '16px' }}>      {text}    </button>  ); } export default Button;

Step 2: Prop Drilling

Sometimes, components need to pass data down multiple levels through props. This process is known as prop drilling. While prop drilling is a common practice, it can lead to complex and messy code.

To avoid prop drilling, we can use React context to provide a value to all components in the tree without explicitly passing it down as props.

Step 3: Context API

React's Context API allows you to share data between components without having to pass the props explicitly. It consists of two main parts: the context provider and the context consumer.

Let's create a simple example using context to share a theme throughout the application.

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

jsxCopy code

import React, { createContext, useState } from 'react'; const ThemeContext = createContext(); function ThemeProvider({ children }) {  const [theme, setTheme] = useState('light');  return (    <ThemeContext.Provider value={{ theme, setTheme }}>      {children}    </ThemeContext.Provider>  ); } export { ThemeContext, ThemeProvider };

In this example, we use createContext to create a new context and useState to manage the theme state. The ThemeProvider component provides the theme value and the setTheme function to all its children components using the ThemeContext.Provider.

Step 4: Using Components Together

Now, let's use the Button component and the ThemeProvider in the App.js.

jsxCopy code

import React, { useContext } from 'react'; import { BrowserRouter as Router, Route, Link } 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 } = 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>            </ul>          </nav>          <Route exact path="/" component={Home} />          <Route path="/about" component={About} />          <Form />          <ParentComponent />          <UserList />          <Button onClick={toggleTheme} text="Toggle Theme" />        </div>      </ThemeProvider>    </Router>  ); } export default App;

In this example, we use the useContext Hook to access the theme value and setTheme function from the ThemeContext. We then pass the toggleTheme function as a prop to the Button component.

Now, when you run the application and click the "Toggle Theme" button, the theme will change between light and dark.

Congratulations! You've completed the first class of React Intermediate. You've learned about creating reusable components, avoiding prop drilling using context API, and sharing data throughout the application.

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!