Chapter 6: Setting Up the Environment and Tools – Frontend

This chapter describes the development environment and tools that are needed for React and are required so that you can start frontend development. In this chapter, we will create a simple starter React app by using the create-react-app starter kit, which is developed by Facebook.

In this chapter, we will cover the following topics:

• Installing Node.js
• Installing Visual Studio Code
• Visual Studio Code extensions
• Creating and running a React.js app using create-react-app
• Modifying the React app

Technical requirements

In this book, we are using the Windows OS, but all the tools we use are available for Linux and macOS as well.

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

Installing Node.js

Node.js is an open source, JavaScript-based server-side environment. Node.js 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 6.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 -v 
npm -v

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

Installing VS Code

Visual Studio Code (VS Code) is an open source code editor for multiple programming languages. VS Code was developed by Microsoft. There are a lot of different code editors available, such as Atom and Brackets, and you can use something other than VS Code if you are familiar with it. 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 of 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 that contains different views, such as the project file explorer.

The editor takes up the rest of the workbench:

Figure 6.3 – VS Code workbench

VS Code provides an integrated terminal that you can use to create and run React apps....

Creating and running a React app

Now that we have Node.js and the code editor installed, we are ready to create our first React.js app. We are using Facebook's create-react-app (https://github.com/facebook/create-react-app) kit for this. Here are the steps you need to follow in order to make your first app:

1. Open PowerShell or a terminal that you use and type the following command:

npx create-react-app myapp

This command creates a React app named myapp. The npm package runner is npx and, when you're using it, you don't have to install the package before running it:

Figure 6.7 – create-react-app

2. Once the app has been created, move it into your app folder:

cd myapp

3. Then, we can run the app with the following command. This command runs the app in the 3000 localhost port and opens the app in a browser:

npm start

4. Now, your app is running, and you should see the following page in your browser...

Summary

In this chapter, we installed everything that is needed to embark on our frontend development with React.js. First, we installed Node.js and the VS Code editor. Then, we used the create-react-app starter kit to create our first React.js app. Finally, we ran the app and demonstrated how to modify it. This is just an overview of the app's structure and modification, and we will continue this in the following chapters.

In the next chapter, we will familiarize ourselves with the basics of React programming. In JavaScript, we will be using ES6 syntax because it provides several features that make coding cleaner.

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.js app with create-react-app?
6. How do you run a React.js app?
7. How do you make basic modifications to your app?

Further reading

Packt has other great resources available for learning about React. These are as follows:

• React 17 Design Patterns and Best Practices, Carlos Santana Roldán (https://subscription.packtpub.com/book/web_development/9781800560444)
• React Projects, Roy Derks (https://subscription.packtpub.com/book/programming/9781789954937)