If you’re just getting started with web development, one of the most valuable things you can do is build projects and share them. And there’s no better place to showcase your code than GitHub — the world’s most popular platform for hosting and collaborating on code.
In this beginner-friendly guide, you’ll learn how to:
Create a React project using Vite
Initialize Git and set up version control
Push your project to GitHub — step by step
Whether you’re building your first project or just learning how to use GitHub, this tutorial is the perfect starting point.
✍️ Why Use GitHub, React, and Vite?
✅ GitHub
A free platform that lets developers:
Host code repositories
Track project changes
Collaborate with others
Share their work publicly or privately
If you plan to build a portfolio, contribute to open source, or land a job in tech, GitHub is essential.
⚛️ ReactJS
React is a powerful JavaScript library used by companies like Meta, Netflix, and Airbnb to build modern, dynamic websites. It’s a must-learn for frontend developers.
⚡ Vite
Vite is a lightning-fast build tool that makes it super easy to start new React projects with zero configuration.https://react.dev/
🧾 Step 1: Sign Up for GitHub
Before we get into the code, sign up for a free GitHub account:
Go to github.com
Click Sign Up
Choose a username, enter your email, and create a password
Verify your email and complete setup
Now you’re ready to host your code!
⚛️ Step 2: Create a React Project Using Vite
npm create vite@latest my-first-reactjs-app -- --template react cd my-first-reactjs-app npm install npm run devThis creates a fresh React app with Vite. Visit http://localhost:5173 to preview it in your browser.
🔧 Step 3: Initialize Git
git init git add . git commit -m "Initial commit"This sets up version control and saves your current code state.
🌐 Step 4: Create a New GitHub Repository
Log in to GitHub
Click the + icon in the top right → New repository
Name it (e.g.,
my-first-reactjs-app)Leave everything else as default — don’t add a README
Click Create repository
☁️ Step 5: Push Your Code to GitHub
git branch -M main git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git git push -u origin mainReplace YOUR_USERNAME and YOUR_REPO_NAME with your GitHub username and repository name.
🎉 That’s It — You’re Live!
Your React project is now live on GitHub!
You can now:
Share your repo link with others
Add it to your portfolio
Let others fork, star, or contribute to your project
📌 What’s Next?
To make your repo contributor-friendly:
Add a README.md with project details and setup instructions
Include a license
Create issues or features others can work on
💡 Want help setting up your portfolio, pushing your next project, or learning GitHub?
Check out more tutorials on my blog or contact me for beginner-friendly 1:1 help.
