React

Overall Learning Objectives - React module

By the end of the three lessons & homework, students 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 students, some further objectives would be:

• Use class components instead of function 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
• CSS-in-JS
• In depth functional programming