Setting Up the Environment and Tools – Frontend

This chapter describes the development environment and tools that are needed for React so that you can start frontend development. In this chapter, we will create a simple starter React app by using the Vite frontend tooling.

In this chapter, we will cover the following topics:

• Installing Node.js
• Installing Visual Studio Code
• Creating and running a React app
• Debugging a React app

Technical requirements

The following GitHub link will be required: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter07.

Installing Node.js

Node.js is an open-source, JavaScript-based, server-side environment. It is available for multiple operating systems, such as Windows, macOS, and Linux, and is required to develop React apps.

The Node.js installation package can be found at https://nodejs.org/en/download/. Download the latest Long-Term Support (LTS) version for your operating system. In this book, we are using the Windows 10 operating system, and you can get the Node.js MSI installer for it, which makes installation really straightforward.

When you execute the installer, you will go through the installation wizard, and you can do so using the default settings:

Figure 7.1: Node.js installation

Once the installation is complete, we can check that everything proceeded correctly. Open PowerShell, or whatever terminal you are using, and type the following commands:

node --version
npm --version

These commands should show you the installed versions of Node.js and npm:

...

Installing Visual Studio Code

Visual Studio Code (VS Code) is an open-source code editor for multiple programming languages. It was developed by Microsoft. There are many different code editors available, such as Atom and Sublime, and you can use something other than VS Code if you are familiar with it.

Eclipse, which we used for backend development, is optimized for Java development. VS Code can also be used for Java and Spring Boot development, so it is possible to use only one editor for both backend and frontend development if you prefer.

VS Code is available for Windows, macOS, and Linux, and you can download it from https://code.visualstudio.com/. Installation for Windows is done with the MSI installer, and you can execute the installation with default settings.

The following screenshot shows the workbench for VS Code. On the left-hand side is the activity bar, which you can use to navigate between different views. Next to the activity bar is a sidebar...

Creating and running a React app

Now that we have Node.js and our code editor installed, we are ready to create our first React.js app. We will use the Vite frontend tool (https://vitejs.dev/) for this. There are excellent React frameworks available, like Next.js or Remix, that can be used as well, but Vite is a good option to learn React basics. Vite provides a really fast development server, and you don’t have to do any complex configuration to start coding.

In the past, Create React App (CRA) was the most popular tool for creating React projects, but its usage has decreased, and it is no longer recommended by official documentation. Vite offers many advantages over CRA (such as its faster development server).

We are using Vite version 4.3 in this book. You should verify the commands against the Vite documentation if you are using some other version. Also, check the Node.js version requirements, and upgrade your Node.js installation if your package manager...

Debugging a React app

To debug React apps, we should also install React Developer Tools, which is available for Chrome, Firefox, and Edge browsers. Chrome plugins can be installed from the Chrome Web Store (https://chrome.google.com/webstore/category/extensions), while Firefox add-ons can be installed from the Firefox add-ons site (https://addons.mozilla.org). After you have installed React Developer Tools, you should see a new Components tab in your browser’s developer tools once you navigate to your React app.

You can open the developer tools by pressing Ctrl + Shift + I (or F12) in the Chrome browser. The following screenshot shows the developer tools in the browser. The Components tab shows a visual representation of the React component tree, and you can use the search bar to find components. If you select a component in the component tree, you will see more specific information about it in the right-hand panel:

Figure 7.15: React Developer Tools

We will...

Summary

In this chapter, we installed everything that is needed to start our frontend development with React. First, we installed Node.js and the VS Code editor. Then, we used Vite to create our first React app. Finally, we ran the app, demonstrated how to modify it, and introduced debugging tools. We will continue to use Vite in the following chapters.

In the next chapter, we will familiarize ourselves with the basics of React programming.

Questions

1. What are Node.js and npm?
2. How do you install Node.js?
3. What is VS Code?
4. How do you install VS Code?
5. How do you create a React app with Vite?
6. How do you run a React app?
7. How do you make basic modifications to your app?

Further reading

Here are some useful resources that will extend the knowledge we have learned in this chapter:

• React 18 Design Patterns and Best Practices, by Carlos Santana Roldán (https://www.packtpub.com/product/react-18-design-patterns-and-best-practices-fourth-edition/9781803233109)
• JavaScript in Visual Studio Code, by Microsoft (https://code.visualstudio.com/docs/languages/javascript)
• TypeScript in Visual Studio Code, by Microsoft (https://code.visualstudio.com/docs/languages/typescript)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e