Web Dev with React

How it is taught

1. Step 1

   Start where you are

   A short placement task, graded by the tutor, starts you past the modules you can already do.

2. Step 2

   Learn in conversation

   Each concept is one session: the tutor explains, asks you to write code, and reviews it until you have shown you understand.

3. Step 3

   Keep it

   Every concept comes back on day 3, 7 and 18. A memory model tracks how well each one is holding, and reviews can go straight into your Google Calendar.

What you will learn

Each concept has its own page: what a session covers, an example and the mistake to watch for.

1. Module 1JSX and components

   • JSX syntax
   • Function components
   • Rendering lists and keys

2. Module 2Props and composition

   • Passing props
   • Children and composition
   • Conditional rendering

3. Module 3TypeScript with React

   • Typing props
   • Typing events
   • Typing hooks

4. Module 4State and events

   • useState
   • Event handlers
   • Lifting state up

5. Module 5Effects and data fetching

   • useEffect and cleanup
   • StrictMode double effects
   • Fetching data in components

6. Module 6Routing

   • Routes and links
   • Dynamic segments
   • Layouts

7. Module 7Forms and validation

   • Controlled inputs
   • Form submission
   • Validation feedback

8. Module 8Context and reducers

   • useContext
   • useReducer
   • Avoiding prop drilling

9. Module 9Performance

   • Memoisation
   • Code splitting
   • Profiling renders

10. Module 10Testing components

    • Rendering in tests
    • Querying by role
    • Mocking network calls