Skip to main content

Create a React Project with Vite

Let's Start​

Congratulations! In the previous docs, you learned about React and its features. Now, it's time to start coding. In this doc, you will learn how to create a new React project and display HTML code in the browser. We will use Vite to create a new React project.

info
What is Vite?​

Vite is a build tool that allows you to create a new React project with a single command. It sets up a basic project structure and configures everything you need to get started with React development, with a very fast development server.

There are a few other ways to create a React project, like using a framework such as Next.js, or bundlers like webpack or parcel. You may also see older tutorials using create-react-app, but it was sunset in early 2025 and is no longer recommended — treat it as legacy. Vite is the most popular and easiest way to create a plain React project today.

To get started with React, you'll need to have a basic understanding of JavaScript and some familiarity with HTML and CSS. You'll also need to set up a development environment on your computer, which typically involves installing Node.js (a JavaScript runtime) and a package manager like npm or yarn.

Once you have your development environment set up, you can create a new React project using a tool like Vite, which will set up a basic project structure and configure everything you need to get started.

Prerequisites​

Install Node.js if you haven't already. You can download it from the official website https://nodejs.org/en/download/prebuilt-installer. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a web browser, and we'll be needing it to run our React applications.

If you already have Node.js installed, you can check the version using node -v.

Once you install Node.js, you will also get npm installed automatically. You can check the version of npm using npm -v.

Step 1: Create Project​

Create React Project
npm create vite@latest my-project -- --template react

It will create a new folder called my-project in the current directory with a basic React project structure.

Folder structure of the project will look like this:

Folder structure
my-project
├── public
│ └── vite.svg
├── src
│ ├── assets
│ │ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
└── vite.config.js

For now, ignore all the files and folders except src/App.jsx and src/main.jsx. These are the files where we'll be writing our code.

Step 2: Navigate to Project Directory and Install Dependencies​

Navigate to the project directory and install the dependencies:

Navigate to Project Directory
cd my-project
npm install

Step 3: Start Server​

Start the development server:

Start Server
npm run dev

Now click on this link http://localhost:5173/. You would see a simple React app. You can now begin writing code in the src directory of your project.

Step 4: Edit the Project​

I am opening the project in my editor. Inside the src folder, you'll see these files:

src folder
src
├── assets
│ └── react.svg
├── App.css
├── App.jsx
├── index.css
└── main.jsx

In the src folder, there is a file called main.jsx. This is the file from where the project starts. You see by default there's a component called App, that is the root component of the app. In main.jsx, App.jsx is imported and then the app is rendered.

What is Rendering?​

You will hear the term rendering a lot in React and other frameworks. So, what does it mean?

Rendering is a generic term, and it means different things in different contexts. Even in React, and web development, it has so much meanings depending on the context. In general, rendering means showing something on the screen. For example, if you have a button, and you click on it, then it will show a popup. So, when you click on the button, the popup is rendered on the screen. Similarly, when you open a website, the website is rendered on the screen based on the HTML and CSS code. So, rendering is the process of showing something on the screen based on the code.

Rendering also means generating HTML code based on JavaScript code. In React, when you write JSX code, it gets converted to HTML code. This process is called rendering. React has a virtual DOM, and when you write JSX code, it gets converted to virtual DOM elements. Then React compares the virtual DOM with the actual DOM and updates only the changed elements. This process is called reconciliation. So, rendering is the process of converting JSX code to HTML code and updating the DOM based on the changes.

src/main.jsx​

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

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

src/App.jsx​

import logo from "./assets/react.svg";
import "./App.css";

