Getting Started with React.....
Tags: react, javascript, node, beginners
Published: 2021-05-11 04:12:54

**1. You need to install `node`** 
> Now what is `node`: Node allows developers to write JavaScript code that runs directly in a computer process itself instead of in a browser. Node can, therefore, be used to write server-side applications with access to the operating system, file system, and everything else required to build fully-functional applications.
*Click to install node: [node](https://nodejs.org/en/)*
`**Note: Download the LTS version of node that is compactible with every operating system**`
>After installing `node`, check whether it has been installed by opening `command prompt/terminal`
![cmd checking node version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdq1mmciwtq4coxw8kt3.PNG)

**2. You need a text editor**
![vs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7yrawbx8atb8emsk2fk.PNG)
> I recommend you use `Visual Studio Code` because it has awesome features and it's easy to use and i love it!. 
*Click here to install visual studio code: [visual studio code](https://code.visualstudio.com/)*

**3. Now let's get to installing react**
> First open a directory where you want to start your react a
project and open with visual studio code.
open terminal **Ctrl + Shift + `**
Type the following to create your first react project 
```npx create-react-app project-name``` 
**Note:** we don't use `npm install -g create-react-app project-name`or `npx install -g create-react-app project-name` anymore so you will get and error.
to be free from that error, type:
`npm uninstall -g create-react-app`
Now you are free to use: `npx create-react-app project-name`
If you still get errors like this: 
![npm error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll41kkang2m9vvf91rhs.PNG)
It means you don't have the latest version of react and you have to install it globally to be accessed everywhere on the operating system. Now use the following to install
`npm install -g create-react-app@latest` this installs the latest version of react with it's current libraries.
**Now you are free to use:** 
`npx create-react-app project-name` after that  
![react installation process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zie1rzqfpbk9qwwgov21.PNG)
`cd project-name/`
then,
`npm start` to start your react application.
![installation files in project folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm7p6sa2jvr6pnjd93jt.PNG)

**4. Pushing your first react app to your git repository**
>**Use:**

1. git init 
2. git remote add origin "repo-url"
3. git add .
4. git commit -m "commit-message"
5. git push origin main 



**You'd probabily had an error message like this:**
![git push error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdx9ak6xgqkvok5bq8ss.PNG)

**Solution:**
> Now react automatically initializes a git project for you and due to that you get errors in pushing refs to your remote repository. Now follow this:

1. rm -rf .git `this removes the .git extension on your project`
2. git init `to initialize a new repo`
3. git remote add origin "repo-url"
4. git add .
5. git commit -m "commit-message"
6. git push -f origin main `this is necessary to be able to push your files on to your git repo`
7. git pull origin main `to get the updated version of your repo to avoid future errors in pushing refs to repo.`


npx = node package execute
npm = node package manager
rm = remove
-f = force
init = initialize
-m = message
-g = global

*If you want to know more about react, follow this link [Reactjs](https://reactjs.org/docs/getting-started.html)*


**Thank You for going through this article**


**HAPPY LEARNING**
*Kindly reach out to me on [LinkedIn](https://www.linkedin.com/in/josh-boat/)*