Exploring Git, GitHub, and Understanding React Application Structure as a Beginner

When I first started learning web development, I kept hearing about Git, GitHub, and React. At the beginning, all three felt a bit intimidating and confusing. Over time, with a lot of trial and error, they slowly started to make sense. In this blog, I’m sharing how I explored Git and GitHub as a beginner, and what I learned about React applications and their structure. As I continued learning, I also explored more beginner-friendly engineering articles available on the [Nife Tech Blogs](https://blog.nife.io/), which helped me understand real-world development concepts step by step. --- ## Getting Started with Git Git is a distributed version control system that helps track changes in a project. My first interaction with Git was simply trying to push a small project to GitHub. I started with a few basic commands: ```bash git init git add . git commit -m "Initial commit" git push origin main ``` You can learn more from the official [Git documentation](https://git-scm.com/docs). At first, I just ran these commands without fully understanding what they did, but over time I learned their meaning and how they fit into the workflow. ## Common Git Errors I Faced While learning, I ran into several real errors that forced me to understand Git more deeply. 1. **`fatal: remote origin already exists`** I saw this when I tried adding a remote repository more than once using `git remote add origin `. I fixed this by removing the existing remote and adding it again using `git remote remove origin`. 2. **`error: src refspec main does not match any`** This happened when I tried to push before making my first commit. I learned that Git needs at least one commit before you can push to a remote branch. --- ## Exploring GitHub Once I was more comfortable with basic Git commands, I started using GitHub to host my code online. GitHub helped me back up my projects and made it easier to share them. #### Some of the things I practiced on GitHub: * Creating new repositories * Cloning existing projects * Connecting local projects to remote repositories * Working with branches * Pushing and pulling updates Over time, I understood the simple but important idea: **Git manages changes locally, and GitHub is where those repositories live remotely.** Hosting projects online also made me curious about how applications are deployed and managed on real platforms, which led me to explore developer ecosystems like [OpenHub by Nife.io](https://openhub.nife.io/about/). --- ## Understanding React Application Structure Around the same time, I started exploring React. At first, opening a React project felt overwhelming because of all the files and folders. But once I broke it down piece by piece, it became much easier to understand. A typical React project structure I worked with looked like this: ` ` `text my-app/ ├── public/ ├── src/ │ ├── components/ │ ├── App.js │ └── index.js ├── package.json └── node_modules/ ` ` ` Helpful for explaining folder structure [React Project Structure](https://react.dev/learn/creating-a-react-app). ### Key Concepts I Learned * `index.js` is responsible for rendering the React application into the browser. * `App.js` usually acts as the root component of the app. * The `components/` folder contains smaller, reusable UI pieces. * `package.json` manages dependencies and scripts like `npm start` and `npm run build`. Understanding that React is **component-based** helped a lot. Instead of thinking of the app as one big file, I started seeing it as many small components working together. ### React Errors I Faced I also ran into some common React-related errors: 1. **`Module not found: Can't resolve './Component'`** This usually happened because of a wrong import path or a mismatch in file names (especially with letter casing). It taught me that import paths in React and JavaScript are case-sensitive. 2. **`npm ERR! missing script: start`** I ran into this error when running `npm start` outside the project directory. It helped me understand the importance of working inside the correct folder and ensuring the `start` script is defined inside `package.json`. For common react errors go through [npm CLI documentation](https://docs.npmjs.com/) --- ## Conclusion Learning Git, GitHub, and React as a beginner wasn't always smooth, but it was worth it. Git helped me track and manage my code, GitHub taught me how to store and share it online, and React introduced me to a structured, component-based way of building interfaces. The errors I ran into along the way ended up teaching me the most. Instead of treating mistakes as failures, I now see them as a natural part of learning and an opportunity to go deeper into how things really work. If you're beginning your own development journey, exploring platforms like [Nife.io](https://nife.io) can help you understand how modern applications move from learning projects to real-world deployments.

Deploy your next app in minutes, not days.