function App() {
  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 reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now you make changes in the file src/App.jsx and save it. You'll see the changes reflected in the browser. If you are on this doc that means you do know HTML, CSS, and javascript. Now you do some changes, change the text, add more tags, and save it. You'll see the changes reflected in the browser.

How React Works​

In a typical React application, the src/main.jsx file is the entry point for the application. It is the first file that is executed when the application is loaded in the browser.

In main.jsx, the first thing that usually happens is the import of the necessary dependencies, such as createRoot from react-dom/client. These dependencies are typically installed using a package manager like npm or Yarn.

Once the dependencies are imported, main.jsx typically contains a call to createRoot() followed by root.render(). These are responsible for rendering the root React component to the DOM.

Once the root component is rendered to the DOM, React takes over and handles all updates to the UI. When the state of the application changes, React re-renders the affected components and updates the DOM accordingly, providing a fast and responsive user experience.

createRoot() and root.render()​

The createRoot() function takes the HTML element where your app will live and returns a root. The root's render() method takes the JSX you want to display, like this:

const root = createRoot(element);
root.render(jsx);

You can see this in action in the main.jsx file. The main.jsx file contains the following code:

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

createRoot() receives the HTML element with an id of root — this is the element where the React application will be rendered. Then root.render() receives the root component, <App />.

But render where?

There is an index.html file in the root directory of your React project. This is the HTML file that is served to the browser when the application is loaded.

You'll notice a single <div> in the body of this file with an id of root. This is where our React application will be rendered. index.html looks 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>

You can see the <div id="root"></div> element on line number 10. This is the element where our React application will be rendered. The <script> tag below it is what loads our src/main.jsx entry file.

Means our all the React code will be rendered inside this <div> element in the index.html file.

Let's see how it works. For example, if you write the following code in the src/App.jsx file:

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

The App component is already imported in the main.jsx file. So, you can render it in the root node:

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

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

The result is displayed in the browser's DOM:

<!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>
        <h1>Hello World</h1>
        <p>This is my first React App</p>
      </div>
    </div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

You can see the App component is rendered inside the <div id="root"></div> element, and the result is displayed in the browser.

Example - Display a Paragraph​

We already have a src/App.jsx file. This file contains the App component. The App component is the root component of the application. Let's display a paragraph in the App component.

src/App.jsx​

function App() {
  return <p>Hello</p>;
}
tip

You can modify the code in the editor and see the result in the browser.

The App component is already imported in the main.jsx file. So, you can render it in the root node:

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

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

The result is displayed in the <div id="root"> element:

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

Example - Display a Table with Two Rows having Two Columns Name and Age​

Create a variable that contains HTML code and display it in the "root" node:

src/App.jsx​

Let's modify the App component to display a table with two rows and two columns:

function App() {
  return (
    <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Rizwan</td>
        <td>26</td>
      </tr>
      <tr>
        <td>Elsa</td>
        <td>30</td>
      </tr>
    </table>
  );
}

The result is displayed in the <div id="root"> element:

<div id="root">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Rizwan</td>
      <td>26</td>
    </tr>
    <tr>
      <td>Elsa</td>
      <td>30</td>
    </tr>
  </table>
</div>

Example - Create a form with two input fields and a button and display the values in the alert box​

Let's create a form with two input fields and a button:

src/App.jsx​

function App() {
  const onSubmit = (event) => {
    alert(
      `Form submitted => Name: ${event.target.name.value}, Age: ${event.target.age.value}`,
    );
    event.preventDefault();
    console.log("Form submitted");
  };
  return (
    <form onSubmit={onSubmit}>
      <input type="text" placeholder="Name" name="name" />
      <input type="number" placeholder="Age" name="age" />
      <button type="submit">Submit</button>
    </form>
  );
}

Play with the code and see how it works.

In the coming docs, you will learn how to use the React library to build a web application.

JSX - JavaScript XML​

You will notice that React will use the extension .jsx for the files that contain JSX code. This is not a requirement, but it is a convention.

The JSX code looks like HTML code, but it is not HTML. It is a combination of HTML and JavaScript. It is used to create React elements. It is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to React.createElement() calls which return plain JavaScript objects called "React elements".

JSX produces React "elements". We will explore rendering them to the DOM in the next section.

Code​

You can get the code from here

Conclusion​

In this doc, you learned how to create a React application using Vite and how to display HTML code in the browser. You also learned about JSX and how it is used to create React elements.

Last updated on