Introduction to React

React is one of the most popular JavaScript libraries for building user interfaces, especially single-page applications (SPAs) where you need fast updates and dynamic interactions. Originally developed by Facebook, React is now maintained by Meta and a large open-source community.

If you're aiming to create modern, responsive, and interactive web apps, understanding React is almost essential. Let’s explore why.

What is React and why use it?

What is React?

React is a JavaScript library for building component-based user interfaces. It focuses on the view layer of an application, meaning it handles how your app looks and how it updates based on user interactions or data changes.

Why use React?

• Reusable components: You can build small, self-contained components and combine them to create complex UIs. This promotes clean, modular code that’s easier to maintain and scale.
• Efficient rendering: Thanks to its virtual DOM, React minimizes the number of updates needed to the real browser DOM, making apps faster.
• Strong ecosystem: With a huge community, extensive documentation, and supporting tools like React Router, Redux, and Next.js, React has everything you need to build robust applications.
• Declarative syntax: You describe what your UI should look like rather than how to update it. This makes your code easier to understand and debug.

React's popularity among large companies (e.g., Meta, Netflix, Airbnb) and startups alike demonstrates its reliability and flexibility.

Virtual DOM and component-based architecture

Virtual DOM

In a typical web app, updating the DOM (Document Object Model) can be slow and costly because the browser has to recalculate styles, re-render elements, and potentially reflow the entire page.

React introduces a virtual DOM, which is an in-memory representation of the real DOM. When a component’s state or props change, React updates the virtual DOM first. Then, it compares (a process called "diffing") the virtual DOM to the real DOM and updates only what has actually changed. This approach greatly improves performance and creates smoother user experiences.

Component-based architecture

A component is a reusable, independent piece of UI — for example, a button, a navigation bar, or a form input. You can think of components as Lego bricks that you can combine and reuse to build your application.

Components can be nested inside other components to create complex UIs. Each component manages its own state and handles its own rendering logic, making your app easier to reason about and maintain.

Creating your first React app using Create React App

To help you get started without worrying about build configurations, Facebook created Create React App (CRA). This tool sets up everything you need to start coding a React application quickly.

Steps to create your first React app

• Install Node.js and npm Make sure Node.js and npm are installed on your machine. You can verify by running:

1
2
node -v
npm -v

• Create a new React app
  • Open your terminal and run:

1
npx create-react-app my-first-app

• This command uses npx (a package runner that comes with npm) to execute create-react-app and generate a new project folder named my-first-app.
• Navigate to your project folder

1
cd my-first-app

• Start the development server

1
npm start

• Your app will automatically open in your browser at http://localhost:3000, and any changes you make will refresh in real-time.

What you get by default

When you open the project in VS Code or another editor, you’ll see a structure like this:

1
2
3
4
5
6
7
8
9
10
11
my-first-app/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── package.json
└── ...

The src folder is where you'll write your React components. The public/index.html file is a single HTML file where React injects your app.

JSX syntax overview

React uses JSX (JavaScript XML), a syntax extension that allows you to write HTML-like code inside JavaScript. JSX makes your components more readable and easier to understand because it closely resembles the UI structure you’re creating.

Basic example

1
2
3
4
5
6
7
8
9
10
function App() {
  return (
    <div>
      <h1>Welcome to my first React app!</h1>
      <p>This is a paragraph written using JSX.</p>
    </div>
  );
}

export default App;

Key points about JSX:

• Looks like HTML but is JavaScript: Under the hood, JSX is compiled to React.createElement() calls.
• Must return a single parent element: Wrap sibling elements in a parent element like a <div> or use a React fragment (<>...</>).
• Expressions inside {}: You can embed JavaScript expressions (variables, function calls, etc.) inside curly braces.

Example of using a variable inside JSX:

1
2
3
4
5
const name = "Alex";

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

Attributes in JSX

• In JSX, class becomes className.
• for becomes htmlFor in labels.

Example:

1
<button className="primary-button">Click Me</button>

Prompts to practice with Copilot

Prompt 1:

1
// Create a simple React component that displays your favorite hobby and a list of reasons you enjoy it

Prompt 2:

1
// Write a React component that takes a name prop and displays a greeting

Prompt 3:

1
// Create a React component with JSX that includes a header, paragraph, and an image

Final thoughts

React simplifies creating dynamic, reusable, and scalable user interfaces. By understanding the basics — what React is, the role of the virtual DOM, component-based structure, and JSX — you’re laying a strong foundation for everything that follows.

In the next lessons, we’ll start building and breaking down actual components, learn about props and state, and explore advanced patterns that power modern web apps.