top of page
Sarah Soutoul
From Zero to React Queen: Building Dynamic Web Apps with Sarah

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.

Total Spaces Available:

20 Spaces

Schedule:

1 Session Each Week for 8 Weeks

Price

Free (Company Sponsored)

Location:

Fully Remote

Start Date:

TBC

bottom of page