React Front End Lesson Plan

Description

We will cover front end development in JavaScript, in particular using React to build a f/e application

Outcomes

At the end of this training you will be able to:

  1. Set up a React application locally to run as you develop
  2. Construct complex UI from nested components
  3. Manage state within a f/e application

Learner Requirements

  1. Some knowledge of JS and ES6
  2. Have NodeJS/NPM installed
  3. Familiarity with the command line
  4. Be able to use git (probably just a clone)

Outline

Day 1:

  1. Intro
  2. Why learn JavaScript?
  3. Discussion: how much JS have ppl done / how much in the workplace
  4. What is React / Why should we use it?
  5. 1 hour task: set up project, run locally, make a couple of small changes, one of these ideas:
    • Tic tac toe game
    • Meme generator
    • A chat room app
    • A habit tracker
    • A chess game
  6. Discussion / Q&A about this

Day 2:

  1. Recap
  2. 5 hour group exercise in React/ maybe Redux
  3. Review / Wrap-up

Tasks

During Training

  1. Learn the basics of setting up, developing and building a JS project
  2. Try to finish a basic project in React / Redux

After Training

  1. Try to develop application further
  2. ???

Resources / Reference

  1. Intro Slides on Google Drive
  2. Demo on YouTube