How to Start a React Project from Scratch with Git and GitHub

Setting up a React project from scratch can seem daunting, but with this guide, you’ll have a clean and organized workflow that’s easy to replicate for any new project. Follow these steps for a structured and efficient setup.

---

Step 1: Prepare Your Environment

Before starting, ensure you have:

• Node.js and npm installed: Download Node.js
• A GitHub account to host your remote repository.
• A terminal or command prompt for commands.

---

Step 2: Create a New React Project

1. Navigate to Your Working Directory: Open your terminal and move to the directory where you want to create your project:

   cd /path/to/your/projects

1. Create the React App Using Vite: Run the following command to set up a React project with Vite:

   npm create vite@latest project-name -- --template react

Replace project-name with the desired name for your project.

1. Navigate Into Your Project Directory:

   cd project-name

1. Install Dependencies:

   npm install

---

Step 3: Initialize Git Locally

1. Initialize Git:

   git init

1. Stage All Files: Add all project files to Git’s staging area:

   git add .

1. Commit the Changes: Commit the files with an initial message:

   git commit -m "Initial commit"

---

Step 4: Create a Remote Repository on GitHub

1. Log in to your GitHub account.
2. Click the + icon in the top-right corner and select New Repository.
3. Fill out the details:
   • Repository Name: Match it with your project name.
   • Visibility: Choose Public or Private.
   • Do NOT initialize with a README or .gitignore to avoid conflicts.
4. Click Create Repository.
5. Copy the repository’s SSH or HTTPS URL (e.g., [e-mail]:yourusername/repository-name.git).

---

Step 5: Link Local Repository to Remote

1. Add the Remote Repository: Link your local project to the remote repository:

   git remote add origin [e-mail]:yourusername/repository-name.git

1. Verify the Remote Link: Check if the remote is set up correctly:

   git remote -v

You should see something like this:

   origin  [e-mail]:yourusername/repository-name.git (fetch)
   origin  [e-mail]:yourusername/repository-name.git (push)

1. Push Your Local Repository to GitHub: Push your code to the remote repository:

   git push -u origin main

---

Step 6: Project Structure

After the setup, your project folder should look like this:

project-name/
├── node_modules/     # Dependencies
├── public/           # Static assets like images
├── src/              # React source code
│   ├── App.jsx       # Main App component
│   ├── main.jsx      # React entry point
│   ├── App.css       # Component-specific styles
│   ├── index.css     # Global styles
├── .gitignore        # Files to ignore in Git
├── package.json      # Project metadata and dependencies
├── README.md         # Project description
├── vite.config.js    # Vite configuration

---

Step 7: Start the Development Server

1. Run the Development Server: Start your React app:

   npm run dev

1. Open Your App in a Browser: Vite will display a URL in the terminal (e.g., http://localhost:5173). Open it in your browser to see your app running.

---

Step 8: Next Steps

• Customize Your App:
  Edit src/App.jsx to create your homepage and App.css or index.css for styling.

• Commit Changes Regularly:
  Follow this workflow to keep your project updated on GitHub:
  

  git add .
  git commit -m "Describe your changes"
  git push origin main

• Collaborate or Share: Invite collaborators to your repository or share the GitHub link for feedback.

---

With this guide, you’ll always have a quick reference to start new projects efficiently. Feel free to adapt and expand it as needed!