3 easy steps to create React application

React is a JavaScript library for building front-end applications and user interfaces. To generate a boilerplate version of a React application, Facebook has created a node module called create-react-app. By following this three easy steps you will be able to create you first React application.

Related Articles:

This article will cover:

Setup command line application
Install and setup node
Setup the create-react-app boilerplate application
Conclusion

Setup command line application

The command line allows a user to navigate the filesystem and run built-in programs and scripts. Bash is the most used command line interface and it is the default shell for Linux and Mac.

Setup Command Line on mac OS

For OS X users, the application used called Terminal. To access the terminal, go to Applications , open the Utilities folder, open Terminal .

Applications --> Utilities --> Terminal .

Setup Command Line on Windows

To use Bash on a Windows computer, we need first to download and install Git Bash here. Run the downloaded file and allow the application to make changes to your PC. Keep the default settings for this installation, and click Next until the final Finish.

Now open the Start menu and type “Git Bash” into the search bar then click on the icon “Git Bash Desktop App” to open Git Bash.

Start --> Git Bash --> Git Bash Desktop App

Install and setup node

node.js is a JavaScript runtime environment which runs JavaScript code outside of the browser. It was created with the goal of building web servers and web applications in JavaScript. When Node is installed the npm (node-package-manage) command-line tool is downloaded as well. This command-line tool enables us to install modules and get third-party libraries via our terminal. To install node, follow this steps:

1. First, make sure that your command line is setup

2. then, navigate to the main page of Node website and click on DOWNLOADS or click here https://nodejs.org/en/download/ , make sure to download the version of Node labeled “LTS” because this version is more stable than the current version.

3. After your download is complete, open the downloaded installation package and follow the installation instructions, Keep the all the default settings and click Next.

4. To confirm that node was downloaded and installed correctly and print the filepath to Node , open a new terminal window and run the terminal command which node . You can also check which version of Node you downloaded with the node -v terminal command.

 which node

 node -v

Setup the create-react-app boilerplate application

Now that we have node installed and our command line interface (CLI) available we can install create-react-app which is a node module created by facebook to generate React boilerplate applications. To install this module globally, we will use npm (node-package-manage) command.

First open your terminal and run the command:

npm install -g create-react-app

sudo npm install -g create-react-app

When this is done, in your terminal, navigate to the directory or folder where you would like to place your React application within. Then, run the following command, this may take some time:

create-react-app   <name-of-your-project-without-capital-letters>

After that navigate to your project directory using the command:

cd   <name-of-your-project>

Then run:

npm start

Conclusion

Create-React-App is a comfortable environment for an easy way to start learning React and building applications in React. It doesn’t handle any backend logic or databases, it just creates a frontend build pipeline, so you can use it with any backend you want.