Creating Your First React App

A React app is a web application whose user interface is built using React components.

React App
   ↓
Components
   ↓
User Interface
   ↓
Web Browser

Before creating a React project, you should have a suitable development environment.

• Node.js
• npm
• VS Code or another code editor
• A modern web browser
• Basic JavaScript knowledge

Open your terminal and check whether Node.js is installed.

node --version

The terminal should display the installed Node.js version.

Check whether npm is available on your system.

npm --version

If npm is installed correctly, its version number will be displayed.

Open a terminal and move to the location where you want to create your React project.

cd Desktop

You can choose another folder according to your requirements.

A common modern approach is to create a React project using a development tool such as Vite.

npm create vite@latest my-react-app

This command starts the project creation process.

During project creation, the tool asks you to choose a framework or library.

Select a framework:
> React
  Vue
  Svelte
  Others

Select React for this tutorial.

After selecting React, the setup tool asks you to choose a variant. For a beginner React project, you can choose a JavaScript-based option.

React
  ↓
JavaScript
  ↓
Project Created

A TypeScript option can also be selected when you specifically want to use TypeScript.

After the project has been created, move into its directory.

cd my-react-app

Your terminal is now working inside the React project.

Install the packages required by the project.

npm install

npm reads the project's package configuration and installs the required dependencies.

After installing dependencies, start the development server.

npm run dev

The development tool will display a local address where you can open the application in your browser.

The development server normally provides a local URL. The exact port can vary depending on the development tool and whether the default port is available.

http://localhost:5173/

Open the displayed address in your browser.

You can open the project folder in VS Code.

cd my-react-app
code .

The code . command works when the VS Code command-line launcher is configured on your system.

A newly created project contains several files and directories.

my-react-app/
│
├── public/
├── src/
├── package.json
├── package-lock.json
└── node_modules/

The exact files can vary depending on the project setup and tool version.

The src folder generally contains the application's source code.

src/
 |
 +-- App.jsx
 +-- main.jsx
 +-- assets/

This is where you will spend much of your time while developing the React application.

The App component commonly represents the main component of a simple React application.

function App() {

    return (
        <h1>Hello React</h1>
    );

}

export default App;

The application's entry file typically connects the React component tree to an HTML element in the page.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

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

The exact generated code can vary with the project setup.

React needs a DOM element where the React application can be rendered.

<div id="root"></div>

The React entry file selects this element and renders the component tree into it.

Open App.jsx and replace the existing component content with a simple example.

function App() {

    return (
        <div>
            <h1>My First React App</h1>
            <p>Welcome to React!</p>
        </div>
    );

}

export default App;

After changing the component, save the file.

App.jsx
   ↓
Save
   ↓
Development Server
   ↓
Browser Update

Modern development servers can update the browser automatically when source files change.

Modern development tools can update parts of the application while you are developing it. This is commonly called Hot Module Replacement (HMR).

Change Code
    ↓
Save File
    ↓
Development Tool
    ↓
Browser Updates

React components can use normal JavaScript variables.

function App() {

    const name = "Soopro Pathshala";

    return (
        <h1>Welcome to {name}</h1>
    );

}

export default App;

The value of name is displayed using JSX expression syntax.

You can add HTML-like elements using JSX.

function App() {

    return (
        <div>

            <h1>My React App</h1>

            <button>
                Click Me
            </button>

        </div>
    );

}

React can respond to user actions using event handlers.

function App() {

    function handleClick() {
        alert("Hello React!");
    }

    return (
        <button onClick={handleClick}>
            Click Me
        </button>
    );

}

function App() {

    const course = "React";

    function handleClick() {
        alert("Welcome to " + course);
    }

    return (
        <div>

            <h1>My First React App</h1>

            <p>
                I am learning {course}.
            </p>

            <button onClick={handleClick}>
                Click Me
            </button>

        </div>
    );

}

export default App;

If the development server is not already running, execute:

npm run dev

Then open the local URL shown in the terminal.

Terminal
   ↓
npm run dev
   ↓
Local URL
   ↓
Browser
   ↓
React App

When you want to stop a development server running in a terminal, the standard interrupt command for the terminal can be used.

Ctrl + C

This stops the current development process in that terminal.

Beginners may encounter common problems while creating a React application.

• Node.js is not installed.
• npm is not available in the terminal.
• The wrong project directory is open.
• Dependencies have not been installed.
• A source file contains a syntax error.
• The development server is not running.
• The browser is using an old page state.

Install Node.js
      ↓
Check Node.js
      ↓
Check npm
      ↓
Create React Project
      ↓
Choose React
      ↓
Choose JavaScript
      ↓
cd my-react-app
      ↓
npm install
      ↓
npm run dev
      ↓
Open Browser
      ↓
Edit App.jsx
      ↓
Build Your UI

Creating a React application involves setting up Node.js and npm, creating a project, installing its dependencies, starting the development server, and editing React components.

Node.js
   ↓
npm
   ↓
React Project
   ↓
Components
   ↓
Development Server
   ↓
Browser
   ↓
React Application

You have now created the basic structure of a React application. In the next lessons, you will learn how the files and folders inside a React project work together.