3. Vite - Hiểu toàn bộ Code Base ban đầu - Push lên GitHub | ReactJS + Material UI | TrungQuanDev

Introduction

This tutorial guides you through understanding the initial code base created by Vite for a React project. We will also cover how to create a GitHub repository and push your code to it. This step-by-step guide is designed for developers looking to enhance their skills and prepare for real-world applications.

Step 1: Setting Up Your Vite Project

1. Install Vite

   • Ensure you have Node.js installed on your machine.
   • Run the following command in your terminal to create a new Vite project:

     npm create vite@latest my-react-app --template react
     

   • Replace my-react-app with your desired project name.

2. Navigate to Your Project Directory

   • Change into your project folder:

     cd my-react-app
     

3. Install Dependencies

   • Install the required packages:

     npm install
     

4. Run the Development Server

   • Start the development server to see your app in action:

     npm run dev
     

   • Open your browser and navigate to http://localhost:3000 to view your running application.

Step 2: Understanding the Code Base

1. Explore the Project Structure

   Familiarize yourself with the generated project files

   • src/: Contains your React components and application logic.
   • public/: Holds static assets like images and icons.
   • index.html: The main HTML file where your React app mounts.

2. Review Important Files

   • main.jsx: The entry point of your React application.
   • App.jsx: The main component that renders your application UI.
   • vite.config.js: Configuration file for Vite.

3. Check the Scripts in package.json

   • Review the scripts section to understand available commands:

     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "serve": "vite preview"
     }
     

Step 3: Create a GitHub Repository

1. Sign in to GitHub

   • Go to GitHub and log in to your account.

2. Create a New Repository

   • Click on the "New" button to create a new repository.
   • Fill in the repository name and description.
   • Set the repository to public or private based on your preference.
   • Click "Create repository".

3. Initialize Git in Your Project

   • In your terminal, run:

     git init
     

   • Add the remote repository:

     git remote add origin https://github.com/yourusername/your-repo-name.git
     

   • Replace yourusername and your-repo-name with your actual GitHub username and repository name.

Step 4: Push Your Code to GitHub

1. Stage Your Changes

   • Add your files to the staging area:

     git add .
     

2. Commit Your Changes

   • Commit the staged files with a message:

     git commit -m "Initial commit"
     

3. Push to GitHub

   • Push your local repository to GitHub:

     git push -u origin master
     

Step 5: Continue Development and Push Updates

1. Make Changes to Your Code

   • Modify your code as needed, adding new features or fixing bugs.

2. Repeat the Commit and Push Process

   • Stage your changes, commit them, and push to GitHub regularly to keep your repository updated.

Conclusion

In this tutorial, you learned how to set up a React project with Vite, understand its initial code base, create a GitHub repository, and push your code. By following these steps, you are on your way to developing applications and managing them with version control. As you continue your development journey, consider exploring more features of React and Vite, and keep your GitHub repository updated with your latest changes.