Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Starting and Running a React Project with Vite | Structuring Real-World React Projects
React Mastery
course content

Course Content

React Mastery

React Mastery

2. Styling Techniques in React Applications
4. Structuring Real-World React Projects

book
Starting and Running a React Project with Vite

Step 6: Initialize the Project

To set up the project, use the terminal. Open the terminal in your code editor (if it's not already open), run the following command, and press Enter:

python

When prompted, select React as the framework using the arrow keys:

Then, choose either JavaScript or TypeScript, depending on your preference:

After the setup is complete, Vite will prompt you to install dependencies. Run the following command:

python

Once the installation is done, start the development server by running:

python

After running these commands, you'll see a local development URL β€” typically: http://localhost:5173/. You can open this link in your browser to view the app live.

Step 7: Begin Customizing

The project is set up, you can begin customizing it:

  • Your main work will happen inside the src folder;
  • You'll find default files like App.jsx and main.jsx, which you can modify or replace based on your project's needs;
  • If you worked previously in CodeSandbox, recreate your familiar structure: ensure you have a main.jsx (the Vite equivalent of index.js) as the entry point and build your main application in App.jsx;
  • Create additional folders as needed to organize your components, styles, and assets.
question mark

What command is used to start a new React project with Vite?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 5
We're sorry to hear that something went wrong. What happened?
some-alt