Setting up the React environment with the super tool creat-react-app!

Setting Up the Tools

If you have nodejs and yarn installed you can click here to go to the next section to install the library.

Installing nodejs

First of all, you need to have installed nodejs, you can download the latest version from this website (in the time that I was writing this post it was v14.7.0:

nodejs website

Once you installed the nodejs open the terminal on MAC or the command prompt on Windows and type the following command to see if it was installed successfully:

node -v

If it shows you the version of nodejs, it means was successfully installed.

Installing yarn Globally

Once you have installed node, you need to install yarn globally to be able to use yarn in your project. You can install it with the following command:

npm install -g yarn

the -g flag means it will be installed globally.

You can test if yarn was successfully installed by typing this command on the Terminal:

yarn -v

I have version 1.22.4 at the moment that I was writing this post.

Installing Create React App Library Globally

You can install the library create-react-app globally by typing this command:

npm i -g create-react-app

Once, it's installed you can verify by watching the version with the following command:

 create-react-app --version

The version I've installed is 3.4.1.

Setting up the Environment

Creating the App Project

We need to create the app folder with the following command:

create-react-app <project_name>

This is the name of the project, for instance (react-validation)

This is going to generate a new directory and It's going to populate it with all of the boilerplate files we need to start our react application.

Now, go to the folder that we've just created, start the development of the project and open the Visual Studio Code.

cd react-validation
yarn start
code . 

You will have this screen on your browser

Cleaning the Boilerplate

Removing Some Boilerplate Files

Remove the following files on the source (src) directory:

1. App.css
2. App.test.js
3. index.css
4. logo.svg

It must be like this at the end:

Remove content on App.js

1. Delete all the content in header tags including it, leaving a single div and 1 import from react.

1. Remove on index.js file the import of index.css.

Now, we have a completely blank page when we can start any project.