Using web bundlers

Using a web bundler is an efficient way to create React projects, especially if you are building a single-page application (SPA). For all of the examples in this book, we will use Vite as our web bundler. Vite is known for its remarkable speed and ease of setup and use.

To set up your project using Vite, you will need to take the following steps:

1. Ensure that you have Node.js installed on your computer by visiting the official Node.js website (https://nodejs.org/) and downloading the appropriate version for your operating system.
2. Open your terminal or command prompt and navigate to the directory where you want to create your project:

   mkdir react-projects
   cd react-projects
   

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

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

   This command creates a new directory called my-react-app and sets up a React project using the Vite template.

4. Once the project is created, your terminal should look like this:

   Scaffolding project in react-projects/my-react-app...
   Done. Now run:
     cd my-react-app
     npm install
        npm run dev
   

5. Navigate into the project directory and install dependencies. The result in the terminal should look like:

   added 279 packages, and audited 280 packages in 21s
   103 packages are looking for funding
     run 'npm fund' for details
   found 0 vulnerabilities
   

Finally, start the development server by running the following command: npm run dev

This command launches the development server, and you can view your React application by opening your browser and visiting http://localhost:3000.

By now, you will have successfully set up your React project using Vite as the web bundler. For more information about Vite and its possible configurations, visit the official website at https://vitejs.dev/.

Using frameworks

For real-world and commercial projects, it is recommended to use frameworks built on top of React. These frameworks provide additional features out of the box, such as routing and asset management (images, SVG files, fonts, etc.). They also guide you in organizing your project structure effectively, as frameworks often enforce specific file organization rules. Some popular React frameworks include Next.js, Gatsby, and Remix.

In Chapter 13, Server-Side Rendering, we will explore setting up Next.js and some differences between that and using a plain web bundler.

Online code editors

Online code editors combine the advantages of web bundlers and frameworks but allow you to set up your React development environment in the cloud or right inside of the browser. This eliminates the need to install anything on your machine and lets you write and explore React code directly in your browser.

While there are various online code editors available, some of the most popular options include CodeSandbox, StackBlitz, and Replit. These platforms provide a user-friendly interface and allow you to create, share, and collaborate on React projects without any local setup.

To get started with an online code editor, you don’t even need an account. Simply follow this link on your browser: https://react.new. In a few seconds, you will see that CodeSandbox is ready to work with a template project, and a live preview of the editor is available directly in the browser tab. If you want to save your changes, then you need to create an account.

Using online code editors is a convenient way to learn and experiment with React, especially if you prefer a browser-based development environment.

In this section, we explored different methods to set up your React project. Whether you choose web bundlers, frameworks, or online code editors, each approach offers its unique advantages. Select the method that you prefer and suits your project requirements. Now, we are ready to dive into the world of React development!