DEV Community

Cover image for Getting Started with React.....
Joshua Nyarko Boateng
Joshua Nyarko Boateng

Posted on

Getting Started with React.....

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
**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

2. You need a text editor
vs code

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

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-nameor 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
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
cd project-name/
then,
npm start to start your react application.
installation files in project folder

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

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

Thank You for going through this article

HAPPY LEARNING
Kindly reach out to me on LinkedIn

Top comments (0)