What is Create React App(CRA)?

Create React App(CRA) is a boilerplate that allows us to quickly start with our React project on our local machine without getting into the nitty-gritty of manual configurations. CRA wraps together all the required dependencies like WebPack, Babel, etc, that are required by a React app so that minimal time is spent on the set-up and developers can focus on the coding part.

Pre-requisites for CRA

For using CRA, your machine must have the following installed:

• node.js version ≥ 10.16
• npm version ≥ 5.6

To verify if node.js and npm are already installed, open the terminal and type the following commands:

node -v and npm -v

If node.js and npm are installed, typing the above commands followed by pressing Enter key, will show the versions of node.js and npm respectively. If you do not see the version details, then you will need to install them. Check the below link to download and install Node.js. 'npm' is installed automatically along with node.js and no separate download and installation are required for it.

For node.js, there are 2 options available for download: LTS and Current. LTS version is preferable. LTS versions are the releases that receive Long-term Support, with a focus on stability and security. The Current version is one that is under active development and may not be stable.

Alternatively, node.js can also be installed via package managers. Check the below link for platform-specific instructions:

How to start using CRA?

Now, that you have right versions of Node.js and npm installed on your machine, you are ready to use CRA. In the terminal, type the below command followed by Enter key:

npx create-react-app <app-name>

'npx' will install and execute the create-react-app package. Make sure that your app name does not have any capital letters, else it will give an error.

This will start the setup and installation of packages for your new app and will take few minutes to complete. After successful completion,you must see the 'success' message as below:

At this point, you can type the command cd <app name>, to go to your app folder.

Next, do npm start , to start your app on the local host.

The app will start on localhost:3000 in your browser and you will see something like the below image:

Now, you are ready to start with coding. In cmd, type code to open app folder in Visual Studio Code.

Your app will start in VS Code. If you see a folder structure like below, you are ready to code your React application.

If you would like to know, how to setup a development environment without using CRA, you can check the following link: [codecademy.com/articles/react-setup-i]