ReactJS-The Beginner Master Class
  • React In the Beginning
    • Lesson 1 - Demo: Build a Simple React App - Fast
    • Lesson 2 - HTML Review
    • Lesson 3 - CSS Review
    • Lesson 4 - Modern JavaScript (JSX) Patterns
    • Lesson 5 - Set up Dev Environment
    • Hands-on Practice
  • React Fundamentals
    • Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAs
    • Lesson 2 - Motivation for Using React as the Solution to Vanilla JS
    • Lesson 3 - What is ReactJS - How it Works
    • React Code Along from Scratch
    • Lesson 4 - Create and Run a React Project with Vite - Full Overview
    • Lesson 5 - Create Hook by State Management in React
    • Lesson 6 - React Project File and Folder Walkthrough
    • Lesson 7 - JSX and How React Treats the DOM & JSX Compilation(by Babeljs) - Overview
    • Lesson 8 - Understanding the Main Files - App.jsx and main.jsx
    • Lesson 9 - Props and One-Way Data Flow - Overview
    • Lesson 10 - Google Bookshelf App - Ver 1.0
    • Hands-on Practice I
    • Hands-on Practice II
  • React State and Styling
    • Lesson 1 - Pulling Book Data from a Different Data File
    • Lesson 2 - Overview of How State Works in React
    • Lesson 3 - RandomQuote App
    • Lesson 4 - Lifting State Up - React Pattern Overview
    • Hands-On - Simple Counter
  • Forms and Interactivity - Grocery List App
    • Lesson 1 - Setup a Simple Form and Input
    • Lesson 2 - Build Form Profile App Using Multi-input Form Data
    • Hands-on : Build a Grocery List App
  • Connecting to the Backend - Consuming APIs - UseEffect Hook
    • Lesson 1 - Connecting to the Back End - Understanding Side Effects, Hooks and useEffect - Overview
    • Lesson 2 - Fetching Data from the Backend the Right Way with useEffect Hook
    • Lesson 3 - Setting Up Loading State
    • Hands-on :Use Dependency Array and Adding Values that Control Side Effects
  • Solo Project 1
  • RESTful APIs :Build a BookSearch App -Ver 2.0
    • Lesson 1: Build and test RESTful APIs with Postman
    • Lesson 2 - BookShelf App Structure
    • Lesson 3 - Create NavBar.jsx Component
    • Lesson 4 - Create Footer Component
    • Lesson 5 - Create BookList.jsx Component
    • Lesson 6 - Create BookCard.jsx Component
    • Lesson 7 - Creating Custom Hooks - useBooks and api-client
    • Lesson 8 - Controlling Network Activities in React with AbortController
    • Lesson 9 - Show Book Details in a Modal - Working
    • Lesson 10 - Bookshelf App Summary
  • Multi-Page Applications (MPAs)
    • Build a Multi-Page React Application
    • Multi-Page React Application
    • Hands-on Practice
  • Backend Frameworks-NEXT.JS
    • Migrating from React to Next.js
    • Lesson 1: Key Concepts of NodeJS and Express for Backend Web Development
    • Lesson 2: How to set up a new Next.js project
    • Lesson 3: How to create Layouts and Pages
    • Hands-on Practice 1
    • Hands on Practice 2
      • New Project & Folder Structure
      • File-Based Routing
      • Server vs Client Components & Router Hooks
      • Start On The Navbar
      • Navbar Links, Dropdowns & React Icons
      • Active Links & Conditional Rendering
      • Homepage Components
      • Properties Page
      • Property Card Dynamic Data
      • Home Property Listings
      • Custom Not Found & Loading Pages
  • Git and GitHubs
    • Git Installation
    • Git Commands
    • GitHub Repository
    • Hands-on Practice
  • Database in Application
    • React Supabase CRUD
    • Hands-on: Note Taking App
  • NoSQL Database
    • Installing MongoDB Community Edition
    • System Env Path Setting
    • How to use MongoDB Shell
    • How to Connect and Use Mongosh in VS Code via MongoDB Extension
    • MongoDB Guide
  • Solo Project 2
  • Deployment and Web Hosting
    • Lesson 1. React+Vite+TS+Shadcn Project
    • Lesson 2. Deploying a React Vite App to Vercel from Vercel CLI
    • Lesson 3 Connecting to GitHub Repo and Automate Deployment
  • Solo Project 3
  • Final Term Project
    • Level 1 Team Project
    • Level 1 Team Project
    • Level 1 Team Project
    • Level 1 Team Project
    • Level 2 Team Project
    • Level 2 Team Project
    • Level 3 Team Project
    • Level 3 Team Project
