Chapter 5. Setting Up the Environment and Tools – Frontend

This chapter describes the development environment and tools that are needed with React. This chapter is needed to be able to start frontend development. We will create a simple starter React app by using the Create React App starter kit made by Facebook.

In this chapter, we will look into the following:

• Installing Node.js and VS Code
• Creating a React.js app using create-react-app
• Running a React.js app
• Installing React Developer Tools

Technical requirements

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

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. Node.js is needed 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:

After the installation has been completed, we can check that everything went correctly. Open PowerShell, or whatever Terminal you are using, and type the following commands:

node -v

npm -v

The commands should show you the installed versions, Node.js and npm:

npm comes with the Node.js installation and is a package manager for JavaScript. We will use...

Installing VS Code

Visual Studio Code (VS Code) is an open source code editor for multiple programming languages. VS Code is developed by Microsoft. There are a lot of different code editors available, such as Atom, Brackets, and others, 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 do the installation with default settings. The following screenshot shows the workbench of VS Code. On the left side is the activity bar, which you can use to navigate between different views. Next to the activity bar is a side bar, which contains different views, such as project file explorer.

The editor takes up the rest of the workbench:

VS Code also has an integrated terminal that you can use to create and run React apps. The terminal can be found in the View|Integrated Terminal menu. You can also use this...

Creating and running a React app

When 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) for that. Here are the steps to make your first app:

1. Open PowerShell or the command-line tool and type the following command. The command installs the create-react-app starter, which we will use to develop React apps. Parameter -g in the command means that installation is done globally.

If you are using npm version 5.2 or higher, you can also use npx instead of npm:

npm install -g create-react-app

2. After the installation is complete, we create our first app by typing the following command:

create-react-app myapp

3. After the app has been created, move it into your app folder:

cd myapp

4. Then we can run the app with the following command. The command runs the app in port 3000 and opens the app in a browser:

npm start

5. Now your app is running and you should see the following page in a browser...

Summary

In this chapter, we installed everything that is needed to start our frontend development with React.js. First, we installed the Node.js and 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 structure and modification, and we will continue this in the following chapters.

Questions

1. What is 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 for learning about React:

• https://www.packtpub.com/web-development/getting-started-react
• https://www.packtpub.com/web-development/react-16-tooling