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

Contenido del Curso

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 5

Pregunte a AI

expand
ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

course content

Contenido del Curso

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

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 5
Lamentamos que algo salió mal. ¿Qué pasó?
some-alt