SurviveJS - Webpack and React: From apprentice to master

Table of Contents......Page 3
 What is React?......Page 8
 How is This Book Organized?......Page 9
 What is Kanban?......Page 10
 How to Approach the Book?......Page 11
 Book Versioning......Page 12
 Getting Support......Page 13
 Acknowledgments......Page 14
I Setting Up Webpack......Page 16
  Task Runners and Bundlers......Page 17
  Make......Page 18
  Grunt......Page 19
  Gulp......Page 20
  Browserify......Page 22
  Webpack......Page 23
  JSPM......Page 24
  Why Use Webpack?......Page 25
  Module Formats Supported by Webpack......Page 26
  Conclusion......Page 28
  Setting Up the Project......Page 29
  Installing Webpack......Page 30
  Directory Structure......Page 31
  Setting Up Assets......Page 32
  Setting Up Webpack Configuration......Page 33
  Adding a Build Shortcut......Page 34
  Setting Up webpack-dev-server......Page 35
  Refreshing CSS......Page 42
  Setting Up Initial CSS......Page 43
  Enabling Sourcemaps......Page 44
  Avoiding npm install by Using npm-install-webpack-plugin......Page 45
  Conclusion......Page 46
  What is React?......Page 47
  Babel......Page 50
  Defining Your Own Babel Presets......Page 55
  Alternative Loader Declarations......Page 56
  Developing the First React View......Page 57
  Activating Hot Loading for Development......Page 59
  React Component Styles......Page 61
  Conclusion......Page 62
II Developing a Kanban Application......Page 63
  Initial Data Model......Page 64
  Connecting Data with App......Page 65
  Adding New Items to the List......Page 67
  Improving Component Hierarchy......Page 71
  Editing Notes......Page 74
  Removing Notes......Page 79
  Styling Application......Page 82
  Understanding React Components......Page 87
  React Component Conventions......Page 89
  Conclusion......Page 90
  Introduction to Flux......Page 91
  Porting to Alt......Page 93
  Defining a Store for Notes......Page 95
  Gluing It All Together......Page 98
  Implementing Persistency over localStorage......Page 102
  Using the AltContainer......Page 105
  Alternative Implementations......Page 107
  Conclusion......Page 108
  Extracting Lanes......Page 109
  Modeling Lane......Page 112
  Making Lanes Responsible of Notes......Page 115
  Implementing Edit/Remove for Lane......Page 123
  Styling Kanban Board......Page 133
  On Namespacing Components......Page 135
  Conclusion......Page 136
  Setting Up React DnD......Page 138
  Preparing Notes to Be Sorted......Page 139
  Allowing Notes to Be Dragged......Page 140
  Developing onMove API for Notes......Page 143
  Adding Action and Store Method for Moving......Page 145
  Implementing Note Drag and Drop Logic......Page 147
  Dragging Notes to Empty Lanes......Page 150
  Conclusion......Page 156
  Optimizing Build Size......Page 157
  Splitting app and vendor Bundles......Page 160
  Generating index.html through html-webpack-plugin......Page 165
  Cleaning the Build......Page 167
  Separating CSS......Page 168
  Deployment......Page 174
  Conclusion......Page 175
III Advanced Techniques......Page 176
  Levels of Testing......Page 177
  Setting Up Webpack......Page 180
  Testing Kanban Components......Page 187
  Testing Kanban Stores......Page 194
  Conclusion......Page 198
  propTypes and defaultProps......Page 199
  Typing Kanban......Page 201
  Type Checking with Flow......Page 205
  Converting propTypes to Flow Checks......Page 209
  Babel Typecheck......Page 213
  TypeScript......Page 214
  Conclusion......Page 215
  Webpack and JSHint......Page 216
  Setting Up ESLint......Page 218
  Customizing ESLint......Page 222
  Linting CSS......Page 226
  Checking JavaScript Style with JSCS......Page 227
  Conclusion......Page 230
  Anatomy of a npm Package......Page 231
  Understanding package.json......Page 232
  npm Workflow......Page 234
  Library Formats......Page 239
  npm Lifecycle Hooks......Page 241
  Keeping Dependencies Up to Date......Page 242
  Conclusion......Page 243
  Old School Styling......Page 244
  CSS Methodologies......Page 245
  Less, Sass, Stylus, PostCSS, cssnext......Page 246
  React Based Approaches......Page 252
  CSS Modules......Page 257
  Conclusion......Page 259
Appendices......Page 260
  Directory per Concept......Page 261
  Directory per Component......Page 262
  Directory per View......Page 263
  Conclusion......Page 264
  Modules......Page 266
  Classes......Page 268
  Class Properties and Property Initializers......Page 270
  Functions......Page 272
  Destructuring......Page 275
  Object Shorthands......Page 276
  Conclusion......Page 277
  Implementing a Logging Decorator......Page 278
  Implementing @connect......Page 280
  Decorator Ideas......Page 281
  Conclusion......Page 282
  EPEERINVALID......Page 283
  Module parse failed......Page 284
  Project Fails to Compile......Page 285