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
  • Notes for Instructors
  • Homework Suggestion
  • Practice Day (Saturday)
  • Feedback

Was this helpful?

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

1 - Hello React

PreviousReactNext2 - Reacting to changes

Last updated 4 years ago

Was this helpful?

Notes for Instructors

  • Components - talk about the conceptual idea of components, not just React components

    • E.g. bootstrap components

  • Why React?

    • Updating the DOM is potentially buggy, verbose, slow

    • In complex web apps (like Facebook), updating the DOM is common

    • React solves a lot of those problems

  • Thinking in React exercise - useful to print out the screenshot, so they can draw on it

  • Rendering in React section

    • Build towards component usage from vanilla DOM

    • This hopefully reduces the "magic" that React is

    • Although don't spend too much time on it - the trainee's don't know about other frameworks, and so don't really care about other approaches

    • Also useful to identify why the React api is improved over the vanilla DOM apis

  • JSX section

    • Open the - demonstrate that there isn't any magic in JSX

    • Just React.createElement calls with syntax sugar

  • Do not ask students to install Create-React-App

    • Instead use npx create-react-app my-app it automatically installs the latest version of Create React App.

    • CRA can consume a lot of resources (especially on older laptops) so emphasize stopping/starting

    • This is the first time that students will have encountered a file watcher/daemon background process

      • So take some time to demonstrate how to start and stop the app

      • Recommend that students with slower computers stop the app when they are not using it

  • Installing stop-runaway-react-effects

    • A package to prevent accidental infinite useEffect loops

    • It must be imported before the react import so that useEffect can be monkey-patched

  • Making an argument for props section - Relate to a situation in real life, something like: imagine what our boss might ask for with this small application. What could our boss ask for which would mean we would have to make changes to the code?

  • Exercises

    • Written to be quite step-by-step deliberately

      • Some students were distracted by the wording and not getting to the useful part of the exercise

      • This is a tricky balance though - now some students will be distracted by the wordy-ness of the exercises. Feedback welcome

    • Exercises in lessons 2 & 3 depend on the completing the exercises in lesson 1

      • So ensure students have completed most of them before moving on

      • We may want to introduce a way of "catching them up" - have tagged "checkpoints" on a git repo?

  • Interactive examples

    • All of the examples should have an associated CodeSandbox with identical code

    • This is so that you can change the example to help demonstrate if necessary

      • I have found this very useful in the past, especially when answering questions like "what happens if you do X?"

      • You can type up exactly what they're asking about and demo it

    • Props section

      • Makes a common analogy of "props as arguments" to a function

      • students often get tripped on up on the props argument to a functional component

      • They tend to forget to add it to the function signature

      • Or they think that each prop is given as a separate argument

    • The first class may be a little short. But not short enough to start getting into state

      • If you have extra time, PropTypes/defaultProps might be worth covering

      • There is a Further Reading section at the very end of lesson 2 about this

Homework Suggestion

  1. If unfinished, complete the in-class exercises on your pokedex app

Practice Day (Saturday)

Feedback

Remember copy the Homework to the at the end of the class

(Delivery) Fork and clone project and complete all of the lesson 1

Live coding session with students to go over project lession 1 steps and Q&A session to clear their doubts.

We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. This will help us to improve Syllabus and this guide

👩‍💻
Babel REPL
Package docs
Trello
cyf-hotel-react
cyf-hotel-react
document