Create a new React app using Vite

When I need to create a React app without the need for a backend or multiple pages, my preferred tool is Next.js. However, for smaller projects or experiments, I find Vite to be a great alternative. Vite is a modern tool that provides a fast development server and is not limited to just React. It can be used with other frameworks like Svelte and Vue as well.

To create a project using Vite, follow these steps:

1. Navigate to the folder where you store your projects (e.g., a ‘dev’ folder in your user’s home directory).
2. Run npm create @vitejs/app command.

3. Choose a name for your project. This will also be the name of the project’s folder.
4. Select the framework you want to use. In this case, choose “React”.

5. Select whether you want to use JavaScript or TypeScript for your project. You can also optionally use SWC.

6. The project is now created.

7. Navigate into the newly created project folder by running cd your-project-name.
8. Install the project dependencies by running npm install.
9. Start the application with npm run dev.

10. The application should now be running at http://localhost:5173 (the port may vary if it’s already in use).

You are now ready to start working on your Vite-powered React application! You can open the project folder in your preferred code editor, like VS Code, and start editing the src/App.jsx file to make changes to your application.

One of the advantages of using Vite is that it automatically recognizes and updates the files you add or modify. You don’t need to restart the development server, making the development process fast and enjoyable.

Tags: Vite, React, JavaScript, TypeScript, SWC