React Basics - Class 3

Lecture 51 :- React Basics - Class 3

In "React Basics - Class 3," 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 Hooks, forms, and component lifecycle methods.

Let's dive into the new concepts:

Step 1: React Hooks

React Hooks are functions that allow you to use state and other React features in functional components, without the need to use class components. Hooks provide a simpler and more concise way to manage state and side effects in your components.

Here are some commonly used React Hooks:

• useState: Allows you to add state to functional components.
• useEffect: Allows you to perform side effects in functional components (e.g., data fetching, subscriptions, etc.).
• useContext: Allows you to access the nearest context value in functional components.
• useReducer: Allows you to use a reducer function to manage state in functional components.
• useCallback and useMemo: Help optimize performance by memoizing functions and values.

Let's rewrite the Counter component from the previous class using useState Hook.

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>      <button onClick={incrementCount}>Increment</button>      <button onClick={resetCount}>Reset</button>    </div>  ); } export default Counter;

Step 2: Forms

React makes it easy to handle form inputs and capture user input data. You can use the useState Hook to manage form state and the onChange event to handle user input.

Let's create a simple form component that captures user input and displays it.

jsxCopy code

import React, { useState } from 'react'; function Form() {  const [inputValue, setInputValue] = useState('');  const handleChange = (e) => {    setInputValue(e.target.value);  };  return (    <div>      <input type="text" value={inputValue} onChange={handleChange} />      <p>You typed: {inputValue}</p>    </div>  ); } export default Form;

Step 3: Component Lifecycle Methods

In class components, you have access to component lifecycle methods, such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allow you to execute code at different stages of a component's life.

In functional components, you can use the useEffect Hook to achieve the same behavior. useEffect combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount.

Let's see how to use useEffect Hook.

jsxCopy code

import React, { useState, useEffect } from 'react'; function Timer() {  const [seconds, setSeconds] = useState(0);  useEffect(() => {    const interval = setInterval(() => {      setSeconds((prevSeconds) => prevSeconds + 1);    }, 1000);    return () => {      clearInterval(interval);    };  }, []);  return (    <div>      <h2>Timer: {seconds} seconds</h2>    </div>  ); } export default Timer;

In this example, the useEffect Hook runs after the component is mounted (similar to componentDidMount). It starts an interval that updates the seconds state every second. Additionally, we've returned a cleanup function from useEffect, which will clear the interval when the component is unmounted (similar to componentWillUnmount).

Step 4: Using Components Together

Now that we've created separate components for React Hooks, forms, and lifecycle methods, let's use them in the App.js.

jsxCopy code

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

Congratulations! You've completed the third class of React Basics. You've learned about React Hooks, forms, and component lifecycle methods, which are essential concepts in building robust and dynamic React applications.

React is a powerful library that allows you to create highly interactive and scalable 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!