├── .gitignore ├── 001-blank.html ├── 002-hello-word.html ├── 003-nesting.html ├── 004-props.html ├── 004.1-collection-rendering.html ├── 005-state.html ├── 005.1-setState.html ├── 006-flux.html ├── 006.1-flux-form.html ├── 006.2-flux-form-broken.html ├── 006.3-flux-enlightenment.html ├── 007-flux-todo ├── actions.js ├── index.html └── store.js ├── 010-router.html ├── 010.1-params.html ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log -------------------------------------------------------------------------------- /001-blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /002-hello-word.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /003-nesting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /004-props.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /004.1-collection-rendering.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /005-state.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /005.1-setState.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /006-flux.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /006.1-flux-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /006.2-flux-form-broken.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /006.3-flux-enlightenment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /007-flux-todo/actions.js: -------------------------------------------------------------------------------- 1 | /** Actions */ 2 | 3 | var TodoActions = Flux.createActions({ 4 | addRecipe: function(text){ 5 | return { 6 | actionType: "ADD_TODO", 7 | text: text 8 | } 9 | }, 10 | kittenLaunch: function(data){ 11 | return { 12 | actionType: "KITTEN_LAUNCH", 13 | data: data 14 | } 15 | } 16 | }); -------------------------------------------------------------------------------- /007-flux-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /007-flux-todo/store.js: -------------------------------------------------------------------------------- 1 | /** Store */ 2 | 3 | _todos = []; 4 | 5 | function addTodo(text){ 6 | _todos.push(text); 7 | } 8 | 9 | var TodoStore = Flux.createStore({ 10 | getTodos: function(){ 11 | return _todos; 12 | } 13 | }, function(payload){ 14 | if(payload.actionType === "ADD_TODO") { 15 | addTodo(payload.text); 16 | TodoStore.emitChange(); 17 | } 18 | if(payload.actionType === "KITTEN_LAUNCH") { 19 | console.log("Kitten Launched! ", payload) 20 | } 21 | }); -------------------------------------------------------------------------------- /010-router.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 27 | 28 | 29 |
30 | 31 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /010.1-params.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 27 | 28 | 29 |
30 | 31 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-flux-concepts 2 | Step by step building the recipes-flux app in react & flux. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-flux-concepts", 3 | "version": "0.0.1", 4 | "description": "Branches of this repo cover the concepts of react and flux in a hands on way", 5 | "main": "index.js", 6 | "scripts": { 7 | "start" : "http-server -p 9009" 8 | }, 9 | "author": "", 10 | "license": "BSD-2-Clause", 11 | "dependencies": { 12 | "mcfly": "0.0.8" 13 | }, 14 | "devDependencies": { 15 | "http-server": "^0.8.0" 16 | } 17 | } 18 | --------------------------------------------------------------------------------