LogoLogo
Class SchedulesOfficial WebsiteMigraCode SyllabusHow to teach tech
  • 👩‍🏫Welcome to the MigraCode Volunteer Guide
  • General information
    • ℹ️About MigraCode
    • 🖱️Working with our students
    • 👥Volunteering roles
      • Teaching volunteer roles
      • Mentoring volunteer roles
      • Slack volunteer roles
  • Teaching instructions
    • 🖥️Basic computer literacy
      • Lesson 1: Introduction and Browser
      • Lesson 2: More browsing and Internet
      • Lesson 3: Mail and a taste of Drive
      • Lesson 4: Google Docs
      • Lesson 5: Google sheets
      • Lesson 6: Google slides
    • 👩‍💻Web development
      • Class Example
      • Teaching instructions
        • Introduction
          • 1 - Terminal and Visual Code
          • 2 - Git and Github
        • HTML/CSS
          • 1 - Semantic HTML and CSS
          • 2 - Responsive Web and layout
          • 3 - Bootstrap
        • JavaScript I
          • 1 - Hello Javascript
          • 2 - Expressions and loops
          • 3 - Arrays and callbacks
        • Javascript II
          • 1 - Javascript in the browser
          • 2 - Objects
          • 3 - Introduction to APIs
        • Javascript III
          • 1 - HTTP Protocols and ES6
          • 2 - Workshop Part 1
          • 3 - Workshop Part 2
        • React
          • 1 - Hello React
          • 2 - Reacting to changes
          • 3 - Fetching Data
        • NodeJS
          • 1 - Node and Express 101
          • 2 - APIs in Node
          • 3 - Workshop
        • Databases
          • 1 - Introduction to SQL
          • 2 - SQL with Node
          • 3 - CRUD with SQL and Node
    • 🛠️Professional Skills
      • Module 1: Soft skills
      • Module 2: Employability
      • Module 3: Working in projects
  • Useful Links
  • Class Schedules
  • Official Website
  • MigraCode Syllabus
  • How to teach tech
Powered by GitBook
On this page
  • Module Introduction
  • Lessons

Was this helpful?

Export as PDF
  1. Teaching instructions
  2. Web development
  3. Teaching instructions

React

Module Introduction

Learning Objectives

By the end of the three lessons & homework, trainees should be able to build a React application:

  • Written with components

    • Appropriately composed/nested

    • Split across multiple files

  • Uses props to pass values between components

    • Data like numbers/strings/objects/arrays

    • Functions as event handlers

  • Uses state to react to user interaction

    • E.g. a button can be clicked to increment a counter

  • That fetches data from an API

    • Loading, success and error states are shown

  • Containing a form

    • Form inputs that can be filled out by the user

    • Can be submitted, triggering an update in the app

For advanced trainees, some further objectives would be:

  • Use class components instead of functional components/Hooks

  • Explain why React state is used over plain old JavaScript variables

Out of scope

These topics are considered out-of-scope:

  • Object-Orientated JavaScript (classes/inheritance)

    • Details of extends/super() are not necessary to use React (they are an implementation detail of Component class), so don't go out of the way to teach this

  • Redux

    • Want to focus on learning and practising the basics of React, before introducing new concepts

    • Learning Redux will be easier once confident with React

  • Styled Components

  • In depth functional programming

Lessons

Previous3 - Workshop Part 2Next1 - Hello React

Last updated 4 years ago

Was this helpful?

👩‍💻
1 - Hello React
2 - Reacting to changes
3 - Fetching Data