First React App

Table of Contents +

In this article, we will create our first React application from scratch.

Create a New React Project

To create a new React project, we will use vite that we have installed in the previous setup guide.

  1. Open Terminal

    Open any terminal or command prompt on your computer. Navigate to the folder where you want to create your React project.

    Terminal window
    cd path/to/your/folder

  2. Create React Project Command

    Run following command to create a new React project with Vite:

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

    You will see output like this:

     Scaffolding project in my-react-app...
     Done. Now run:
    

        cd my-react-app
        npm install
        npm run dev

    It says that it has created a new folder called my-react-app with the basic structure of a React application using Vite as the build tool. Also it has has given you the next commands to run in order to start the development server which will run your React app.

    So lets follow the next steps to run your React app.

  3. First command is to go to the project folder:

    Terminal window
    cd my-react-app

  4. Install Dependencies

    Then next command is to install the dependencies:

    Terminal window
    npm install

    This will install all the necessary libraries and dependencies required for your React application to run. And it will create a node_modules folder in your project folder which contains all the installed packages.

  5. Start Development Server

    Start the development server using below command:

    Terminal window
    npm run dev

    It will start the Vite development server, and you should see output like this:

    ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help

  6. Open in Browser

    Vite will display a local URL (usually http://localhost:5173). Open this URL in your browser to see your React app running.

Congratulations! You have successfully created and launched your first React application. You should see a default Vite + React welcome page with a counter button and the React logo.

Now that you have your first React app up and running, we will open the project in vscode and explore the project structure, files, and details about files and folders.

React Project Structure

To open your React project in Visual Studio Code, we have to follow below steps:

  1. Open VSCode

    Open Visual Studio Code on your computer.

  2. Open Folder

    Click on “File” in the top menu, then select “Open Folder…”.

  3. Select Project Folder

    Navigate to the folder where you created your React project (e.g., my-react-app) and select it.

  4. Open React Project

    Click “Open” to load the project in VSCode.

  5. React Project Structure

    You will see the project structure in the Explorer panel on the left side. The main files and folders you will work with are:

    • src/: This folder contains the source code of your React application.
      • App.jsx: The main component of your React app.
      • main.jsx: The entry point of your React application.
      • index.css: The main CSS file for styling your app.
    • public/: This folder contains static assets that will be served directly.
      • favicon.ico: The favicon for your app.
    • index.html: The main HTML file that is sent to the browser. It includes the root element where your React app will be rendered.
    • vite.config.js: The configuration file for Vite, which is used to build and serve your React app. We will discuss this file in detail later.
    • node_modules/: This folder contains all the installed dependencies for your project.
    • package.json: Lists your project’s dependencies and scripts.

    Also this is the folder we will be working with in the upcoming lessons to build our React application.

Let’s now see the files in the project and understand their purpose.

Understanding the Files in React Project

/index.html

This is the main HTML file that serves as the entry point for your React application. You will see the code like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Few important points to note:

Root Element

You can see that it has a <div> with an id of root. This is where your React application will be loaded.

React Components Entry Point

The <script> tag at the end loads the main.jsx file, which is the entry point of your React application.

/src/main.jsx

This file is the entry point for your React application. It is responsible for rendering the root component of your app into the DOM. You will see code like this:

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


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

What this code does:

  • It imports createRoot from react-dom/client and we find the root element in the HTML file using document.getElementById('root') that is already defined in the index.html file as <div id="root"></div>.
  • It then uses createRoot to create a root for the React application and calls the render method to render the App component into that root.
  • It wraps the App component in StrictMode, StrictMode is a feature for highlighting potential problems in an application. We will discuss it in detail later.
  • It also imports the index.css file for styling which is the main CSS file for your app.

/src/App.jsx

This file contains the main component of your React application. It is where you will define the structure and behavior of your app. You will see code like this:

import { useState } from 'react'
import logo from './logo.svg'
import './App.css'
function App() {
  const [count, setCount] = useState(0)


  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR updates.
        </p>
        <p>
          <button onClick={() => setCount((count) => count + 1)}>
            count is: {count}
          </button>
        </p>
      </header>
    </div>
  )
}
export default App

This is how a basic React component looks like. We are going to discuss the details of this file in the upcoming lessons.

Note about JSX Extension

You might notice that the React component files have a .jsx extension instead of .js. JSX stands for JavaScript XML, and it’s a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. While you can use .js files for React components, using .jsx makes it clear that the file contains JSX syntax. In the next lesson, we’ll dive deep into JSX and learn how it works.

Previous React Setup Guide Next JSX in React

Share & Connect

Share on LinkedIn