React video tutorials

Video Tutorial: Building a React App - pt2: Installation

In the first post of this video tutorial series, the basics of React.js were covered. Now it’s time to move a bit forward: we will install React.js and configure it.

The Installation Process

The very first step of our journey is to create a folder in which the React.js app will be installed; it will be our project folder so everything will live inside it. Leave it alone for now and let’s go to the official installation page, click on the “Create new app” tab and it will show the installation instructions. The installation process requires the terminal, but don’t be scared since it’s just a matter of copying a couple of lines. With the first command, npm install -g create-react-app, you install the install helper program. Then switch to your folder so the helper program knows where to install React: cd name-of-your-folder. If you are unsure of the path, the easiest way is to type the cd command and drag the folder onto your terminal window. Once you are in your folder, run create-react-app name-of-my-app (everything will do but the simpler, the better) and let the terminal work for you. Once the installation is complete, it’s time to start the server; move to our newly created application folder with cd name-of-your-folder/name-of-my-app and then type npm start. The last command starts the local server and opens a browser window with our newly created React app.

So, here we are; we have a working React app and with not so much effort, right? The fun, of course, is yet to come but there is time for that, since in the next tutorial we will start to put our existing HTML code into our React app. So stay tuned for more Scrivito tutorials on how to become familiar with React.js and to actually use it.