From Zero to React Queen: Building Dynamic Web Apps with Sarah
About:
Learn how to build dynamic web applications
Requirements:
HTML, CSS, JavaScript, NPM, Node.js (v16+), VS Code
Total Course Spaces Remaining:
TBC
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.