No history yet

Introduction to React

What Is React?

React is a JavaScript library for building user interfaces. Created by Facebook, it simplifies the process of creating interactive, dynamic, and complex UIs for web applications. Instead of managing the entire application at once, React encourages breaking it down into smaller, manageable pieces.

Components are the fundamental building blocks of any React application.

Think of components like LEGO bricks. You can create small, self-contained bricks—like a button, a search bar, or a user profile—and then assemble them to build an entire application. Each component manages its own state and logic, making your code easier to understand, reuse, and debug.

Core Principles

React is built on a few key ideas that make it powerful. The first is its component architecture, which we just discussed. The other two are JSX and the Virtual DOM.

JSX (JavaScript XML) is a syntax extension for JavaScript. It lets you write HTML-like code directly inside your JavaScript files. This makes it intuitive to describe what your UI should look like.

While it may look like HTML, your browser doesn't understand JSX. Before your code runs, a tool called a transpiler (like Babel) converts your JSX into regular JavaScript that browsers can execute. Here's what JSX looks like:

const element = <h1>Hello, world!</h1>;

The final core principle is the Virtual DOM. Manipulating the actual Document Object Model (DOM) of a webpage can be slow, especially for applications with many updates. React solves this with a clever optimization.

React keeps a lightweight copy of the real DOM in memory—the Virtual DOM. When a component's state changes, React first updates this virtual copy. Then, it compares the updated Virtual DOM with a snapshot taken before the update, figures out the exact changes, and updates only those specific parts of the real DOM. This process, called reconciliation, makes React applications feel fast and responsive.

Your First React App

Let's get your hands dirty by creating a simple React application. The recommended way to start a new project is by using a tool called Create React App. It sets up your development environment so you can use the latest JavaScript features, providing a nice developer experience and optimizing your app for production.

First, make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download them from the official Node.js website. Once that's ready, open your terminal and run the following command:

npx create-react-app my-first-app

This command creates a new directory called my-first-app with all the necessary files and configurations. Once it's finished, navigate into the new directory and start the development server:

cd my-first-app
npm start

Your browser should automatically open to http://localhost:3000, showing the default React starter page. Now, let's change it to a classic 'Hello, World!' message.

Open the src/App.js file in your code editor. It will contain some boilerplate code. Replace all of it with the following:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is my first React application.</p>
    </div>
  );
}

export default App;

Save the file. The browser page will automatically update to show your new heading and paragraph. You've just created your first React component!

Ready to check your understanding?

Quiz Questions 1/6

What is the primary purpose of the React library?

Quiz Questions 2/6

What is JSX?

Congratulations on building your first React app. You now understand the core principles that make React a powerful tool for building modern user interfaces.