React 101 Workshop

Introduction

Welcome to the React 101 Workshop! This workshop provides college students with a systematic approach to learning modern JavaScript development, culminating in React mastery.

Our philosophy emphasizes building a strong foundation before diving into React frameworks. This ensures you'll have a comprehensive understanding of the core concepts and tools that power modern web development.

Why This Approach?

While React is a powerful library, it builds upon many fundamental concepts. Instead of overwhelming you with React's complexity immediately, we break down the learning journey into digestible steps. This methodical approach helps you:

• Master core JavaScript concepts
• Understand modern development tools
• Build confidence progressively
• See how different pieces fit together

Workshop Modules

1. JavaScript Fundamentals

1. Hello JS (Browser)

   • 🎯 Objective: Master JavaScript basics in the browser
   • 💡 Key Learning: DOM manipulation, events, and core JavaScript concepts

2. Hello ES JS (Browser)

   • 🎯 Objective: Modern JavaScript with ES6+ features
   • 💡 Key Learning: Modules, arrow functions, destructuring, and modern syntax

2. Build Tools & Development

3. Hello Bundler (Webpack)

   • 🎯 Objective: Module bundling fundamentals
   • 💡 Key Learning: Asset management, dependency handling, build optimization

4. Hello Dev Server (Webpack)

   • 🎯 Objective: Modern development workflow
   • 💡 Key Learning: Live reloading, hot module replacement (HMR)

5. Hello Vite

   • 🎯 Objective: Next-gen frontend tooling
   • 💡 Key Learning: Build tool alternatives, development optimization

3. Web Development Essentials

6. Hello HTML

   • 🎯 Objective: Dynamic HTML manipulation
   • 💡 Key Learning: DOM API, content structuring, semantic HTML

7. Hello Lodash

   • 🎯 Objective: Third-party library integration
   • 💡 Key Learning: NPM ecosystem, utility functions, code reuse

8. Hello Router

   • 🎯 Objective: Client-side routing fundamentals
   • 💡 Key Learning: SPA navigation, route handling, history API

9. Hello Tailwind CSS

   • 🎯 Objective: Modern CSS frameworks
   • 💡 Key Learning: Utility-first CSS, responsive design, styling best practices

Getting Started

# Clone the repository
git clone https://github.com/yourusername/react-101-workshop.git

# Navigate to project directory
cd react-101-workshop

# Install dependencies
npm install

# Start with first module
npm run start:module1

Prerequisites

• Basic understanding of HTML and CSS
• Node.js installed (version 14+ recommended)
• A code editor (VS Code recommended)
• Command line familiarity

Learning Path

Each module contains:

• 📚 Theory introduction
• 💻 Hands-on exercises
• 🎯 Practice challenges
• ✅ Knowledge checkpoints

Happy learning! 🚀