/hackreact

A workshop demo-ing HackReact- a to-do list app for Hackreactor students.

Primary LanguageJavaScript

HackReact Workshop

A workshop demo-ing HackReact- a to-do list app for Hackreactor students. Presented on March 2nd, 2017 by Keith Alpichi

Prerequisites

  • React syntax
  • ES6
  • Unidirectional (one-way) data flow

Learning Outcomes

  • Solidifying understanding and use of ES6
  • How to build a React SPA app from scratch
  • React and it's functional declarative paradigm
  • Debugging with React DevTools
  • State vs. Props
  • Introduction to localStorage
  • Introduction to lifecycle methods
  • Introduction Babel (transpiler) & Webpack (module bundler)
  • Introduction to Redux and how it makes managing/editing application state easier
  • Possible workshop in the future?

Workshop Outline

  • Introduction to the HackReact app
  • Produce mental model of application
  • Install dependencies
  • Start with one large parent component to render static content
  • Add in children components to do the same
  • Add in state in parent component
  • Pass down state as props to appropriate child components
  • Add in functions to alter the state in parent
  • Pass down these functions as props to appropriate child components
  • Refactor, refactor, refactor!

Live Demo

  • Fork this repo to your Github account
  • Clone your forked repo
  • Run npm install
  • Start the development server with npm run dev

Where to go from here?

  • Implement build process to transpile and bundle into the build directory for production
  • Implement localStorage
  • Refactor using Redux