How to create-react-app and installing Node.js with NPM

Introduction to React: React is a JavaScript library created by Facebook for building user interfaces. React is used to build single page applications. React allows us to create reusable UI(user interface) components.

How does React work?

React creates a VIRTUAL DOM in memory. Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React finds out what changes have been made, and changes only what needs to be changed.

React Getting Started

To use React in production, you need NPM and Node.js

What is Node.js?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the v8 engine and executes JavaScript code outside a web browser.

What is NPM?

NPM stands for Node Package Manager. It’s a package manager for the JavaScript programming language.

Why do i need Node.js and NPM?

Both Node.js and React are JavaScript languages that can be executed both client and server-side. You need NPM for two main reasons: 1. Using an NPM, Node works alongside the NPM registry to easily install any package through the NPM CLI. 2. Node bundles a react application into a single file for easy compilation using webpack and several other Node modules.

How to install Node.js and NPM?

To create react app, you have to first install Node.js on your system. Follow the steps below:

Step 1: Download Node.js installer. In a web browser, navigate to https://nodejs.org/en/download/. Click either the Windows installer button or other installers button depending on your operating system to download the latest default version. At the time this article was written, version 16.0.0 was the latest version. The Node.js installer includes the NPM package manager.

Step 2: Install Node.js and NPM from browser.

1. Once the installer finished downloading, launch it. Open the downloads link in your browser and click the file or browse to the location where you have saved the file on your system and double-click to launch.
2. The system will ask you if you want to run the software, click run.
3. You will be welcomed to the Node.js Setup wizard, click next.
4. On the next screen, review the license agreement. Click next if you agree to the terms and install the software.
5. The installer will prompt you for the installation location. Leave the default location, unless you have a specific need to install it somewhere else, click next.
6. The wizard will let you select components to include or remove from the installation. Again, unless you have a specific need, accept the default by clicking next.
7. Finally, click the install button to run the installer. When it finishes, click finish.

Step 3: Verify installation

Open a command prompt or your preferred IDE and enter the following:

The system should display the Node.js version installed on your system.

Do the same for NPM by typing npm -v on your command prompt or your preferred editor(Vscode etc.)

How to create-react-app

There are two ways to install ReactJs:

1. Using webpack and babel.

2. Using the create-react-app command

In this article, i will walk you through by using create react app. Create React App is much easier which does all the configuration and necessary package installations for us automatically and starts a new React app locally for development. Another advantage of using create react app is that, you don’t have to deal with Babel and Webpack configurations. All of the necessary configurations will be made available by create react app for you.

To create react app, follow the steps below:

Step 1: Create a new folder in your Local Disk (C:) or go-to your preferred editor and run the following command: C:\>mkdir folder-name

Step 2: Cd into the new folder you just created and run the following command:

The installation process may take a few minutes. After the installation, you should see a folder that appears in your workspace with the name you gave to your app.

Note: my-app is the name i chose for my folder. Name your folder whatever you like.

Step 3: After the installation is completed, change to the directory where your app was installed e.g cd my-app and finally run npm start to see your app live on localhost:

Thank you patiently for your time to read this article. Give a clap after reading this article.