Unit 02

Components are the building blocks of a React application. A component is a reusable piece of UI that defines how a particular part of a web page should appear and behave.

Components divide a large application into small, independent, and reusable parts, making the application easier to develop and maintain.

Types of Components

React mainly has two types of components:

function Welcome() {
    return <h1>Welcome to React</h1>;
}

export default Welcome;

import React from "react";

class Welcome extends React.Component {
    render() {
        return <h1>Welcome to React</h1>;
    }
}

export default Welcome;

Advantages of Components

A form in React is used to collect input from users, such as name, email, message, etc. Forms are created using JSX elements such as <form>, <input>, <button>, <textarea>, and <select>.

React handles form data differently from plain HTML by generally using Controlled Components.

Controlled Components

A controlled component is a form element whose value is controlled by React state. The input's value comes from state, and whenever the user changes the input, the state is updated using onChange.

import { useState } from "react";

function SimpleForm() {
    const [name, setName] = useState("");

    return (
        <form>
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />

            <p>You typed: {name}</p>
        </form>
    );
}

Here, value={name} makes the input display the current state value, onChange runs whenever the user types something, and setName() updates the state. React therefore always knows the current value of the input.

Form Submission

The onSubmit event is used to handle form submission.

function SimpleForm() {
    const [name, setName] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("Submitted:", name);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
            />

            <button type="submit">Submit</button>
        </form>
    );
}

The important statement is e.preventDefault();. Normally, submitting an HTML form reloads the page. e.preventDefault() prevents the default page reload, allowing React to handle the submission using JavaScript.

Handling Multiple Fields

Multiple form fields can be stored in a single state object:

const [formData, setFormData] = useState({
    name: "",
    email: ""
});

const handleChange = (e) => {
    setFormData({
        ...formData,
        [e.target.name]: e.target.value
    });
};

Here, e.target.name identifies which input was changed, e.target.value contains the entered value, and ...formData preserves the existing field values.

Other Form Components

React also supports controlled textarea and select elements using the same value and onChange approach.

Definition

Hooks are special functions in React that allow Functional Components to use React features such as state, lifecycle methods, context, DOM access, and performance optimization.

All React Hooks start with the word use.

Some Commonly Used Hooks

Example of useState()

useState() is a Hook used to store and update data inside a Functional Component. When the state changes, React automatically re-renders the component and updates the UI.

import { useState } from "react";

function App() {
    const [count, setCount] = useState(0);

    return (
        <>
            <h1>{count}</h1>

            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </>
    );
}

export default App;

Here, count stores the current state value, setCount is used to update the value, and useState(0) sets the initial value of count to 0. When the button is clicked, setCount(count + 1) updates the state and React re-renders the component.

Advantages of Hooks