Installing ReactJS and creating your first application

create-react-app’s hello world

The other day I already talked about what was React, now, we are going to install it in a few steps.

To install and use ReactJS, we need two things: Node.js and NPM. I like when the people know what they are doing and why, so let’s talk about a little about these two. Node.js is a Javascript run-time environment that allow us to execute Javascript code like if we were working on a server. Remember that every web application is meant to be executed in a server (or a local server, if we’re running it in our computers). In the other hand NPM is a package manager for Javascript, that is, NPM allows us to install Javascript libraries to make our experience even more richer by expanding the basic functionalities. Now, let’s continue.

These instructions are meant for Linux systems. First, we need a tool called curl, if you don’t have it, you can install it typing the following command in a terminal:

sudo apt-get install curl

You are going to be prompt to enter your user password to grant sudo access. After the installation is finished, now let’s install Node by typing the following command:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

I’m going to install Node.js v6 LTS Version. If you want, you can install the newest version (v8) by replacing setup_6.x for setup_8.x. Either version will work fine.

The command you just type added the Node.js to your repository list, now, let’s install Node.js by typing:

sudo apt-get install -y nodejs

If everything is alright, you can check that Node.js and NPM are installed (NPM is included with Node.js) by typing node -v and npm -v, and you should see something like this:

julio@debian:~$ node -v
v6.11.1
julio@debian:~$ npm -v
3.10.10

Also, let’s install build-essential package, which is needed for Node to work properly:

sudo apt-get install -y build-essential

Now, let’s install React by typing:

sudo npm install -g create-react-app

create-react-app is a package that we can find in NPM and that will make our life easier. It takes care of every configuration. We only need to use it. Now that we have create-react-app installed, let’s create our first app by typing:

create-react-app hello-world
cd /hello-world

After it finishes creating and setting up the application, we move into the directory that was just created and that is named like our application by typing cd /hello-world. Mine is called hello-world, yours can be anything you want. After a few seconds, a message will appear saying that our application was created successfully, and gives us a few instructions. Later we’ll cover what mean every one of them. By now, we only need to move into our application directory, and type:

npm start

This command will start a local server and will open our application in the browser, just like this:

This is an example application that is included with create-react-app package. If you want to close the local server, just press Crtl+C. A nice feature is that every change that you make to your application while the local server is running will be shown immediately in the browser without the need of refreshing the page. Let’s modify it a bit. I’m going to open the hello-world folder with a code editor, Visual Studio Code, you can use your favorite (Sublime, Eclipse, Atom, etc…)

In the left side of the screen you can see the folder structure of our application.

• node_modules: contains every Javascript library and configurations.
• public: here are the files that are going to be public to the server and the people. Like the index.html and the favicon. We’ll talk more about this later.
• src: here are all of our React Components.

Later, we’ll cover a bit more in detail what’s inside these folders. Now, if we go to the file called App.js we delete the selected portion of code and we are going to change it. Keep in mind that everything you want to be shown in the web site must be wrapped inside one big div.

And that’s it. You’ve just created your first React application.