Powered by GitBook
On this page
  1. Git and GitHubs

Hands-on Practice

Task: Upload Solo Project 1 to GitHub

Method 1: Initializing with a README.md (Recommended for New Projects)

This approach is best when starting a new project on GitHub. A README file provides a description of your project.

Steps:

  1. Create a Repository on GitHub:

    • Go to GitHub.com and log in.

    • Click the "+" button in the top right and select "New repository."

    • Give your repository a name (e.g., "my-project").

    • Optionally, add a description.

    • Crucially: Check the box that says "Add a README file." This initializes the repository with a README.md file.

    • Choose whether you want the repository to be public or private.

    • Click "Create repository."

  2. Clone the Repository to Your Local Machine:

    • On your repository's page on GitHub, click the "Code" button and copy the repository's URL (it will look like https://github.com/your-username/my-project.git or git@github.com:your-username/my-project.git).

    • Open a terminal or Git Bash on your local machine.

    • Navigate to the directory where you want to store your project (e.g., cd Your-Working-Directory/projects).

    • Use the git clone command

      git clone <repository_url>

      (Replace <repository_url> with the URL you copied). This creates a local copy of your empty repository.

  3. Copy Your Files and Folders:

    • Copy the files and folders you want to upload into the newly created local repository directory (e.g., my-project).

  4. Stage the Changes:

    • In your terminal, navigate to the local repository directory (e.g., cd my-project).

    • Use the git add command to stage the changes. You can add individual files:

      git add file1.txt
      git add folder1/file2.txt
    • Or, to add all changes (including new files and folders), use:

      git add .
  5. Commit the Changes:

    • Use the git commit command to create a commit. A commit is like a snapshot of your changes. Always include a descriptive message:

      git commit -m "Initial commit: Added project files"
  6. Push the Changes to GitHub:

    • Use the git push command to upload your local commits to the remote GitHub repository:

      git push origin main  # or git push origin master, depending on your default branch name

      (You might be prompted for your GitHub credentials.)

Method 2: Initializing Without a README.md (For Existing Local Projects)

This method is for when you already have a project on your computer that you want to put on GitHub.

Steps:

  1. Create a Repository on GitHub (Without README):

    • Follow the same steps as in Method 1, but do not check the "Add a README file" box. Click "Create repository."

  2. Initialize a Git Repository Locally:

    • In your terminal, navigate to your project's root directory.

    • Use the git init command to initialize a new Git repository in your project:Bash

      git init
  3. Add Your Files and Folders:

    • Same as Step 3 in Method 1: Copy your files and folders into your project directory.

  4. Stage the Changes:

    • Same as Step 4 in Method 1: Use git add . (or add files individually).

  5. Commit the Changes:

    • Same as Step 5 in Method 1: Use git commit -m "Initial commit" (or a more descriptive message).

  6. Add the Remote Repository:

    • On your GitHub repository page, copy the repository URL.

    • In your terminal, use the git remote add command to link your local repository to the remote one:

      git remote add origin <repository_url>

      (Replace <repository_url> with the URL you copied.)

  7. Push the Changes to GitHub:

    • Same as Step 6 in Method 1: Use git push origin main (or git push origin master). You might need to use the -u flag for the first push to set the upstream branch:

      git push -u origin main

Key Explanations:

  • git clone: Copies a repository from GitHub to your local machine.

  • git init: Initializes a new Git repository in a local directory.

  • git add: Stages changes for the next commit. The . adds all changes in the current directory and its subdirectories.

  • git commit: Creates a snapshot of the staged changes with a descriptive message.

  • git push: Uploads local commits to the remote GitHub repository.

  • origin: A common name for the remote repository you cloned from or added.

  • main or master: The default branch name on GitHub.

Remember to replace placeholders like <repository_url> and commit messages with your actual values. If you encounter errors, carefully read the error messages in your terminal, as they often provide clues for troubleshooting.

PreviousGitHub RepositoryNextDatabase in Application

Last updated 4 months ago