diff --git a/community-resources.md b/community-resources.md index bc729eb..9c9c509 100644 --- a/community-resources.md +++ b/community-resources.md @@ -51,6 +51,10 @@ https://github.com/tuchk4/awesome-create-react-app A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool. +- **Planet React** + https://www.planet-react.org/ + A blog aggregator that collects posts from dozens of blogs written by members of the React community. An excellent resource. + #### People diff --git a/es6-features.md b/es6-features.md index e87dce3..6b85c03 100644 --- a/es6-features.md +++ b/es6-features.md @@ -251,4 +251,8 @@ - **A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers** http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/ - A useful introduction to the various module formats and module tools \ No newline at end of file + A useful introduction to the various module formats and module tools + +- **History of Javascript: Evolution of JS Modularity** + https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity + A well-researched article that recounts the history and development of Javascript module definition approaches \ No newline at end of file diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 008e72d..11891fa 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -89,3 +89,11 @@ A great video to understand the differences between MobX and Redux. - **Redux vs MobX** https://medium.com/@himrc/redux-vs-mobx-a42c8950f3 Some quick pros and cons of each, links to other discussions, and thoughts on when to use them. + +- **ReactConf 2017: MobX vs Redux: Comparing the Opposing Paradigms** + https://www.youtube.com/watch?v=76FRrbY18Bs&index=8&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0 + A fantastic presentation by Preethi Kasireddy. She compares several aspects of Redux and MobX, the general principles behind each, and discusses the pros/cons/tradeoffs in using them. + +- **Redux or MobX: What I learned after refactoring a medium-sized React app** + https://dannyherran.com/2017/03/react-redux-mobx-takeaways/ + A useful list of takeaways, pros and cons of each library and the impact on an existing React application. \ No newline at end of file diff --git a/react-ajax.md b/react-ajax.md index b521c5b..7ca03cb 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -5,6 +5,10 @@ - **AJAX Requests in React: How and Where to Fetch Data** https://daveceddia.com/ajax-requests-in-react/ An overview of where AJAX requests fit into React usage. + +- **How to make AJAX requests in React?** + https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1 + A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status. - **React AJAX Best Practices** http://andrewhfarmer.com/react-ajax-best-practices/ @@ -23,6 +27,8 @@ Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries. + + #### Request Implementation Examples - **Implementing React Redux with GraphQL** diff --git a/react-architecture.md b/react-architecture.md index d3b3bce..43fe744 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -202,4 +202,14 @@ - **10 React mini-patterns** https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 - A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display. \ No newline at end of file + A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display. + + + +#### React Architecture + +- **State Architecture Patterns in React** + https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6 + https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89 + https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391 + A multi-part series that discusses several variations on component and state architecture in detail, with thoughts on the pros and cons of each. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 912f4e6..b79f553 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -68,6 +68,10 @@ https://gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3 My suggested approach for organizing render function logic for clarity and readability +- **Simplify complex React components with generators** + https://nvbn.github.io/2017/03/14/react-generators/ + An interesting alternative to the usual if/else-type logic for conditionally rendering components, by using ES6 generators to yield the right pieces to render. + #### React Component Children @@ -91,6 +95,15 @@ http://mxstbr.blog/2017/02/react-children-deepdive/ An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified. Includes several examples and demos. +- **The "Forwarded Refs" pattern** + https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424 + An example of the "forwarded refs" pattern, where a parent component passes a callback through one or more layers of children, it's used as a `ref` callback, and the parent receives the nested DOM element reference directly. + +- **React component composition cheatsheet** + https://github.com/xat/react-component-composition-cheatsheet + A useful list of ways to combine components together + + #### React Component Lifecycle @@ -348,7 +361,9 @@ https://daveceddia.com/open-modal-in-react/ An excellent example of how to approach rendering modals in React, by controlling them with props - +- **Modal window in React from scratch** + https://peteris.rocks/blog/modal-window-in-react-from-scratch/ + Walks through creating a Modal component with styling and display logic #### Other Component Patterns @@ -373,6 +388,10 @@ https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b Examples of using Ramda functions to compose together components +- **Composing React Components with Ramda** + https://medium.com/let-s-learn/lets-learn-composing-react-components-with-ramda-5db457997554 + Another set of examples showing how to use composition of small functional components to create a larger set of behaviors. + - **"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 diff --git a/react-forms.md b/react-forms.md index 2121197..730f73a 100644 --- a/react-forms.md +++ b/react-forms.md @@ -93,6 +93,10 @@ https://goshakkk.name/array-form-inputs/ Covers how to build a form that can add and remove entries dynamically, with examples. +- **How to handle forms with just React** + https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f + Describes a different approach for reading and managing form data, besides the usual "controlled inputs" pattern, based on the Javascript FormData object. + #### Form Validation diff --git a/react-implementation.md b/react-implementation.md index c5c1c22..2cfef50 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -117,7 +117,12 @@ - **React Internals** https://zackargyle.github.io/react-internals-slides/#/ An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations. - + + - **Preact Internals** + https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205 + https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b + A series of posts that walk through the Preact codebase and explain its implementation, as well as the component model. + #### React Fiber @@ -135,4 +140,8 @@ - **Why, What, and How of React Fiber** https://www.youtube.com/watch?v=crM1iRVGpGQ - Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. \ No newline at end of file + Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. + +- **ReactConf 2017: A Cartoon Intro to Fiber** + https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0 + A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 6fb626b..ad7984a 100644 --- a/react-performance.md +++ b/react-performance.md @@ -250,4 +250,7 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Performance Optimizations in Redux's `mapStateToProps`** http://cmichel.io/performance-optimizations-in-redux-mapstatetoprops/ Some quick tips on how to properly cache and memoize selectors for use in `mapState` functions - \ No newline at end of file + +- **Surprising polymorphism in React applications** + https://medium.com/@bmeurer/surprising-polymorphism-in-react-applications-63015b50abc + A Chrome V8 engine developer digs into the nitty-gritty details of how common Redux reducer patterns result in less-optimized behavior from the JS engine running the code. \ No newline at end of file diff --git a/react-redux-testing.md b/react-redux-testing.md index 0537aa6..3c191d1 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -182,6 +182,14 @@ https://hackernoon.com/low-effort-high-value-integration-tests-in-redux-apps-d3a590bd9fd5 A discussion of the benefits of unit tests vs integration tests, with examples of how to test the various aspects of a Redux app +- **Testing React/Redux Applications** + https://github.com/leocristofani/testing-react-redux-applications + Several useful resources for testing, including tips/guidelines, a sample application with tests, and links to more resources. + +- **React + TDD = Love** + https://medium.com/@admm/test-driven-development-in-react-is-easy-178c9c520f2f + A tutorial that walks through a TDD-based approach to building components in an application. + #### General Testing, Tools, and Setup diff --git a/react-state-management.md b/react-state-management.md index 2fcea33..9b68aa5 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -50,6 +50,10 @@ - **How to Work with and Manipulate State in React** https://www.sitepoint.com/work-with-and-manipulate-state-in-react/ Covers how to access and update state in components, the difference between state and props, and working with stateless components. + +- **Lowest Common Ancestor** + https://blog.embermap.com/lowest-common-ancestor-fbf5d5313a1 + An article that discusses the principle of keeping shared state at the "lowest common ancestor" of the components that need it. Actually talks about Ember, but the concepts are completely applicable to React as well. #### Using `setState` @@ -84,4 +88,9 @@ - **Functional `setState` is the future of React** https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b - Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition \ No newline at end of file + Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition + +- **Does React have a `setState` problem? / `setState() Gate: Navigating Behavior Confusion** + https://twitter.com/i/moments/842710066826530816 + https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 + Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it. That spawned a large Twitter thread arguing the idea. Elliott later posted an article explaining his concerns in detail. Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index e4178f1..a7f2435 100644 --- a/react-styling.md +++ b/react-styling.md @@ -83,6 +83,10 @@ https://github.com/MicheleBertoli/css-in-js A repository that contains implementation comparisons between many different CSS-in-JS libraries +- **Comparing CSS in JS Solutions** + http://ludovf.net/blog/comparing-css-in-js-solutions/ + An overview of the various CSS-in-JS libraries and how their implementations differ. + #### Style Libraries diff --git a/redux-architecture.md b/redux-architecture.md index 9e30887..af8f9a7 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -41,10 +41,6 @@ https://blog.boldlisting.com/so-youve-screwed-up-your-redux-store-or-why-redux-makes-refactoring-easy-400e19606c71 Describes some useful practices for organizing Redux actions, reducers, and selectors. -- **How we reduced boilerplate and handled asynchronous actions with Redux** - https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/ - A look at conventions that have helped the Algolia team write Redux apps. - - **10 Tips for Better Redux Architecture** https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44 A great article covering when and why to use Redux, benefits, and several tips for a better application architecture. @@ -309,4 +305,12 @@ - **Scaling your Redux App with Ducks** https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be - An overview of a modified version of the "ducks" architecture, with the contents for a given feature in a folder instead of a single file. \ No newline at end of file + An overview of a modified version of the "ducks" architecture, with the contents for a given feature in a folder instead of a single file. + +- **Implementing Redux is tedious. But it doesn't have to be.** + https://medium.com/@jeswin/implementing-redux-is-tedious-but-it-doesnt-have-to-be-33702a1fb1dd + Describes another "minimal Redux" variation. Definitely not "idiomatic Redux" usage, but a technically valid implementation. Some discussion of tradeoffs in the comments. + +- **How we reduced boilerplate and handled asynchronous actions with Redux** + https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/ + A look at conventions that have helped the Algolia team write Redux apps. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index 1a20321..8de81e4 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -66,6 +66,14 @@ http://kyleshevlin.com/state-snapshots-in-redux/ Describes a useful technique for saving copies of state slices on command, and re-applying those copies at a later point to ensure a known starting point for further actions. +- **"Problems with Flux"** + http://www.code-experience.com/problems-with-flux/ + Discusses the idea of having all state updates for an action listed in one place, vs spread throughout the store. Written shortly after the release of Redux, but definitely relevant. + +- **Redux Tree** + https://blog.shakacode.com/redux-tree-efc9e3d22d6e + Looks at structuring a reducer/state tree as "branches" and "leaves", and introduces the idea of an "interaction" to encapsulate all related state changes for a given action, with a library to implement the idea. + #### Selectors and Normalization @@ -122,6 +130,10 @@ - **Dissecting Twitter's Redux Store** https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1 An informative look at the contents of the Redux store for Twitter's new mobile site + +- **Advanced Redux Entity Normalization** + https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 + Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data. #### UI and Widget Implementations diff --git a/redux-without-react.md b/redux-without-react.md index 89ebd39..d0c30fb 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -50,3 +50,6 @@ https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. +- **Explorations in Adapting Redux to C#** + https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/ + An informative look at how AtomicObject has a Redux variant in C# \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 54a796f..4ab18e5 100644 --- a/static-typing.md +++ b/static-typing.md @@ -96,6 +96,10 @@ - **Better docs and static analysis** https://blog.scottnonnenberg.com/better-docs-and-static-analysis/ A walk through setting up Flow, some possible problems you might encounter, and ways to customize and improve the typing process. + +- **Flow type cheat sheet** + http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/ + A comprehensive list of built-in Flow types #### React, Redux, and Static Types diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 6546370..be6023a 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -74,6 +74,10 @@ https://github.com/jmblog/how-to-optimize-momentjs-with-webpack Tips on using IgnorePlugin and ContextReplacementPlugin to strip out uneeded locales from Moment +- **Declaratively Rendering Earth in 3D, Part 1: Building a Cesium + React App with Webpack** + http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ + Shows how to configure Webpack to load the Cesium 3D globe library, and how to set up a Webpack config that uses DllPlugin to build a separate bundle for Cesium. + #### Code Splitting and Chunking @@ -217,6 +221,10 @@ - **"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. + +- **Hot reload all the things!** + https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0 + A tutorial that shows how to use Webpack and HMR to hot-reload both front-end and back-end code for faster development. #### Other Tips and Examples diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 1e0191f..04eb951 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -210,6 +210,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172 Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments. +- **Webpack 2 Loader Variations** + http://andrewhfarmer.com/webpack-2-loader-variations/ + A clear and informative overview of the various equivalent ways to write the loader-related parts of a Webpack 2 config file. + #### Webpack Configuration Utilities