Merge pull request #27 from BrockAltug/feature

Feature
BrockAltug · Jan 3, 2025 · f13edad · f13edad
2 parents fc2478c + 74b4ab7
commit f13edad
Show file tree

Hide file tree

Showing 25 changed files with 34,008 additions and 188 deletions.
diff --git a/16-react/02-create-vite/README.md b/16-react/02-create-vite/README.md
@@ -1,74 +1,120 @@
-# 📐 Add Comments That Describe the Functionality of a React App
+# 🚀 Getting Started with React and Vite
 
-## Before We Begin
+## Introduction
 
-Initializing a React application using `npm create vite` is fast and simple. Like the `webpack` & `webpack-dev-server` tools we covered last unit, Vite is a tool that supports a development server which includes ES Module syntax and Hot Module Replacement (HMR), as well as a build tool which bundles your application into a production-ready setup using Rollup (a Webpack-like tool).
+Vite is a next-generation frontend tooling solution that makes initializing and developing React applications fast and efficient. Unlike traditional build tools like `webpack` and `webpack-dev-server`, Vite provides an optimized development experience with:
 
-### When you would like to scaffold a new `vite` application on your own, follow these steps
+- **ES Module Syntax Support**: Enables faster builds and module-based imports.
+- **Hot Module Replacement (HMR)**: Instant updates without a full reload.
+- **Build Tooling**: Bundles your application into a production-ready format using [Rollup](https://rollupjs.org/).
 
-1. In the command line, navigate to the desired parent folder and run `npm create vite`.
+Whether you're starting a new project or transitioning from other build tools, Vite ensures your workflow remains seamless.
 
-    * 🔑 *Note*: This command will automatically create a sub-folder which will house your React application; you do not need to perform a `mkdir` command to create one manually.
+---
+
+## 🛠 Initializing a New React Application with Vite
+
+Follow these steps to scaffold a new React application using Vite:
+
+1. **Navigate to Your Desired Directory**  
+   In your terminal, go to the parent folder where you want your React application to reside.
+
+2. **Run the Vite Initialization Command**  
+   Use the following command to scaffold your application:
 
-2. Enter the desired name of your new project folder.
+   ```bash
+   npm create vite
+   ```
 
-3. From the first list of options, select your framework; for our activities in class, we'll be using `React`.
+   - 🗂 _Note_: This command automatically creates a sub-folder for your application. No need to create a folder manually.
 
-4. From the second list of options, select your variant; for our activities in class, we'll be using `JavaScript`.
+3. **Name Your Project**  
+   Enter the name for your new project folder when prompted.
 
-5. `cd` into your newly created project folder and run `npm install`.
+4. **Select Your Framework**  
+   From the list of options, choose `React` as your framework.
 
-    * In later activities we'll add additional NPM packages to our `vite` apps such as 'bootstrap', 'dotenv', and 'axios'.
+5. **Select Your Variant**  
+   Pick `JavaScript` or `TypeScript` based on your preference. For this guide, we'll use `JavaScript`.
+
+6. **Install Dependencies**  
+   After the project is created, navigate into the project directory:
+
+   ```bash
+   cd <your-project-name>
+   npm install
+   ```
+
+7. **Run the Development Server**  
+   Start your development server with:
+   ```bash
+   npm run dev
+   ```
+   Open the URL displayed in your terminal to view your application.
+
+---
 
-6. Run `npm dev`/`npm run dev` and navigate to the prompted URL to see your app.
+## ⚙️ Recommended Customizations
 
-### Further customization (Recommended)
+### Update `package.json` Scripts
 
-1. Navigate to your `package.json` and modify the `scripts` object so that it looks like this example:
+Enhance your `scripts` section in `package.json` to include more utility commands:
 
 ```json
-  "scripts": {
-    "dev": "vite",
-    "start": "vite",
-    "build": "vite build",
-    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
+"scripts": {
+  "dev": "vite",
+  "start": "vite",
+  "build": "vite build",
+  "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+  "preview": "vite preview"
+}
 ```
 
-* Note the addition of the `"start": "vite"` script.
+- **`dev`**: Starts the development server.
+- **`start`**: Alias for `vite` (for easier use).
+- **`build`**: Creates a production-ready build.
+- **`lint`**: Runs ESLint on your source files.
+- **`preview`**: Serves the production build for preview.
+
+### Configure the Development Server
 
-2. Navigate to the `vite.config.js` file and edit the export object so that it looks like this example:
+Update your `vite.config.js` to enhance the development experience:
 
 ```js
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
 export default defineConfig({
   plugins: [react()],
   server: {
-    port: 3000,
-    open: true
-  }
-})
+    port: 3000, // Custom port for the dev server
+    open: true, // Automatically opens the browser
+  },
+});
 ```
 
-## Activity
-
-Work with a partner to add comments that describe the functionality of the code in [Unsolved/src](./Unsolved/src).
+---
 
-## 📝 Notes
+## 📦 Adding Additional Dependencies
 
-Refer to the documentation:
+During development, you might want to include some helpful libraries. Use `npm install` to add these:
 
-[Getting Started with Vite](https://vitejs.dev/guide/)
+- **Bootstrap**: For responsive UI components.
+- **Dotenv**: To manage environment variables.
+- **Axios**: For making API calls.
 
----
+Example installation command:
 
-## 🏆 Bonus
+```bash
+npm install bootstrap dotenv axios
+```
 
-If you have completed this activity, work through the following challenge with your partner to further your knowledge:
+---
 
-* What are some other options that you can use with the `defineConfig` method?
+## 📝 Useful Resources
 
-Use [Google](https://www.google.com) or another search engine to research this.
+- [Vite Documentation](https://vitejs.dev/guide/)
+- [React Official Documentation](https://reactjs.org/docs/getting-started.html)
+- [Rollup.js Documentation](https://rollupjs.org/)
 
 ---
-© 2024 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.