React Learning

This is code for tutorials I do as I learn React et al. Uses Webpack, React Hot Loader, React 0.14, Babel 6, ES6.

Tutorials / Examples

1. Webpack / Hot Loader setup
2. React
3. React documentation - Tutorial - Comments
4. SurviveJS Online Book - Kanban App
5. React documentation - Thinking in React
6. Redux
7. Redux documentation - Basics - Todo List
8. Redux documentation - Advanced - Reddit API
9. Redux examples - TodoMVC
10. React Router
11. React Router documentation - Basics

Styling Comparison

I took some existing CSS and HTML and created some example code for 3 additional different styling methods: Inline Style in JS, CSS Modules, and Radium.

NOTE: the original CSS and HTML was done by my co-workers-- it is not my own code.

1. CSS Stylesheet (original)
   • Uses normal CSS (Sass) stylesheets
   • CSS classes are set using the className attribute of React elements
2. Inline Style in JS
   • Style information is put inside a Javascript object instead of CSS
   • Doesn't support :hover or other pseudo selectors
   • Doesn't support media queries
   • https://facebook.github.io/react/tips/inline-styles.html
   • http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html
   • https://www.youtube.com/watch?v=ERB1TJBn32c
3. CSS Modules
   • CSS is used but definitions are local to a module
   • A CSS module is created for each Javascript module
   • The Webpack CSS loader transforms the local CSS modules into global BEM-like CSS definitions
   • http://glenmaddern.com/articles/css-modules
   • https://www.youtube.com/watch?v=zR1lOuyQEt8
   • https://github.com/css-modules/webpack-demo
   • Doesn't have individual variables (use specific classes with composition or global Sass variables instead) css-modules/css-modules#22
   • Use of child selectors goes against the encapsulation philosophy of CSS modules css-modules/css-modules#21
   • It's possible to compose with external libraries like font awesome css-modules/css-modules#58 (comment)
4. Radium
   • This is like using #2 Inline Styles but it fixes some problems.
   • Supports :hover, :focus, and :active
   • Supports media queries
   • Supports using an array of styles
   • http://stack.formidable.com/radium/
   • Not sure how to handle child selectors (same for regular inline style)
   • Doesn't support :before, :after, :checked, or :last Radium FAQ Stack Overflow answer

Testing

1. Simple Mocha React example
2. Karma Mocha Chai React example

My experiments

1. Reddit w/ Router, SCSS, DevTools
2. Comments w/ Redux, Router, Bootstrap, DevTools, Parse API

Demo

http://saltycrane.github.io/react-learning/

Other Resources

• You Don't Know JS: ES6 & Beyond
• A cartoon guide to Flux
• https://github.com/happypoulp/redux-tutorial
• Understanding Redux (or, How I Fell in Love with a JavaScript State Container)
• React Conf Europe 2015 videos
• Dan Abramov's Getting Started with Redux course