patsanch/hello_reactjs

hello_reactjs

References

• https://github.com/petehunt/react-howto
• https://facebook.github.io/react/docs/installation.html#creating-a-new-application

Atom Packages

• react

Beginner

Tic Tac Toe

References

• https://facebook.github.io/react/docs/tutorial.html

Worth Noting

• constructors

Github Cards

References

• https://app.pluralsight.com/library/courses/react-js-getting-started

Worth Noting

• axios usage
• setting State!
• spread operator

Play Nine

References

• https://app.pluralsight.com/library/courses/react-js-getting-started

Worth Noting

• lodash usage (https://www.npmjs.com/package/lodash)
• for loops usage
• onClick usage (passing a reference (selectNumber, unselectNumber) and passing function (checkAnswer))
• Math#floor, Math#random
• Array#map, Array#filter, Array#reduce usage
• class level function (randomNumber)
• setState with function argument syntax

Intermediate

Pluralsight Admin

References

• https://app.pluralsight.com/library/courses/react-flux-building-applications

Worth Noting

• introduces flux pattern
• react-router usage
• browserify usage
• gulp usage
• eslint usage
• mock api usage (ex: authors)
• lodash usage (https://www.npmjs.com/package/lodash)
• prop types usage (only run during dev; warning is logged on console if validation fails)
• willTransitionTo and willTransitionFrom usage
• reusable components (ex: TextInput)
• mixins usage (ex: Router.Navigation)
• toastr usage (for notifications)
• form hydration via URL (for editing author)

Pluralsight Admin with Flux

References

• https://app.pluralsight.com/library/courses/react-flux-building-applications

Worth Noting

• psadmin notes
• constants file usage
• keyMirror usage
• lodash usage
• splice usage (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice; https://www.w3schools.com/jsref/jsref_splice.asp)

Exercise

• bit.ly/courseapi
• bit.ly/mockcoursedata

Pluralsight Admin with Redux

• redux usage
• es6 with babel usage
• react-router usage
• webpack usage
• npm scripts usage
• eslint usage
• mocha, react test utils and enzyme testing
• es6 short hand property names usage
• 3 different ways of dispatching actions (ex: CoursesPage)

Pluralsight Admin with Redux and Thunk

• mock api pattern usage
• thunk usage

Productivity App with Flux and Redux

References

• https://app.pluralsight.com/library/courses/flux-redux-mastering
• https://github.com/danielstern/flux-redux

Worth Noting

• localStorage usage
• redux middleware usage