Skip to content

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

Notifications You must be signed in to change notification settings

apguan/hackreact

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.2%
  • HTML 10.7%
  • CSS 5.1%