React Home, Intro, Get Started & First App

React HOME — what this course covers

This Rishtaara React course teaches you step by step — from your first component to hooks, routing, and a full mini project.

React is a JavaScript library for building user interfaces. You build small reusable pieces called components and combine them into full apps.

Real-life example: React is like LEGO blocks. Each block (component) is simple. You snap many blocks together to build a house, a car, or a whole city (your app).

• Basics: JSX, components, props, events, lists, forms
• Styling, React Router, and advanced UI patterns
• Hooks: useState, useEffect, useContext, and more
• Final project: course progress tracker app

Introduction — what is React?

React was created by Meta (Facebook). It helps you build fast, interactive web apps without reloading the whole page for every small change.

React uses a Virtual DOM — it compares the old UI with the new UI and updates only what changed. Sites like Netflix, Instagram, and Rishtaara use React.

Real-life example: Without React, changing one price on a menu might repaint the entire restaurant wall. With React, only that one price tag gets updated.

• Component-based — build once, reuse everywhere
• Declarative — you describe what UI should look like for each state
• Huge ecosystem — React Router, Next.js, many UI libraries
• Strong job market — one of the most in-demand frontend skills

Get Started — create your first React app

Today most developers use Vite to start a React project. It is fast and simple. Create React App (CRA) was popular for years but is now less recommended for new projects.

You need Node.js installed. Then run a few commands in your terminal. Your app will open at localhost with hot reload — save a file and see changes instantly.

Real-life example: Vite is like a ready-made kitchen with stove and utensils. You walk in and start cooking (coding) instead of building the kitchen from bricks.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

# Older way — still works but Vite is preferred for new apps
npx create-react-app my-app
cd my-app
npm start

React First App — Hello World

A React app usually has src/main.jsx (entry point) and src/App.jsx (your first component). main.jsx mounts App into a div with id root in index.html.

App is a function that returns JSX — it looks like HTML but lives inside JavaScript.

Real-life example: index.html is the empty picture frame. main.jsx hangs the picture (App) inside the frame on your wall (the browser).

function App() {
  return (
    <div>
      <h1>Hello, Rishtaara!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);