Welcome to Day 1 of your React Journey!

React is the most popular JavaScript library for building user interfaces. It changed the way web development is done by introducing a component-based architecture and a declarative coding style. In this 10-day series, we will take you from absolute beginner to building complex, high-performance applications.

What is React?

At its core, React is a JavaScript library for building User Interfaces (UI).

Declarative: You tell React what you want the UI to look like based on the current state, and React handles the updating.
Component-Based: You build small, self-contained pieces of code called “components” (like a button, a header, or a card) and assemble them to create complex pages.
Learn Once, Write Anywhere: React isn’t just for the web. React Native allows you to use the same skills to build mobile apps.

The Virtual DOM

One of React’s superpowers is the Virtual DOM. Traditionally, updating the DOM (Document Object Model) is slow and expensive. React keeps a lightweight copy of the DOM in memory (the Virtual DOM). When your data changes:

React updates the Virtual DOM.
It compares the new Virtual DOM with the previous one (a process called “diffing”).
It selectively updates only the parts of the real DOM that actually changed.

This makes React incredibly fast and efficient.

Setting Up Your Environment

We will use Vite (pronounced “veet”) to create our React projects. It’s a modern, lightning-fast build tool that has largely replaced create-react-app.

Prerequisites

Node.js: You need Node.js installed. Run node -v in your terminal to check. If not, download it from nodejs.org.

Step 1: Create a Project

Open your terminal and run:

npm create vite@latest my-react-app -- --template react

Step 2: Install Dependencies

Navigate into your new project folder:

cd my-react-app
npm install

Step 3: Start the Dev Server

Run the development server:

npm run dev

Open the URL shown in your terminal (usually http://localhost:5173). You should see the default Vite + React landing page.

Understanding the Project Structure

index.html: The entry point of your app. Notice the <div id="root"></div>. This is where your entire React app will be injected.
src/main.jsx: The JavaScript entry point. It finds the root div and renders your App component into it.
src/App.jsx: Your main component. This is where we will start editing code.

Your First React Change

Open src/App.jsx, delete everything inside the return (...) statement, and replace it with:

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>I am learning React.</p>
    </div>
  );
}

export default App;

Save the file. Look at your browser—it updated instantly! This is Hot Module Replacement (HMR), a feature of Vite that makes development a joy.

JSX: Writing HTML in JavaScript

You might notice something strange: we wrote HTML Tags inside a JavaScript function. This is JSX (JavaScript XML). It looks like HTML, but it’s actually JavaScript syntax extension.

JSX allows us to write UI logic naturally.
Browser’s can’t understand JSX natively, so build tools (like Vite/Babel) transform it into regular JavaScript objects.

Homework for Day 1:

Create a fresh React project using Vite.
clean up the default boilerplate in App.jsx and App.css.
Create a simple landing page with a Header, a Main intro paragraph, and a Footer using plain JSX inside App.jsx.

See you in Day 2, where we will break this down into real Components!

Day 1: React Introduction & Environment Setup