React Basics - Class 5

Lecture 53 :- React Basics - Class 5

In "React Basics - Class 5," we'll continue exploring more advanced React concepts and build on what we learned in the previous classes. We'll cover topics such as handling forms, managing state, and communicating between components.

Step 1: Handling Forms in React

Handling forms in React involves managing the form state and updating it based on user input. You can use the useState Hook to manage the form state and the onChange event to update it.

Let's create a simple form that captures user input and displays the submitted value.

jsxCopy code

import React, { useState } from 'react'; function Form() {  const [inputValue, setInputValue] = useState('');  const handleChange = (e) => {    setInputValue(e.target.value);  };  const handleSubmit = (e) => {    e.preventDefault();    alert('Submitted value: ' + inputValue);    setInputValue('');  };  return (    <div>      <h2>Form Example</h2>      <form onSubmit={handleSubmit}>        <input          type="text"          value={inputValue}          onChange={handleChange}          placeholder="Enter text..."        />        <button type="submit">Submit</button>      </form>    </div>  ); } export default Form;

Step 2: Managing State and Communicating Between Components

State management is a crucial aspect of React applications. Sometimes, components need to share data with each other or lift state up to a common ancestor.

Let's create a simple example where we lift the state up to the parent component to share it with the child components.

jsxCopy code

import React, { useState } from 'react'; function ParentComponent() {  const [count, setCount] = useState(0);  const incrementCount = () => {    setCount((prevCount) => prevCount + 1);  };  return (    <div>      <h2>Parent Component</h2>      <p>Count: {count}</p>      <ChildComponent count={count} />      <button onClick={incrementCount}>Increment</button>    </div>  ); } function ChildComponent({ count }) {  return (    <div>      <h3>Child Component</h3>      <p>Count from Parent: {count}</p>    </div>  ); } export default ParentComponent;

In this example, the ParentComponent has its own state, and it passes the count value as a prop to the ChildComponent. The child component receives the prop and displays the count value from the parent.

Step 3: Using Components Together

Now, let's use the Form component and the ParentComponent 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 Form from './Form'; import ParentComponent from './ParentComponent'; 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} />        <Form />        <ParentComponent />      </div>    </Router>  ); } export default App;

Congratulations! You've completed the fifth class of React Basics. You've learned about handling forms in React, managing state, and communicating between 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!