Mastering React: A Complete Tutorial Series for Beginners and Beyond

Chapter 2: React Basics — From Setup to JSX

This chapter covers everything you need to know to set up your React environment and understand how JSX, ES6, and core rendering concepts form the foundation of any React app.

🧠 Why This Chapter Matters

Before building powerful, reusable components or diving into hooks and state management, you must have a strong grasp of how React is structured. That includes:

• How React apps are initialized
• The role of JSX and ES6 features
• How React renders HTML
• What it means to "upgrade" React
• How everything comes together in a typical React project

Mastering these basics helps you avoid errors later and makes the learning curve much smoother.

✅ 1. React Home: What is React?

React is an open-source JavaScript library for building user interfaces, primarily maintained by Meta (Facebook). It's based on a component-driven architecture and focuses on creating fast, interactive UIs for single-page applications.

🔹 Key Features

✅ 2. React Intro: Why Learn React?

• In-demand in frontend and full-stack roles
• Rich ecosystem of libraries (Redux, Next.js, etc.)
• Used by big players like Facebook, Netflix, Airbnb, and more
• Great for modular development

React is especially strong for SPAs (Single Page Applications), where data updates frequently.

✅ 3. React Get Started: Setting Up Your First Project

🔹 Using Create React App (CRA)

npx create-react-app my-app

cd my-app

npm start

This sets up:

• Webpack (bundler)
• Babel (compiler)
• Dev server with hot reload

🔹 Folder Structure Overview

✅ 4. React Upgrade: Keeping React Up-to-date

To upgrade:

npm install react@latest react-dom@latest

Check the official React Release Notes to see what's new.

Upgrading ensures you get performance improvements, new APIs, and security fixes.

✅ 5. React ES6: Core JavaScript Features You Must Know

React heavily relies on modern JavaScript (ES6+). Key features:

Example: Destructuring Props

function Greeting({ name }) {

  return <h1>Hello, {name}</h1>;

}

✅ 6. React Render HTML

In React, you don’t manipulate the DOM manually — instead, you write JSX, and React handles rendering efficiently.

Example:

function App() {

  return (

    <div>

      <h1>Welcome to React!</h1>

      <p>This is rendered using JSX</p>

    </div>

  );

}

React uses ReactDOM.render() to mount this component into the root DOM node.

index.js File

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

✅ 7. React JSX: Mixing JavaScript and HTML

JSX lets you write HTML-like syntax in JavaScript. It makes your UI code:

• More readable
• Declarative
• Easier to debug

Rules of JSX:

JSX Variables & Logic

const user = "Jane";

function App() {

  return <h1>Hello, {user}!</h1>;

}

🔁 Common JSX Mistakes and Fixes

🧪 Sample Mini Project: React Hello App

function App() {

  const name = "React Learner";

  const year = new Date().getFullYear();

  return (

    <div className="container">

      <h1>Welcome, {name}!</h1>

      <p>Learning React in {year}</p>

    </div>

  );

}

✅ Run this inside App.js after setting up your project with create-react-app.

📈 Recap Table: What You’ve Learned in Chapter 1