React from A-Z — Part B — Install/Update Yarn and Start Your First Project
Yarn is a package manager like npm or node package manager which allows you to work with “React”.
To install yarn you need npm, and to use npm we need Node JS. So why do we need to use yarn when we already have npm?
One of the main reasons for introducing yarn is at that time npm didn’t support the deterministic sub-dependency resolution and “yarn” was considerably faster due to the introduction of an offline cache. But nowadays the lacuna between “yarn” and “npm” is much closer due to the introduction of deterministic dependency installation.
To install yarn, type npm install -g yarn in your command prompt. After the installation check whether it has been installed correctly by typing yarn -v in the command prompt. In addition, you can update “yarn” by typing yarn set version latest in the command line.
First Steps
One of the easiest ways to make “react” projects is by having the “create-react-app” tool. We can either use npm install -g create-react-app or yarn add -g create-react-app to have the “create-react-app” tool.
Now go to the directory you want to create your first react app. And open the command line in that directory by typing “cmd” in the address bar. Then simply type create-react-app jsx , “jsx” is the project name we are using. If your project is a payroll system you can type create-react-app payroll_system
After a couple of minutes, you will get something like this in the command line.
Since I am using “yarn” I have something like this. If you are using “npm”, you will get something similar to this.
Another way of creating a react application is, simply typing npx create-react-app jsx This will also make a react project but you will have to go inside the folder by typing cd jsx and start the project by typing npm start rather than yarn start
Now the project will normally start on localhost:3000 port. But if the port is busy it will ask you that is it okay to start the project in another port.
In the next article, we will look at the file structure of the “jsx” project and make changes to our project.
