React Tutorials.

This tutorial introduces React step by step with simple explanations and examples.

---

1. What is React?

React is a JavaScript library developed by Facebook for building user interfaces, especially single-page applications.

• Component-based
• Fast and efficient
• Uses Virtual DOM

---

2. Setting Up React

The easiest way to create a React app is using create-react-app:

npx create-react-app my-app
cd my-app
npm start

This starts a development server at http://localhost:3000.

---

3. JSX (JavaScript XML)

JSX allows you to write HTML inside JavaScript.

const element = <h1>Hello, React!</h1>;

---

4. React Components

Components are reusable pieces of UI.

Functional Component

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

Using the Component

<Welcome />

---

5. Props

Props are used to pass data to components.

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

<Greeting name="Alice" />

---

6. State

State allows components to manage dynamic data.

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

---

7. Handling Events

Events in React are written in camelCase.

function ClickExample() {
  function handleClick() {
    alert("Button clicked!");
  }

  return <button onClick={handleClick}>Click Me</button>;
}

---

8. React Hooks

useState Hook

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

useEffect Hook

Runs side effects such as fetching data.

import { useEffect } from "react";

useEffect(() => {
  console.log("Component mounted");
}, []);

---

9. Conditional Rendering

{isLoggedIn ? <Dashboard /> : <Login />}

---

10. Lists and Keys

const items = ["Apple", "Banana", "Orange"];


  {items.map((item, index) => (
{item}
  ))}

---

11. Conclusion

React helps you build fast, scalable, and maintainable user interfaces. Practice building small projects to master it.

Next steps:

• React Router
• Context API
• Redux
• API integration

---