React JS: From Zero to Hero

React Basics

React library frontend me reusable UI components banane ke liye use hoti hai.

import React from "react";
import ReactDOM from "react-dom/client";

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

JSX & Components

JSX HTML jaisa syntax provide karta hai aur Components UI ke reusable blocks hain.

function Button() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Button />
    </div>
  );
}

Props

Props component ko data pass karne ke liye use hote hain.

function Greeting({ name }) {
  return <h2>Hello {name}</h2>;
}

function App() {
  return <Greeting name="Zubair" />;
}

State

State component me dynamic data ko store aur update karne ke liye use hoti hai.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Simple React App

React ka simple app create karna, combining basics, JSX, props, aur state.

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <input type="text" onChange={e => setText(e.target.value)} />
      <p>You typed: {text}</p>
    </div>
  );
}

Hooks (useState, useEffect)


React Hooks allow you to use state and lifecycle features inside functional components. useState manages local state, while useEffect handles side effects like data fetching or updating the DOM.

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);
  }, [count]); // Runs when count changes

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Conditional Rendering

Conditional rendering in React lets you render different UI elements based on conditions, such as user actions or state values.

import React, { useState } from "react";

function LoginControl() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome Back!</h1>
      ) : (
        <h1>Please Log In</h1>
      )}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "Logout" : "Login"}
      </button>
    </div>
  );
}

export default LoginControl;

Lists & Keys

In React, lists are used to render multiple elements dynamically. Keys help React identify which items changed, were added, or removed, improving performance.

import React from "react";

function TodoList() {
  const todos = ["Learn React", "Build a Project", "Deploy App"];

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

export default TodoList;

Building Interactive Forms with React

Learn how to manage user input efficiently in React using state and events to build clean and responsive form layouts.

import { useState } from "react";

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

  return (
    <input
      type="email"
      placeholder="Enter email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

Client Side Navigation in React

Understand how page navigation works in React applications without reloading the browser.

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

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

Connecting Frontend with External Data

Learn how to display dynamic data in applications by communicating with external services.

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then(res => res.json())
    .then(data => console.log(data));
}, []);

Managing Application Errors in React

Improve application stability by handling unexpected issues gracefully.

if (!data) {
  return <p>Something went wrong</p>;
}

Improving Frontend Performance

Learn techniques to reduce unnecessary re-rendering and improve application speed.

import { memo } from "react";

const Button = memo(() => {
  return <button>Click</button>;
});

Creating a Weather Application Interface

Design a clean UI to display real-time weather information.

<h2>{weather.city}</h2>
<p>{weather.temp}°C</p>

Designing Login and Signup Screens

Build user-friendly authentication screens with proper input handling.

<input type="password" placeholder="Password" />

Creating a Dashboard Layout

Learn how to structure dashboards to display data clearly.

<div className="dashboard">
  <Sidebar />
  <MainContent />
</div>

Completing a Full React Project

Combine multiple frontend concepts into a single professional project.

export default function App() {
  return <MainLayout />;
}