Git is the most popular version control in the software industry. It is an open-source project developed by the father of Linux, Linus Torvalds. As a new developer, you will benefit from using it. Open-source and commercial projects use it to manage their source code. It is one tool that you need in your software development tools arsenal. It will allow you to collaborate remotely with your team, contribute to open-source software projects and build your developer portfolio. In this blog post, I will take you through the basics of git. We will use Github, a cloud-based hosting service that helps you manage git repositories, to host our react.js project.

To create a react project, we need to install node.js and npm on our local machine. Go to this website to download node.js. when you install node.js, npm will be installed too. Use the command node -v or npm -v to check the version of node and npm respectively. Here is a step by step guide to create your project:

1. In your cmd/terminal, navigate to the folder where you want to store your project.
2. Run npx create-react-app my-react-app. (You can replace my-react-app with the name of your app). When your project has finished installing, you will have a file structure that looks like this:

   my-react-app
   ├── README.md
   ├── node_modules
   ├── package.json
   ├── .gitignore
   ├── public
   └── src
   

   For better organisation of your code and files, I suggest that you structure your components folder this way:

   src
   └── Components
       └──Homepage
            ├── Homepage.js
            └── Homepage.css
   

   It will help you to manage your project and make it easier for those you are collaborating with to understand and navigate through your code easily. I have seen developers fail to do the basics right and in the future it causes maitenance problems. If you are to open-source your project you are likely to struggle to find contributors. We love and appreciate cleanliness as it is next to godliness.

Now that we have the basic file structure ready we can upload our project to github.

Create a new repository on Github

1. In your browser go to github (github.com), navigate to your dashboard then click on the repositories tab. Click on the green button labelled New to create a new repo.

1. You will be presented with the following screen where you will choose a name for your repo, whether you want it to be public or private, and the optional files to include in your repo. Click on create a repository to finalize the setup.

Initialize git on your local machine and upload your code to the remote repo.

1. Navigate to your react app folder and initialize git

   cd my-react-app
   git init
   

2. Now we add our files to the staging area

   git add .
   

   Notice the space between add and the period.

3. Check if your files are added.

   git status
   

   

4. Add the latest changes to the source code.

   git commit -m "initial commit"
   

   Because this is our first commit we use the message(-m) text as "initial commit". Let's say you had created a hompage.js file, you can use the message text "created homepage.js".
5. Switch to the branch you want to commit your changes to. In this example we will use the master branch.

   git branch -M master
   

6. Add files to your remote repo

   git remote add origin https://github.com/USER/PROJECTNAME.git
   

   Replace USER with your username and PROJECTNAME with the name of your github repo.
7. Push your changes to your remote repo

   git push -u origin master
   

   Well done! You have successfully pushed your project to Github. These are the basics that will help you learn more about Git. Like everything else in software development, once you get your basics right you are likely to excel in more challenging tasks.