Chapter 1 - A new React Project

Become familiar with NPM

Before we can start programming we need to introduce a tool called NPM, which is the abbreviation for Node Package Manager. NPM is the official package manager for Node.JS, like pip is it for Python. You can install libraries from the NPM registry, which is a collection of packages and libraries programmed and published by other people. With NPM we can create new JavaScript projects and install libraries inside these projects.

Setup Project

Now let's create our first JavaScript project. You need to create a new directory and open a terminal inside it. Type the following command into the console and execute it:

npm init

Now you asked some questions about the project you want to create, like the project's name, the author's name and so on. You can answer these questions, but you can also skip them by pressing enter. After the questions have been answered a new file will be created: package.json. This is where your project information lives in. It contains all the information about your project like the name of the project and the installed libraries.

After we have created a new JavaScript we can install a library that is needed for creating a new React app: create-react-app. Type the following command into the terminal:

$ npm instal -D create-react-app

After this command has finished have a look into your package.json file. You will see that the name create-react-app will have a new entry under the key DevDependencies. DevDependencies are libraries that are only needed during development, but not after the project has been built and compiled. But more on this later. Lets continue by creating our first React app.

Create a new React Project

We can create a new React project by executing the following command in a terminal:

$ npx create-react-app my-app

This command will create the neccessary folder structure and files that we need for developing React applications. Your project should have the following driectory structure after the execution of te command has finished:

- node_modules
- public
- src

You can find the ocumentation of the create-react-app library here: https://reactjs.org/docs/create-a-new-react-app.html

The directory node_modules is where our installed libraries are stored. This directory should not be modified by you. The node package manager is responsible for managing the contents of this directory. Next there is a directory called public. This is the folder where our compiled app will be storen in. Before we can use a React application in a production environment we first have to build it, which means all the code you have written is packed into a single JavaScript file. This is done by the create-react-app automatically for you, we will show you how you can build your React application for production later. Last there is the directory called src. This is the directory we will work with, because it contains the source code of our project. All teh code we will write in this project will be stored in this directory.

Run the React application

Now that we have created a new React application lets explore how we can run it. We assume that you already have opened a terminal inside your React project and are ready to type the following command:

npm start

This will start the React app and open it automatically in your browser. If the browser doesn't open automatically you can access the React app by typing the following URL in your browser: http://localhost:3000.

Great, we have created our first React app.

Inspect Project

The most important file for our React project is the file ./src/App.js where the HTML-Code for teh layout and the JavaScript code for the logic of our app is stored.

src/App.js

This is the entrypoint of our project. The HTML-code of the app lives here (at least until we split it up into multiple files and components).

Run the application

Open a terminal and execute the following command

$ npm start

This will open a new tab in your browser. Alternatively you can enter the following URL in your Browser: http://localhost:3000. Now in your IDE go to the file ./App.js. There is some HTML code:

<p>
  Edit <code>src/App.js</code> and save to reload.
</p>

Add a new paragraph under the existing one. Do not quit the project in the command line. Just save the updated App.js file and have a look what happens in the browser.

<p>Hello, World!</p>