diff --git a/basic-concepts.md b/basic-concepts.md index 09b89b9..e041d55 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -70,6 +70,10 @@ - **React FAQ** https://github.com/timarney/react-faq A collection of links to help answer your questions about React, including how to get started + +- **Front-End Developer Handbook** + https://www.frontendhandbook.com/ + A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. #### General Suggestions for Learning @@ -101,4 +105,8 @@ - **Redux vs MobX vs Flux vs... Do you even need that?** http://goshakkk.name/redux-vs-mobx-vs-flux-etoomanychoices/ - Advice on avoiding choice overload when learning a toolset like React, by simplifying and just focusing on one new thing at a time. \ No newline at end of file + Advice on avoiding choice overload when learning a toolset like React, by simplifying and just focusing on one new thing at a time. + +- **How to avoid Javascript fatigue and sleep well at night** + https://www.javascriptfatigue.club/blog/2016/11/29/how-to-avoid-javascript-fatigue-and-sleep-well-at-night + A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve \ No newline at end of file diff --git a/community-resources.md b/community-resources.md index b6b8c26..d8d6f38 100644 --- a/community-resources.md +++ b/community-resources.md @@ -113,6 +113,10 @@ https://daveceddia.com/newsletter/ Weekly-ish articles in your inbox about React, JavaScript, and more. +- **React Native Newsletter** + http://reactnative.cc/ + Occasional summary of React Native news, articles, issues & pull requests, + #### Online Course Sites diff --git a/es6-features.md b/es6-features.md index e016c05..d205032 100644 --- a/es6-features.md +++ b/es6-features.md @@ -107,9 +107,7 @@ https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm A dive into how generators work, and how they can be used to handle async behavior -- **ES6 Promise Anti-Patterns and Best Practices** - http://www.datchley.name/promise-patterns-anti-patterns/ - Some advice for good usage of Promises + - **A Practical Introduction to ES6 Generator Functions** http://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html @@ -119,6 +117,38 @@ http://goshakkk.name/javascript-generators-understanding-sample-use-cases/ A simple thinking pattern for easily understanding generators, plus 3 practical applications. + +#### Promises + +- **Javascript Promises for Dummies** + https://scotch.io/tutorials/javascript-promises-for-dummies + An introduction to understanding promises + +- **Javascript Promises... in Wicked Detail** + http://www.mattgreer.org/articles/promises-in-wicked-detail/ + Explains what promises are and how they work by building a promise implementation from scratch + +- **Javascript Promises: an Introduction** + https://developers.google.com/web/fundamentals/getting-started/primers/promises + An explanation of what promises are, what they're useful for, terms, and related APIs + +- **ES6 Promises in Depth** + https://ponyfoo.com/articles/es6-promises-in-depth + A detailed description of promises, what they are, and how to use them + +- **Awesome Promises** + https://github.com/wbinnssmith/awesome-promises + Links to tutorials, articles, and other resources on promises + +- **We have a problem with promises** + https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html + Describes some common mistakes while using promises, and how to avoid them + +- **ES6 Promise Anti-Patterns and Best Practices** + http://www.datchley.name/promise-patterns-anti-patterns/ + Some advice for good usage of Promises + + #### Techniques @@ -161,3 +191,7 @@ - **How Javascript Modules Work - from Past to Present** http://www.penta-code.com/how-javascript-modules-work-from-past-to-present/ An overview of the different approaches that have been used to load Javascript modules over time. + +- **Understanding the State of Javascript Modules** + http://georgemauer.net/2016/11/25/how-js-modules-work.html + A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why. \ No newline at end of file diff --git a/javascript-resources.md b/javascript-resources.md index d0cfb0c..caecf00 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -80,6 +80,10 @@ While this list is primarily focused on learning React and Redux, and generally https://devfreebooks.org/javascript/ A list of free online books for Javascript +- **DOM Enlightenment** + http://domenlightenment.com/ + A deep look at how to interact with the DOM from Javascript, without using a library or a framework. + #### Interactive Exercises diff --git a/react-ajax.md b/react-ajax.md index efc1a17..7395f74 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -30,4 +30,8 @@ - **Slaying a UI Antipattern in Fantasyland** https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a - Examples of how to handle the common "loading/no data/data" issue with some static typing and FP principles. \ No newline at end of file + Examples of how to handle the common "loading/no data/data" issue with some static typing and FP principles. + +- **Handling AJAX In Your React Application with Agility** + https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 + Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 2cc079f..9ed12a8 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -100,6 +100,10 @@ https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React. +- **"People are reading way too much into 'presentational' vs 'container'"** + https://twitter.com/dan_abramov/status/802569801906475008 + Dan Abramov follows up his article by emphasizing that "presentational" and "container" was just a pattern he had noticed, rather than an approach that _must_ be followed + - **Leveling Up with React: Container Components** https://css-tricks.com/learning-react-container-components/ Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data. @@ -184,6 +188,10 @@ https://blog.codeminer42.com/annotations-about-react-higher-order-components-e3561bc7c27a An explanation of what HOCs are, what they can be used for, and when to use them. +- **Single-Prop HOCs - Better Composition in React** + https://www.okgrow.com/posts/compose-react-sphoc + Thoughts and examples of composing multiple small focused HOCs together into a final combined HOC + #### Other Component Patterns @@ -214,3 +222,7 @@ - **"What is the ideal way to pass data to a callback prop?** https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38 Discussion and examples of various ways to pass data to callbacks between children and parents + +- **React and third-party libraries** + http://krasimirtsonev.com/blog/article/react-third-party-library-integration + Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin \ No newline at end of file diff --git a/react-forms.md b/react-forms.md index 776b1d0..3351499 100644 --- a/react-forms.md +++ b/react-forms.md @@ -99,4 +99,15 @@ - **Form Validation as a Higher Order Component** https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0 https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d - A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic \ No newline at end of file + A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic + +- **Form recipe: Conditionally disabling the Submit button** + http://goshakkk.name/form-recipe-disable-submit-button-react/ + Some simple examples of validating data from controlled inputs + + +#### Other + +- **Creating new fields and widgets for Mozilla's react-jsonschema-form** + https://jeffersonheard.github.io/2016/11/creating-new-fields-and-widgets-for-mozillas-react-jsonschema-form/ + Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index a870780..2966fff 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -90,6 +90,10 @@ https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm Digs into the behavior of React's setState method, and discusses when it may be synchronous vs asynchronous +- **React Internals: Through the Lens of a Renderer** + https://www.youtube.com/watch?v=VVxQAoNK_XQ + A talk exploring how a React renderer works, and how to implement a tiny renderer + #### React Fiber diff --git a/react-native.md b/react-native.md index 3953b39..6bc2d6c 100644 --- a/react-native.md +++ b/react-native.md @@ -3,6 +3,14 @@ #### Tutorials +- **React Native Express** + http://www.reactnativeexpress.com/ + A full set of tutorials for everything related to React Native + +- **Awesome React Native Education** + https://github.com/hsavit1/Awesome-React-Native-Education + An overview of the React Native ecosystem, in a similar style to react-redux-links + - **React Native Workshop** https://rangle-io.gitbooks.io/react-native-workshop/content/ An introduction to React Native's concepts, in conjunction with Flexbox and Redux @@ -18,13 +26,15 @@ - **How to distribute React Native components backed by native code** https://www.benwixen.com/articles/distributing-react-native-components-with-native-code/ A project layout for redistributable components with native code, that includes unit tests and supports automatic linking. + -- **Awesome React Native Education** - https://github.com/hsavit1/Awesome-React-Native-Education - An overview of the React Native ecosystem, in a similar style to react-redux-links #### Specific aspects - **Using iOS Image Picker with React Native** http://goshakkk.name/react-native-camera-roll-image-picker/ Getting an ImagePicker to work on iOS is painful. It's barely documented. This tutorial-style article shows you everything you need to do to finally start asking users for images. + +- **Rapid cross-platform development with React Native** + https://robots.thoughtbot.com/rapid-cross-platform-mobile-development-with-react-native + Thoughts on how React Native enables code reuse and iteration, and a look at using the flexbox-based layout system on various platforms. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 13da19b..88e213e 100644 --- a/react-styling.md +++ b/react-styling.md @@ -74,4 +74,8 @@ - **"Styled Components or Glamor?"** https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor/ - Discussion and comparisons between some different CSS-in-JS libraries \ No newline at end of file + Discussion and comparisons between some different CSS-in-JS libraries + +- **The magic behind styled-components** + http://mxstbr.blog/2016/11/styled-components-magic-explained/ + A look at how the styled-components library uses the new ES6 "tagged template literals" feature to interpolate arguments and build up CSS \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 628f868..c2d4d37 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -221,7 +221,13 @@ http://react.tips/from-react-to-flux-to-redux/ Four implementations of a shopping list application, built with varying approaches to help you see the differences: React/ES5, React/ES6, React/Flux/ES5, React/Redux/ES6. - +- **30 Days of React** + https://www.fullstackreact.com/30-days-of-react/ + A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment. + +- **Create an Instagram-like App with Node.js, React, and Redux** + http://www.eloquentwebapp.com/instagram-app-node-react-redux/ + An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more. #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index 4eb416f..d7a3112 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -75,6 +75,10 @@ http://bpxl-labs.github.io/redux-handbook/ Black Pixel's guidelines for project/app structure and usage +- **Tips for a Better Redux Architecture: Lessons for Enterprise Scale** + https://hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale-civrlqhuy0keqc6539boivk2f + Thoughts on good patterns and approaches in a large Redux app, including use of action creators instead of `dispatch` in components, module/container file structure, using sagas for flow control, and more. + #### Redux Best Practices @@ -127,9 +131,15 @@ http://goshakkk.name/redux-antipattern-mapstatetoprops/ An analysis of a somewhat common Redux anti-pattern, where `mapStateToProps` is doing too little, shifting all the domain knowledge into the component that should not be aware of it. +- **Learning and scaling a React/Redux app with a distributed team** + https://devblog.xero.com/learning-and-scaling-a-react-redux-app-with-a-distributed-team-e4c397def187 + Lessons learned from working with a large application with many features, including use of common components, sagas, project structure, and utility libraries + #### Encapsulation and Reusability +**Related topics**: [Redux Techniques - Selectors](./redux-techniques.md#selectors-and-normalization) + - **Scalable Frontend with Elm or Redux** https://github.com/slorber/scalable-frontend-with-elm-or-redux A repo containing ongoing discussion about ways to handle fully encapsulated reusable chunks of logic and components in Redux, with a number of submitted approaches being compared. @@ -166,6 +176,7 @@ http://randycoulman.com//blog/2016/09/13/encapsulating-the-redux-state-tree/ http://randycoulman.com/blog/2016/09/20/redux-reducer-selector-asymmetry/ http://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/ + http://randycoulman.com/blog/2016/11/29/globalizing-redux-selectors A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches - **Redux State Keys - A predictable yet dynamic substate** @@ -187,6 +198,10 @@ - **Redux Stack: Modular Redux Configuration** https://medium.com/@jondot/redux-stack-modular-redux-configuration-ec96412a2262 Discussion of a small library that tries to make it easier to hook together different Redux addons. + +- **Scoped Selectors for Redux Modules** + http://www.datchley.name/scoped-selectors-for-redux-modules/ + A follow-on to Randy Coulman's series on local vs global selectors, discussing tradeoffs in approaches for defining and managing selectors. #### Variations on Redux Architectures diff --git a/redux-middleware.md b/redux-middleware.md index d30e07c..aeb9556 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -34,6 +34,10 @@ https://medium.com/@rajaraodv/using-middlewares-in-react-redux-apps-f7c9652610c6 A description of what a middleware is, and how it works in Redux +- **ReactCasts #6: Redux Middleware** + https://www.youtube.com/watch?v=T-qtHI1qHIg + A screencast that describes how middleware fit into Redux, their uses, and how to implement a custom middleware + #### Middleware Techniques @@ -56,4 +60,8 @@ - **You Aren't Using Redux Middleware Enough** https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6 - Suggestions for using middleware to solve a number of interesting use cases \ No newline at end of file + Suggestions for using middleware to solve a number of interesting use cases + +- **Defining user on-boarding flows with Redux middleware** + https://medium.com/@JohnRandom/defining-user-on-boarding-flows-with-redux-middlewares-217885acbafc + Demonstrates implementing an on-boarding feature by implementing a Redux middleware to track user behavior and dispatch actions in response. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 63d595a..17afbb2 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -35,6 +35,10 @@ https://daveceddia.com/what-is-a-thunk/ A quick explanation for what the word "thunk" means in general, and for Redux specifically.. +- **"Controversial opinion: redux-thunk is too powerful"** + https://twitter.com/intelligibabble/status/800103510624727040 + https://twitter.com/dan_abramov/status/800310164792414208 + Some discussion on the pros and cons of redux-thunk's flexibility and usage, as well as possible issues with multiple dispatches in a row. #### Sagas diff --git a/redux-techniques.md b/redux-techniques.md index 328b336..85bec15 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -48,6 +48,8 @@ #### Selectors and Normalization +**Related topics**: [Redux Architecture - Encapsulation](./redux-architecture.md#encapsulation-and-reusability] + - **Querying a Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. @@ -76,6 +78,15 @@ http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. + +- **"How do you add/remove to a redux store generated with normalizr?** + http://stackoverflow.com/questions/34954726/how-do-you-add-remove-to-a-redux-store-generated-with-normalizr + Stack Overflow discussion of how to handle updates to normalized data + +- **"Any deep-dive/advanced tutorials on reselect?"** + https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ + Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions + #### UI and Widget Implementations @@ -100,6 +111,10 @@ https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled. +- **Animating with React, Redux, and D3** + https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b + Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them. + #### Redux and Forms diff --git a/redux-tutorials.md b/redux-tutorials.md index 879b74a..d59b7ae 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -137,9 +137,6 @@ https://decembersoft.com/posts/redux-hero-part-4-every-hero-needs-a-villain-a-fun-introduction-to-redux-saga-js/ An introduction to Redux and related libraries through building a small RPG-style game -- **An Adventure in Redux: building redux-adventure** - http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html - Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 - **Building a Chat App with React, Redux, and PubNub** https://www.pubnub.com/blog/2016-06-14-getting-started-with-pubnub-and-react/ @@ -164,22 +161,40 @@ https://medium.com/@kensodev/screencast-1-1-session-building-a-react-redux-application-from-scratch-f888c1e74c6 A 2-hour screencast demonstrating building a Redux app from the ground up -- **Building Redux in TypeScript with Angular 2** - http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ - An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application - -- **Redux without React - State Management in Vanilla Javascript** - https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ - A tutorial teaching Redux usage with a plain JS UI layer on top - - **Build a Media Library With React, Redux, and Redux-Saga** https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1 + https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2 A two-part tutorial that builds an image and video display and preview app - **Practical Redux** http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/ http://blog.isquaredsoftware.com/2016/11/practical-redux-part-3-project-planning-and-setup/ - An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample sample application, based on the MekHQ application for managing Battletech campaigns. + An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample application, based on the MekHQ application for managing Battletech campaigns. + +- **A Practical Guide to Redux** + http://lorenstewart.me/2016/11/27/a-practical-guide-to-redux/ + A tutorial that introduces the key concepts and usage of Redux through the code in a small sample app. + + + +#### Using Redux with non-React Frameworks + +- **Redux without React - State Management in Vanilla Javascript** + https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ + A tutorial teaching Redux usage with a plain JS UI layer on top + +- **An Adventure in Redux: building redux-adventure** + http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html + Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 + +- **Building Redux in TypeScript with Angular 2** + http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ + An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application + +- **Managing State in Aurelia: How to Use Aurelia with Redux** + https://www.sitepoint.com/managing-state-aurelia-with-redux/ + A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. + #### Redux Implementation Walkthroughs diff --git a/static-typing.md b/static-typing.md index 105a196..7741fed 100644 --- a/static-typing.md +++ b/static-typing.md @@ -32,9 +32,21 @@ https://basarat.gitbooks.io/typescript/content/ An online book that digs into numerous TypeScript topics + +- **Immutable.js Records in TypeScript** + https://spin.atomicobject.com/2016/11/30/immutable-js-records-in-typescript/ + Examples of setting up typing for custom classes based on Immutable.js's Record class. #### Flow +- **The Fundamentals of Flow in 10-ish Minutes** + https://www.youtube.com/watch?v=xWMuAUbXcdQ + A short presentation that looks at what Flow is, benefits, and how to use it + +- **Go with the Flow - A Static Type Checking Tool for Javascript** + https://www.theodo.fr/blog/2016/11/go-with-the-flow-a-static-type-checking-tool-for-javascript/ + A quick introduction to Flow, its usage, and some comparisons with Typescript. + - **Setting up Flow when you've already got Babel in place** https://medium.freecodecamp.com/using-flow-with-babel-c04fdca8d14d Instructions for integrating Flow into an existing project diff --git a/using-react-with-es6.md b/using-react-with-es6.md index c063378..12c481b 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -50,6 +50,9 @@ https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l Dan Abramov comments, giving his thoughts on how to handle method binding. +- **Do you even need that bind?** + https://swizec.com/blog/do-you-even-need-that-bind/swizec/7247 + A dive through React's implementation of event handling, and why callback binding is needed #### Method Binding Utilities diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 448d97a..364f5ac 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -92,6 +92,15 @@ http://brotzky.co/blog/a-beginners-step-by-step-guide-to-code-splitting-with-webpack-2-and-react-router/ An excellent guide to concepts and configuration needed for code splitting. +- **Speeding up Webpack performance with parallel builds** + http://tech.trivago.com/2015/12/15/parallel-webpack/ + Describes a tool called `parallel-webpack`, which can build multiple entry points in multiple formats in parallel. + +- **Building Vendor and Feature Bundles with Webpack** + http://odetocode.com/blogs/scott/archive/2016/12/01/building-vendor-and-feature-bundles-with-webpack.aspx + Demonstrates using DllPlugin to build a vendor bundle, and generating multiple bundles for different features by dynamically building up multiple entry points. + + #### Hot Module Replacement - **Webpack and Hot Module Replacement** @@ -136,6 +145,14 @@ - **Webpack Hot Reloading and React** https://ctheu.com/2015/12/29/webpack-hot-reloading-and-react-how/ An explanation of how Hot Reloading works, and how the various pieces fit together. + +- **ReactCasts #7: Hot Module Replacement in Create-React-App** + https://www.youtube.com/watch?v=hcl3lNjgj-E + A screencast talking about what HMR is, and two ways to add it to projects created with Create-React-App + +- **"Difference between Webpack HMR and React-Hot-Loader?"** + https://github.com/facebookincubator/create-react-app/issues/1063#issuecomment-261788083 + Dan Abramov clarifies that HMR is the API and capability that Webpack gives you, while React-Hot-Loader is a specialized tool that uses the HMR API to automatically add HMR handling to React code. #### Other Tips and Examples @@ -174,4 +191,19 @@ - **Webpack Map Entity Loader** http://drhayes.io/secret-game/map-entity-loader.html - A small example of writing a custom Webpack loader for game data \ No newline at end of file + A small example of writing a custom Webpack loader for game data + + +#### Webpack Tools + +- **Webpack Dashboard** + https://github.com/FormidableLabs/webpack-dashboard + A CLI dashboard for your webpack dev server + +- **Webpack Visualizer** + https://chrisbateman.github.io/webpack-visualizer/ + A tool and plugin to visualize the (pre-minified) sizes of files in a Webpack bundle + +- **Webpack Bundle Analyzer** + https://github.com/th0r/webpack-bundle-analyzer + Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap, and can parse minified bundles to show true minified (and gzipped) sizes diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 46c1ee1..0171197 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -171,6 +171,3 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://github.com/chrisvfritz/maintainable-webpack-config An experiment to make Webpack configs testable and maintainable -- **Webpack Dashboard** - https://github.com/FormidableLabs/webpack-dashboard - A CLI dashboard for your webpack dev server