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
- Webpack / Hot Loader setup
- React documentation - Tutorial - Comments
- SurviveJS Online Book - Kanban App
- React documentation - Thinking in React
- Redux documentation - Basics - Todo List
- Redux documentation - Advanced - Reddit API
- Redux examples - TodoMVC
- React Router
- React Router documentation - Basics
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.
- CSS Stylesheet (original)
- Uses normal CSS (Sass) stylesheets
- CSS classes are set using the
classNameattribute of React elements
- Inline Style in JS
- Doesn't support
:hoveror other pseudo selectors
- Doesn't support media queries
- CSS Modules
- CSS is used but definitions are local to a module
- The Webpack CSS loader transforms the local CSS modules into global BEM-like CSS definitions
- Doesn't have individual variables (use specific classes with composition or global Sass variables instead) https://github.com/css-modules/css-modules/issues/22
- Use of child selectors goes against the encapsulation philosophy of CSS modules https://github.com/css-modules/css-modules/issues/21
- It's possible to compose with external libraries like font awesome https://github.com/css-modules/css-modules/issues/58#issuecomment-143685707
- This is like using #2 Inline Styles but it fixes some problems.
- Supports media queries
- Supports using an array of styles
- Not sure how to handle child selectors (same for regular inline style)
- Doesn't support
:lastRadium FAQ Stack Overflow answer