Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.

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
  3. CSS Modules
  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

About

Code from various React, Redux, Webpack, etc tutorials

Resources

Releases

No releases published

Packages

No packages published