First React app

Your First React App: A Beginner's Guide

Welcome! This guide will walk you through the process of creating your very first React application on a Windows 11 machine. We'll be using Visual Studio Code (VS Code) as our code editor, npm (Node Package Manager) for managing dependencies, Vite as our fast build tool, and GitHub for version control and sharing your project.

Prerequisites

Before we begin, make sure you have the following installed on your Windows 11 system:

• Node.js and npm: React relies on Node.js and npm for managing packages and running scripts. You can download and install them from the official Node.js website: https://nodejs.org/. Installing Node.js will automatically install npm as well.
• Visual Studio Code (VS Code): A popular and powerful code editor. Download it from: https://code.visualstudio.com/.
• Git: A distributed version control system. If you don't have it, you can download it from: https://git-scm.com/download/win.
• A GitHub Account: You'll need a GitHub account to store your project online. Sign up for free at: https://github.com/.

Step 1: Creating Your React Project with Vite

Vite is a next-generation frontend tooling that provides a fast and efficient development experience for modern web projects like React.

1. Open Command Prompt or PowerShell: Press the Windows key, type "cmd" or "powershell", and open the application.
2. Navigate to your desired project directory: Use the cd command to move to the folder where you want to create your React project. For example: cd Documents/Projects
3. Run the Vite command to create a React project: npm create vite@latest my-first-react-app --template react

   Here's a breakdown of the command:

   • npm create vite@latest: This command uses npm to run the Vite project scaffolding tool.
   • my-first-react-app: This is the name you're giving to your project folder. You can choose any name you like.
   • --template react: This specifies that you want to create a React project.
4. Navigate into your project directory: Once Vite has finished creating the project, move into the newly created folder: cd my-first-react-app
5. Install project dependencies: React projects have dependencies (other software packages) that they rely on. Install them using npm: npm install

Step 2: Opening Your Project in Visual Studio Code

1. Open VS Code: Launch the Visual Studio Code application.
2. Open the project folder: Go to File > Open Folder... and select the my-first-react-app folder you created in the previous step.

You'll now see the structure of your React project in the VS Code Explorer. Key files and folders include:

• public/: Contains static assets like your index.html file.
• src/: This is where most of your React application code will live, including components, styling, and logic. The main entry point is usually src/main.jsx or src/index.js.
• package.json: This file holds important information about your project, including its dependencies and scripts.
• vite.config.js: Vite's configuration file.

Step 3: Running Your React Development Server

Vite provides a development server that allows you to see your React application in the browser as you build it.

1. Open the VS Code Terminal: Go to Terminal > New Terminal (or press Ctrl+\`). This will open a terminal within VS Code, already navigated to your project directory.
2. Start the development server: Run the following command: npm run dev
3. View your application in the browser: Vite will usually provide a local development server URL in the terminal (e.g., http://localhost:5173/). Open this URL in your web browser. You should see the default Vite + React welcome page!

Step 4: Making a Simple Change

Let's make a small change to see how React works.

1. Navigate to src/App.jsx (or src/App.js): Open this file in VS Code.
2. Modify the text: Find the line that says something like: Edit src/App.jsx and save to test HMR.

   Change it to:

   Hello, React World!
3. Save the file (Ctrl+S): When you save the file, your browser should automatically update to reflect the change (this is due to Vite's Hot Module Replacement - HMR).

Step 5: Initializing Git and Committing to GitHub

Now, let's set up Git for version control and push your project to GitHub.

1. Initialize Git: In the VS Code terminal (make sure you're still in your project directory), run: git init

   This creates a new Git repository in your project folder.

2. Add files to the staging area: To tell Git which files you want to include in your first commit, run: git add .

   The . means "all files".

3. Create your first commit: A commit is a snapshot of your project at a specific point in time. Write a descriptive message for your commit: git commit -m "Initial commit: Basic React app created with Vite"
4. Create a repository on GitHub:
   • Go to the GitHub website (https://github.com/) and log in.
   • Click the "+" button in the top right corner and select "New repository".
   • Give your repository a name (it's a good practice to use the same name as your local project folder, e.g., my-first-react-app).
   • You can leave the "Description" optional.
   • Choose whether you want the repository to be "Public" or "Private". For this example, "Public" is fine.
   • Do not check the boxes for "Add a README file", "Add .gitignore", or "Choose a license" at this stage. We've already handled some of this locally.
   • Click the "Create repository" button.
5. Link your local repository to the remote GitHub repository: On your GitHub repository page, you'll see instructions on how to connect your local repository. Copy the command that looks like this (replace YOUR_USERNAME and YOUR_REPOSITORY with your actual GitHub username and repository name): git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git
6. Push your local commits to GitHub: This uploads your project to your GitHub repository: git push -u origin main

   The -u flag sets the upstream branch, so for future pushes, you can just use git push.

Congratulations!

You've successfully created your first React application using Visual Studio Code, npm, and Vite on Windows 11, and you've committed it to GitHub! This is just the beginning of your React journey. Explore the src folder to learn more about React components and start building amazing web applications.

Keep learning and happy coding!