A Simple Guide To Start using ReactJS

Photo by Clément H on Unsplash

React by Facebook, is one of the most powerful Javascript libraries available. With React, one can build scalable and good looking web applications. Also, mobile applications can be developed using React Native.

This guide will help in setting up the developer environment and everything you need to get started for developing React applications.

Steps involved

1. Installing Node Package Manager (NPM) using NodeJS.
2. Installing Create React App (CRA) package from the NPM registry.
3. Creating the React application.

A code editor of your choice is required. Microsoft Visual Studio Code is used in this guide. Sublime Text is also preferable. No changes or any kind of configurations have to be made in the editors.

1. Node Package Manager

Node Package Manager, commonly known as NPM, as name suggests, is a package manager for Javascript. As a developer, you will not always build everything from scratch. For anything you want to build, there is a library or packages out there which has already implemented the work. In this case, friendly Javascript developers from all around the world have submitted their work on NPM.

This is where NPM comes handy. Using one line of command, we can install any package we want to use in our projects. Installing NPM is easy. Steps to be followed are:

• Download the NodeJS installer for your OS.

There are two versions of downloads available, “LTS (Long Term Support)” which is the stable & recommended one as well. Then, there is a “Current” version, which has the latest features but is not stable. I would also recommend to proceed with the LTS version.

• Run the installer, note the path where it is being installed & follow the instructions along the setup. All other settings left at defaults will get the job done.

NodeJS Installer on Windows 10.

• NodeJS being installed, you’re ready to use NPM.

Verifying the installation

• Open the terminal or the Command Line Interface (CLI) of your choice & type the following commands, one at a time & press enter:

npm -v
node -v

• You should get the currently installed NodeJS & NPM’s version number as shown in the image below. This indicates a successful installation and that the NodeJS & NPM’s path are added to the system environment variables.

Verifying the installation of NodeJS & NPM using the Windows Powershell.

Possible errors

Error: “npm is not recognized…” or “node is not recognized…”

Cause: System variables are not updated while installing NodeJS & NPM.

Solution: Windows 10

System Variables on Windows 10.

Control Panel > System & Security > Advanced System Security >Advanced Tab > Environment Variables > Append the path noted during the setup.

Windows 7: Follow this answer from Stackoverflow.

• Here is a list of common errors you might face after installation or while using NPM.

2. Installing Create React App (CRA)

This is a very handy & powerful package to get started with React applications. Installation is pretty simple. Just run the following command in the CLI.

npm install -g create-react-app

Verifying the installation

To verify if installation is successful, on typing the following command in CLI, you should get the version number as the output.

create-react-app --version
or
create-react-app -V   # Uppercase V

Possible errors

Error: npm install permission error

Cause: NPM requires admin privilages to install packages.

Solution:

• Windows: Open the CLI with “Run as Administrator” & then run the npm install command.
• MacOS or Linux: Use sudo as prefix to the command. sudo npm install

3. Creating the React Application

With a proper code editor & the environment being correctly set, we can start creating React applications.

Navigate to your project directory, open the CLI, type the following command & press enter.

create-react-app new-app

Create React App Demo in Command Prompt, Windows 10.

As this process completes, there will be a folder created with a name you give in the command, new-app in our case. The folder contains few files.

Project folder structure.

Open the CLI in your project directory & type the following command:

npm start

Doing this, should open the React web application in your default browser which would look something like:

Default React web application.

This application is hosted on your local network which means, you can open the application on your mobile browser & watch it change in real-time as you make any changes.

React application on Android’s Chrome browser.

The environment for developing React applications is ready & you can make awesome looking web applications with the power that comes from React.

As a bonus, here are some resources from where you can learn React.

• React Tutorial.
• React JS Crash Course by Traversy Media.
• Learn React JS by FreeCodeCamp.
• Full Stack React & Firebase Tutorial by FreeCodeCamp.