Required tools for course:

• VS code

• NPM/Node v16+

• Command line interface (terminal/Git bash)

 

🛠️ Week 1: Getting Started with React

• Course Overview: Understand the structure and goals.

• What is React?: Learn about Component-Driven Development (CDD).

• How React Works: Explore the virtual DOM and SPA concepts.

• Setup with Vite: Set up your development environment.

• Basics of JSX: Get familiar with JSX syntax.

• Hands-on Practice: Create your first functional component.

 

🎮 Week 2: Managing Data and User Interaction

• Data Management: Learn to handle data in components using state.

• Handling Events: Create interactive components.

• Conditional Rendering: Display content based on conditions.

• React Dev Tools: Inspect components for debugging.

• Hands-on Practice: Build a simple interactive component (e.g., a counter)

 

📁 Week 3: Managing Props and Designing an Effective File Structure

• React Project Structure: Explore effective file organisation.

• Passing Data with Props: Share data between components.

• State vs Props: Understand their differences.

• Hands-on Practice: Create components that communicate via props within a specific application (e.g., a todo app)

 

🔧 Week 4: Leveling Up with Hooks

• Lifecycle Methods: Overview of component lifecycle.

• Using useEffect: Handle side effects in functional components.

• Using useContext: Share state across components.

• Hands-on Practice: Implement useEffect to fetch and display data from an API & useContext to create a theme context for the app

 

🗺️ Week 5: Building Navigation into Your App

• Setting Up React Router: Integrate routing in your app.

• Creating Routes: Build links between components.

• Dynamic Routing: Handle route parameters and nested routes.

• Hands-on Practice: Add navigation to a multi-page application.

 

🧪 Week 6: Testing Your React Applications

• Importance of Testing: Understand why testing is essential.

• Unit Testing Basics: Write tests with Jest, Vitest & React Testing Library.

• Mocking: Learn to mock functions and components.

• Hands-on Practice: Write tests for a component we built in a previous week.

 

🚀 Week 7: Capstone Project & Deployment Essentials

• Concept Recap: Review key topics covered in the course via an end to end project.

• Deployment: Explore different deployment options (Netlify, Render, etc.)

• Hands-on Practice: Build and deploy a selected mini-project

 

🌟 Week 8: Final Project Showcase

• Build Your Project: Create a complete React application.

• Project Presentations: Share your work and get feedback.

• Reflect on Learning: Discuss key concepts from the course.