What is React?

React is a JavaScript library developed and maintained by Facebook, designed for building user interfaces. It simplifies UI development through a component-based approach. With React, you can build large applications by breaking them down into simple, reusable parts called components.

Key Features of React

1. Component-based Architecture
   
   Each part of the UI — such as buttons, forms, and modals — is written as a separate component.

2. JSX (JavaScript XML)
   
   React allows writing components using HTML-like syntax within JavaScript.

3. Virtual DOM
   
   React updates only the parts of the DOM that have changed, making it fast and efficient.

4. One-way Data Binding
   
   Data flows from parent to child components, which makes the code easier to control and debug.

5. Hooks
   
   Hooks allow you to use features like state (useState) and side effects (useEffect) in functional components.

Getting Started with a React App

To create a project:

npx create-react-app my-app

cd my-app

npm start

A Simple React Component

import React from "react";



function Welcome(props) {

  return <h1>Hello, {props.name}!</h1>;

}

Example of useState Hook

import React, { useState } from "react";



function Counter() {

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



  return (

    <div>

      <h2>Count: {count}</h2>

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

      <button onClick={() => setCount(count - 1)}>-</button>

    </div>

  );

}

✅ This component updates the count state when the user clicks the buttons.

Example of useEffect Hook

import React, { useEffect, useState } from "react";



function Timer() {

  const [seconds, setSeconds] = useState(0);



  useEffect(() => {

    const interval = setInterval(() => {

      setSeconds((prev) => prev + 1);

    }, 1000);



    return () => clearInterval(interval); // cleanup

  }, []);



  return <h3>Time: {seconds} seconds</h3>;

}

✅ This component increments the seconds state every second.

Working with Props and Children

function Card({ title, children }) {

  return (

    <div style={{ border: "1px solid gray", padding: "1rem" }}>

      <h2>{title}</h2>

      <div>{children}</div>

    </div>

  );

}



// Usage:

<Card title="News">

  <p>React 19 is coming soon!</p>

</Card>

Controlled Form Example

function LoginForm() {

  const [email, setEmail] = useState("");



  const handleSubmit = (e) => {

    e.preventDefault();

    alert("Email: " + email);

  };



  return (

    <form onSubmit={handleSubmit}>

      <input

        type="email"

        value={email}

        onChange={(e) => setEmail(e.target.value)}

        placeholder="Enter your email"

      />

      <button type="submit">Submit</button>

    </form>

  );

}

Why React?

• Large community and rich ecosystem

• Reusable components

• Easy to manage large and complex UIs

• Foundation for both web and mobile apps (React Native)

Conclusion

React is a powerful and modern library that simplifies the web application development process. Whether you're working on small projects or large enterprise systems, React is a reliable choice. With JSX, components, and hooks, you can keep your code clean and efficient.