React Tutorial

What is React?

React is a JavaScript library developed by Meta (Facebook) to build fast and interactive user interfaces for web and mobile apps. It helps developers create reusable UI components and manage the application state efficiently.

If you’ve used HTML, CSS, and JavaScript, React makes it easy to build complex UIs using simple code.

---

Why Learn React?

• It’s popular – used by companies like Facebook, Instagram, Netflix.
• Supports reusable components – write once, use anywhere.
• High performance due to Virtual DOM.
• Easy to manage large-scale apps with state and props.

---

Prerequisites

Before learning React, you should know:

• Basic HTML
• Basic CSS
• Basic JavaScript (especially functions, arrays, and objects)

---

Setting Up React

You can create a React project in 2 simple ways:

1. Using Create React App (Recommended)

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

This opens your project at http://localhost:3000/.

2. Using CodeSandbox (Online Editor)

Go to https://codesandbox.io, choose “React” template – done!

---

React Basics

Components

In React, everything is a component. Components are like JavaScript functions that return HTML.

Example:

function Welcome() {
  return <h1>Hello, React!</h1>;
}

You use it like this:

<Welcome />

---

Props (Short for “Properties”)

Props allow you to pass data from one component to another.

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

// Usage
<Welcome name="XYZ" />

---

State

State lets components keep track of data that can change.

import React, { useState } from 'react';

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

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </>
  );
}

---

Event Handling

React handles events like onClick, onChange using camelCase syntax.

function Greet() {
  const sayHi = () => alert("Hi!");
  return <button onClick={sayHi}>Say Hi</button>;
}

---

Conditional Rendering

You can show content based on a condition.

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome Back!</h1>;
  } else {
    return <h1>Please Log In</h1>;
  }
}

---

Folder Structure (Basic)

my-app/
├── public/
├── src/
│   ├── App.js        // Main component
│   ├── index.js      // Entry point
│   └── components/   // Your custom components

---

JSX – JavaScript + XML

JSX lets you write HTML in JavaScript.

const element = <h1>Hello World</h1>;

Note: JSX must return a single parent element. Use <> </> fragments if needed.

---

Useful React Hooks

• useState() – for managing local state
• useEffect() – for side effects like API calls
• useRef() – to reference DOM elements

---

How React Works (Simplified)

1. You write components in JSX.
2. React converts JSX into JavaScript.
3. React updates the Virtual DOM.
4. React only updates the real DOM where changes happened, making it fast.

---

Styling in React

You can style using:

• CSS files
• Inline styles
• CSS modules
• Styled-components (advanced)

const titleStyle = { color: 'blue', fontSize: '20px' };
<h1 style={titleStyle}>Styled Text</h1>

---

React Router (For Navigation)

To switch pages without refreshing:

npm install react-router-dom

Example:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

---

Making API Calls

Use useEffect and fetch to get data from APIs.

import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <ul>
      {data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

---

Testing Your App

You can test your app with tools like:

• Jest
• React Testing Library

---

Build and Deploy

To create a production build:

npm run build

You can deploy to:

• GitHub Pages
• Netlify
• Vercel

---

Conclusion

React is powerful, beginner-friendly, and used everywhere in modern web development. Start small, build reusable components, and as you grow, explore advanced tools like Redux, Context API, or Next.js.