Lecture 57 :- React Intermediate - Class 3

In "React Intermediate - Class 3," 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 hooks, custom hooks, and useEffect.

Step 1: React Hooks

React Hooks are functions that allow you to use state and other React features in functional components. They provide a way to add stateful logic to functional components without the need for class components.

useState Hook:

The useState Hook is used to add state to functional components. It returns a state variable and a function to update the state.

jsxCopy code

import React, { useState } from 'react'; function Counter() {  const [count, setCount] = useState(0);  const increment = () => {    setCount(count + 1);  };  return (    <div>      <h2>Count: {count}</h2>      <button onClick={increment}>Increment</button>    </div>  ); } export default Counter;

useEffect Hook:

The useEffect Hook allows you to perform side effects in functional components, such as fetching data, subscribing to events, and more. It runs after every render.

jsxCopy code

import React, { useEffect } from 'react'; function Example() {  useEffect(() => {    // Code to run after component render    console.log('Component rendered');    return () => {      // Code to run on component unmount      console.log('Component unmounted');    };  }, []);  return <div>Example Component</div>; } export default Example;

Step 2: Custom Hooks

Custom hooks are reusable functions that contain hooks or other logic. They allow you to extract component logic into separate functions and share it between different components.

jsxCopy code

import { useState } from 'react'; function useCounter(initialValue) {  const [count, setCount] = useState(initialValue);  const increment = () => {    setCount(count + 1);  };  const decrement = () => {    setCount(count - 1);  };  return { count, increment, decrement }; } export default useCounter;

Step 3: Using Components Together

Now, let's use the Counter component and the custom useCounter hook 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'; import Counter from './Counter'; import useCounter from './useCounter'; function App() {  const { theme, setTheme } = React.useContext(ThemeContext);  const { count, increment, decrement } = useCounter(0);  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} />            <Route path="/counter">              <Counter count={count} increment={increment} decrement={decrement} />            </Route>          </Switch>          <Button onClick={toggleTheme} text="Toggle Theme" />        </div>      </ThemeProvider>    </Router>  ); } export default App;

In this example, we use the useCounter custom hook to manage the state and functions related to counting. We pass the count, increment, and decrement values as props to the Counter component, which displays the count and provides buttons to increment and decrement the count.

Congratulations! You've completed the third class of React Intermediate. You've learned about React hooks, custom hooks, and useEffect.

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 state management libraries like Redux, handling asynchronous operations with hooks, and server-side rendering with Next.js.

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