diff --git a/basic-concepts.md b/basic-concepts.md index 768395d..045242a 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -79,7 +79,7 @@ A collection of links to help answer your questions about React, including how to get started - **Front-End Developer Handbook** - https://www.frontendhandbook.com/ + https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/ 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. - **Top Javascript Frameworks and Topics to Learn in 2017** diff --git a/es6-features.md b/es6-features.md index 37b22af..b2c29d0 100644 --- a/es6-features.md +++ b/es6-features.md @@ -118,6 +118,10 @@ http://www.zsoltnagy.eu/the-reflect-api-of-es6/ An overview of the Reflect API, which allows some complex metaprogramming capabilities. +- **Advanced ES6 Destructuring Techniques** + http://untangled.io/advanced-es6-destructuring-techniques/ + Examples of advanced ways to use ES6's destructuring capabilities + #### Generators diff --git a/git-resources.md b/git-resources.md index 124d92c..ce75fab 100644 --- a/git-resources.md +++ b/git-resources.md @@ -83,6 +83,13 @@ https://medium.com/@zlobin/advanced-git-advice-27087a7fbb29 A variety of useful tips and commands. +- **A Note about Git Commit Messages** + http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html + Some quick explanations of how to format Git commit messages, and commands where message formatting matters + +- **Git Commit Good Practices** + https://wiki.openstack.org/wiki/GitCommitMessages + A number of good practices to follow when making commits and writing commit messages ## Specific Techniques diff --git a/node-js-and-npm.md b/node-js-and-npm.md index b55a349..06e1c1f 100644 --- a/node-js-and-npm.md +++ b/node-js-and-npm.md @@ -38,4 +38,8 @@ NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slo - **Understanding NPM** https://unpm.nodesource.com/ - An interactive visualization that is intended to help you understand the role and scope of NPM. \ No newline at end of file + An interactive visualization that is intended to help you understand the role and scope of NPM. + +- **NPM for Beginners: A Guide for Front-End Developers** + https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/ + An excellent introduction to what NPM is, and how to use it for installing and managing package dependencies. \ No newline at end of file diff --git a/project-structure.md b/project-structure.md index bd8af16..a624c3e 100644 --- a/project-structure.md +++ b/project-structure.md @@ -71,6 +71,10 @@ - **When a good plan comes together: React project structure for scaling** http://thereactionary.net/when-a-good-plan-comes-together-react-project-structure-for-scaling/ More discussion of tradeoffs in various structure approaches. + +- **Structuring and Organizing the React Components Directory** + http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/ + Some useful suggestions for folder layout, folder naming, and import handling. #### Project Setup diff --git a/react-ajax.md b/react-ajax.md index a29b25d..fdd10e3 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -56,5 +56,10 @@ http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b - Three articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. + https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 + Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. + +- **Better data fetching with RemoteDataJS** + http://javascriptplayground.com/blog/2016/06/remote-data-js/ + Examples of how to use the author's RemoteDataJS library to manage request state. Helpful to see the list of states it tracks, even if you don't use the library. \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index 1493337..eead7dd 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -94,7 +94,7 @@ - **Thinking Statefully** https://daveceddia.com/thinking-statefully/ Some great examples of how to think in declarative/stateful terms (such as passing an `isOpen` prop to a modal instead of calling `open()` ). - + #### React Best Practices @@ -178,4 +178,16 @@ - **Tips to Learn React + Redux** https://www.robinwieruch.de/tips-to-learn-react-redux/ - An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, and much more. \ No newline at end of file + An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, and much more. + +- **10 Reasons why I moved from Angular to React** + https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react/ + Robin Wieruch gives some good thoughts why he chose to focus on React. A nice overview of some of React's benefits. + +- **Our journey migrating 100K lines of code from AngularJS to React** + https://tech.small-improvements.com/2017/01/25/how-to-migrate-an-angularjs-1-app-to-react/ + The Small Improvements team describes how they implemented an Angular>React migration, starting from the bottom up. + +- **Our Best Practices for Writing React Components** + https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8 + A description of the MuseFind team's approaches for writing components \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 9a8f8fe..e78f388 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -174,6 +174,10 @@ http://erikaybar.name/refactoring-react-extracting-layout-components/ Demonstrates creating reusable components that manage some aspects of styling and layout, such as a button with multiple sizes and colors. +- **Share Code between React and React Apps** + https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665 + An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse, including reusing the same components in both React and React Native apps. + #### Higher-Order Components @@ -289,6 +293,10 @@ https://medium.com/nthrive-analytics/introducing-react-into-an-existing-application-17490841796e Some examples of how to progressively add React components into an existing jQuery-based application and keep them in sync with the rest of the app. +- **How to use D3.js in React** + http://cmichel.io/how-to-use-d3js-in-react/ + An overview of three ways to integrate D3 into a React app: using React to render, using D3 to render, and a hybrid approach. + #### Modal Dialogs diff --git a/react-performance.md b/react-performance.md index 8be30e0..84f821d 100644 --- a/react-performance.md +++ b/react-performance.md @@ -115,6 +115,14 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://hackernoon.com/react-at-60fps-4e36b8189a4c A look at several useful techniques for benchmarking and improving React application performance +- **React is Slow, React is Fast: Optimizing React Apps in Practice** + https://medium.com/@francoisz/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba + Some excellent advice on improving React performance. Covers using React's new Component Profiling capabilities, ways to optimize re-renders, use of Recompose and Reselect, gotchas with JSX and object literals, and more. + +- **Optimizing the Performance of Your React Application** + https://auth0.com/blog/optimizing-react/ + Covers several ways to improve perf, including profiling with the React Perf Addons, using correct keys for lists, and use of `shouldComponentUpdate` and `PureComponent`. + #### Code Splitting and Progressive Apps @@ -135,6 +143,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://medium.com/front-end-hacking/performance-optimizing-a-react-single-page-app-a68985fa72cc https://medium.com/@ryancollinsio/performance-optimizing-a-react-single-page-app-part-2-92a0f0c83202 A series of articles looking at various performance-related topics, including server rendering, asset optimization, code splitting, memoization, and immutable data. + +- **Javascript Start-up Performance** + https://medium.com/dev-channel/javascript-start-up-performance-69200f43b201 + Addy Osmani digs into the issues involved in parsing and compiling JS scripts on load, discusses how to measure performance, and gives advice for lower parse times. #### Immutable Data diff --git a/react-redux-testing.md b/react-redux-testing.md index 2da4f69..59c88e7 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -166,6 +166,14 @@ https://medium.com/@suchipi/the-right-way-to-test-react-components-548a4736ab22 Excellent advice on how to determine a component's "contract", what aspects of that are worth testing, and how to approach testing that contract. +- **Workship Slides: React and Redux Testing** + http://www.slideshare.net/visualengin/workshop-23-reactjs-react-redux-testing + A slideshow that gives a helpful overview of the React Test Utilities and Enzyme to test React components + +- **Testing React Applications with Jest** + https://auth0.com/blog/testing-react-applications-with-jest/ + An in-depth explanation of how to use Jest for React testing, including setup, basic test structure, using Enzyme for rendering React components, mocking, and more. + #### General Testing, Tools, and Setup diff --git a/react-server-rendering.md b/react-server-rendering.md index 733343a..1576992 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -27,4 +27,8 @@ - **React on the Server for Beginners: Build a Universal React and Node App** https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app - Details building a React app that renders on both the client and the server \ No newline at end of file + Details building a React app that renders on both the client and the server + +- **Going Isomorphic with Python and React** + https://dev.to/__amol__/going-isomorphic-with-python-and-react + A look at how to use DukPy and React together to write an isomorphic web application with Python without even installing Node.js. \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index d7ef102..a8de3ee 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -42,6 +42,10 @@ - **React state management patterns** http://vijayt.com/post/react-state-management-patterns/ Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components). + +- **Watch Out for Undefined State** + https://daveceddia.com/watch-out-for-undefined-state/ + Discusses the common mistake of making data requests and not having data fields initialized for use in the initial render, and looks at several ways to handle the issue. #### Using `setState` diff --git a/redux-architecture.md b/redux-architecture.md index 8ebe8de..6cae4cf 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -91,6 +91,10 @@ https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e A look at the common pieces that make up a Redux application, with some very useful diagrams to illustrate what they are and how they fit together. +- **React Redux Architecture** + https://github.com/hirviid/react-redux-architecture + Some notes on an opinionated architecture for large React/Redux applications + #### Redux Best Practices @@ -167,6 +171,10 @@ - **Isn't our code just the BEST** https://medium.com/bumpers/isnt-our-code-just-the-best-f028a78f33a9 A quirkily-written look at how a dev team rewrote their project using React and Redux, including examples of project structure, component usage, and data normalization + +- **When to Define Action Creators in Redux** + https://daveceddia.com/redux-action-creators/ + An excellent overview of why action creators exist, why they’re worth using, and when you can skip them #### Encapsulation and Reusability @@ -277,4 +285,8 @@ - **Minimal Redux Setup** https://medium.com/@benevolentNinja/minimal-redux-setup-e6a10fcbcb68 - Thoughts on using a single reducer and a single "UPDATE" action type \ No newline at end of file + Thoughts on using a single reducer and a single "UPDATE" action type + +- **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 diff --git a/redux-middleware.md b/redux-middleware.md index 449a3d3..eaf52a1 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -42,6 +42,10 @@ https://vmayakumar.wordpress.com/2016/12/27/redux-middleware/ Some analogies for understanding middleware in terms of the OOP "Decorator Pattern" vs Functional Programming composition +- **Workshop Slides: Redux Middleware** + http://www.slideshare.net/visualengin/workshop-22-reactredux-m + A slideshow that explains how Redux middleware work, with several helpful visualizations + #### Middleware Techniques diff --git a/redux-side-effects.md b/redux-side-effects.md index 6d8c686..bcffe18 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -71,6 +71,10 @@ https://medium.com/@northerneyes/the-evolution-of-redux-action-creators-2973018bf2ae A comparison of ways to make action creation testable, looking at redux-thunk, a custom thunk-like middleware, and redux-saga +- **What is the right way to do asynchronous operations in Redux?** + https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/ + An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works. + #### Sagas diff --git a/redux-techniques.md b/redux-techniques.md index 84ec8e7..ac243e5 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -109,6 +109,10 @@ - **GraphQL is not only for Backend** https://riad.blog/2017/01/07/graphql-is-not-only-for-backend-react-redux/ A look at how to use GraphQL to query into a Redux store + +- **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 #### UI and Widget Implementations @@ -213,6 +217,13 @@ http://cmichel.io/using-actions-in-redux-the-correct-way/ An interesting trick using ES6 proxies to ensure wrong action types aren't accidentally used. +- **Object Oriented Functional Programming, or, How You Can Use Classes as Redux Reducers** + https://medium.com/@ustunozgur/object-oriented-functional-programming-or-how-can-you-use-classes-as-redux-reducers-23462a5cae85 + An exploration of how to use Immutable.js Record classes with methods as Redux reducers. This is a very non-idiomatic approach, but the article is reasonably informative. + +- **Exploring Interaction History with Redux-DAG-History** + https://blog.atsid.com/exploring-interaction-history-d09a52a7d186 + The Microsoft Research group describes a library they built to implement a "branching" approach to application history and undo/redo capabilities. #### Network Management diff --git a/static-typing.md b/static-typing.md index 66fc5de..c436845 100644 --- a/static-typing.md +++ b/static-typing.md @@ -127,6 +127,10 @@ - **Typing React Components** https://datarockets.com/blog/typing-react-components Examples of migrating from React PropTypes to Flow, as well as typing Redux usage + +- **Type-Checking React and Redux with Flow** + https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-1-ad12de935c36 + Examples of how to define Flow types for React components. (Part 2 will cover Redux.) #### Advancing Typing Techniques @@ -147,6 +151,10 @@ http://sitr.us/2016/12/20/flow-cookbook.html Assorted useful techniques for using Flow types +- **Secret Flow Types** + https://medium.com/@raxwunter/secret-flow-types-86b2ebb30951 + A list of "advanced" Flow type declarations, such as Keys, Diff, and Shape. + #### Tool Comparisons @@ -172,4 +180,8 @@ - **TypeScript, Flow, and the Importance of Toolchains over Tools** https://dzone.com/articles/typescript-flow-and-the-importance-of-toolchains-o - Some thoughts on why type checkers are important, how they differ, and what considerations go into selecting a type checking tool \ No newline at end of file + Some thoughts on why type checkers are important, how they differ, and what considerations go into selecting a type checking tool + +- **Refactoring 30000 Lines of JS with types** + https://www.reaktor.com/blog/refactoring-30000-lines-js-types/ + A description of the Reaktor team's approach to adding types to their project, their experience with both Typescript and Flow, and why they chose Typescript. \ No newline at end of file diff --git a/using-react-with-es6.md b/using-react-with-es6.md index 12c481b..29aa966 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -53,6 +53,10 @@ - **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 + +- **React without `this`** + https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 + Examples of how to write components in a style that does not require the `this` keyword. Not the common approach, but an interesting idea. #### Method Binding Utilities diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 45c7330..35cd72d 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -113,6 +113,10 @@ https://dev.to/kayis/dynamic-imports-with-webpack-2 A quick example of how to use dynamic imports to load pages or components at runtime +- **Lazy Loaded React Components with Webpack 2** + https://dev.to/kayis/lazy-loaded-react-components-with-webpack-2 + A follow-on to the previous article, showing how to extend the dynamic imports approach to lazily load and render components + #### Bundle Sizes and Visualization @@ -257,6 +261,10 @@ https://infinum.co/the-capsized-eight/squeezing-webpack-into-backend-frameworks Covers how to use Webpack to replace the Rails asset pipeline +- **Easy Offline First Apps with Webpack's Offline Plugin** + https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin + A look at how to use the OfflinePlugin to cache Webpack-generated assets for offline use. + #### Webpack Tools