Code from various React, Redux, Webpack, etc tutorials
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
1.0-webpack-react-hot-loader
2.1-react-tutorial-comments
2.2-survivejs-kanban
2.3-thinking-in-react
3.1-redux-basics-todo
3.2-redux-advanced-reddit
3.3-redux-todomvc
4.1-react-router-basics
5.1-contacts-css
5.2-contacts-inline-style
5.3-contacts-css-modules
5.4-contacts-radium
6.1-mocha
6.2-karma-mocha-chai
9.1-mash
9.2-my-comments
dist
.agignore
.eslintrc
.gitignore
README.md
deploy

README.md

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