diff --git a/es6-features.md b/es6-features.md index 090fc03..39c2466 100644 --- a/es6-features.md +++ b/es6-features.md @@ -71,6 +71,10 @@ https://leanpub.com/understandinges6/read An online book that covers all the changes and features involved in ES6 +- **Javascript Alonge: The "Six" Edition** + https://leanpub.com/javascriptallongesix/read + A book that teaches Javascript and ES6 from a functional programming perspective + - **Why Do ES6 Classes Exist, and Why Now?** http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/ Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them diff --git a/mobx-tutorials.md b/mobx-tutorials.md index ccbdb69..a900d66 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -31,6 +31,11 @@ - **A MobX introduction and case study** https://blog.wearewizards.io/a-mobx-introduction-and-case-study An introduction to MobX, with examples showing how it works in a real app with Typescript + +- **MobX First Impressions** + https://benmccormick.org/2017/01/09/mobx-first-impressions/ + A quick introduction to MobX's basic concepts and how it works + #### Testing @@ -49,6 +54,10 @@ http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html Thoughts on MobX's core concepts, and how they relate to immutability, derived data, and observables. +- **The Fundamental Principles Behind MobX** + https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 + MobX creator Michel Weststrate discusses MobX's key concepts, including running all updates synchronously, and potential use of Proxies as a future improvement. + #### MobX and Redux Comparisons diff --git a/react-architecture.md b/react-architecture.md index 35b2b71..1493337 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -174,4 +174,8 @@ - **11 lessons learned as a React contractor** https://medium.com/@jolyon_russ/11-lessons-learned-as-a-react-contractor-f515cd0491cf https://news.ycombinator.com/item?id=13332138 - A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. Extended discussion in the HN comments. \ No newline at end of file + A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. Extended discussion in the HN comments. + +- **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 diff --git a/react-component-patterns.md b/react-component-patterns.md index 6315245..0e07ef1 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -32,6 +32,17 @@ https://medium.com/javascript-inside/embracing-functions-in-react-d7d558d8bd30 A look at stateless functional components in React, and why they might be useful or should be considered in the first place. +- **React Stateless Functional Components: Nine Wins You Might Have Overlooked** + https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc + Thoughts on reasons why you might want to write more components using the functional syntax. + +- **How to declare React Components in 2017** + https://medium.com/@npverni/how-to-declare-react-components-in-2017-2a90d9f7984c + A quick overview of the three ways to declare React components, and which ones should be preferred. + + +#### React Component Children + - **Ownership and Children in React** http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/ Discusses the difference between "parent" and "owner" relationships, and what the "children" prop can look like. @@ -40,10 +51,14 @@ https://www.youtube.com/watch?v=DJ53-G8EbxE A screencast demonstrating how the "children" prop to compose components together -- **React Stateless Functional Components: Nine Wins You Might Have Overlooked** - https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc - Thoughts on reasons why you might want to write more components using the functional syntax. - +- **React.Children and the React Top-Level API** + http://callahan.io/blog/2016/09/16/react-dot-children-and-the-react-top-level-api/ + Overviews and examples of the `React.Children` APIs, and how they can be used to manipulate component children + +- **Send Props to Children in React** + http://jaketrent.com/post/send-props-to-children-react/ + Examples of how to pass new props to child components using `React.Children` + #### React Component Lifecycle @@ -67,6 +82,10 @@ https://developmentarc.gitbooks.io/react-indepth/content/ A deep dive into the lifecycle methods, and various techniques for using them. +- **React Lifecycle Cheatsheet** + https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9 + A table listing the lifecycle methods, when they're called, whether each method allows side effects or state updates, and examples uses for each method + #### Component Communication @@ -99,6 +118,14 @@ https://www.youtube.com/watch?v=mwYHDXS6uSc A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it. +- **React Context and Component Coupling** + https://medium.com/differential/react-context-and-component-coupling-86e535e2d599 + Discussion on the pros and cons of using `context` to pass data between components, and some examples of how to do so + +- **Higher Order With Context** + https://dev.to/kayis/higher-order-with-context + Examples of using Higher Order Components to pass data to nested components using `context` + #### Component Categories @@ -245,6 +272,14 @@ https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery. +- **How to Use jQuery Libraries in the React Ecosystem** + https://medium.com/@superKalo/how-to-use-jquery-libraries-in-the-react-ecosystem-7dfeb1aafde0 + Some excellent examples of using React components to wrap up jQuery plugins: creating the plugin instance, updating the plugin from React props, and destroying the plugin on unmount. + +- **Introducing React into an Existing Application** + 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. + #### Modal Dialogs diff --git a/react-forms.md b/react-forms.md index 52ad304..95b6f7e 100644 --- a/react-forms.md +++ b/react-forms.md @@ -85,6 +85,10 @@ http://react.tips/checkboxes-in-react/ Tutorials on managing various inputs in forms with React +- **Building a Multi-Step Registration Form with React** + https://www.viget.com/articles/building-a-multi-step-registration-form-with-react + A form example that shows how to track the current form step, render the right form component, and store all the necessary form data + #### Form Validation diff --git a/react-performance.md b/react-performance.md index d21f0bf..7ff3588 100644 --- a/react-performance.md +++ b/react-performance.md @@ -107,6 +107,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c Suggestions for using React's Perf API to benchmark component rendering, and use of shouldComponentUpdate to cut down on unnecessary renders. +- **Why and How to Use PureComponent in React** + https://60devs.com/pure-component-in-react.html + A look into what React.PureComponent is, how it works, and how it can be used to improve performance + #### Code Splitting and Progressive Apps diff --git a/redux-architecture.md b/redux-architecture.md index ff7c7ad..11a6113 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -83,6 +83,10 @@ 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. +- **Thinking in Redux (when all you've known is MVC)** + https://hackernoon.com/thinking-in-redux-when-all-youve-known-is-mvc-c78a74d35133 + Some useful mental comparisons for understanding Redux when coming from an MVC architecture background + #### Redux Best Practices @@ -150,6 +154,14 @@ - **Seven Months Into Redux: Two Things My Team Learned Along the Way** https://medium.com/@benipsen/seven-months-into-redux-two-things-my-team-learned-along-the-way-5d979c25ea61 A couple useful suggestions on use of RxJS for managing action updates and handling derived data in selectors. + +- **A Year of Development with Redux** + https://blog.shakacode.com/a-year-of-development-with-redux-part-i-a5791e124a7d + Some quick tips for working with Redux and structuring data + +- **Avoiding False Cause** + http://sebinsua.com/avoiding-false-cause/ + Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates) #### Encapsulation and Reusability diff --git a/redux-techniques.md b/redux-techniques.md index 20d1f58..d5fe94c 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -101,6 +101,10 @@ - **ReactCasts #8: Selectors in Redux** https://www.youtube.com/watch?v=frT3to2ACCw A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values + +- **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 #### UI and Widget Implementations diff --git a/static-typing.md b/static-typing.md index ee8b29e..16c294b 100644 --- a/static-typing.md +++ b/static-typing.md @@ -160,4 +160,12 @@ - **TypeScript vs Flow** https://github.com/niieani/typescript-vs-flowtype - An in-depth, unbiased comparison of differences and similarities between TypeScript and Flow \ No newline at end of file + An in-depth, unbiased comparison of differences and similarities between TypeScript and Flow + +- **TypeScript vs Flow** + https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow + Some quick thoughts on both Flow and TS being "non-standard JS", with good discussion in the comments. + +- **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 diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index f94d97b..79bc976 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -53,6 +53,10 @@ - **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. + +- **A React + Webpack Optimization Case** + https://medium.com/@kudochien/a-react-webpack-optimization-case-27da392fb3ec + Several useful examples of how to profile and optimize a Webpack-based project, including checking bundle contents, specific imports from libraries, ignoring Moment locales, and more. #### Code Splitting and Chunking diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 9618719..81cb3ab 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -44,6 +44,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **4 Key Concepts of Webpack** https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack/ A recorded presentation by Webpack core team member Sean Larkin, explaining Webpack's core concepts and future goals. + +- **Module Bundling and Webpack in Simple Terms** + http://arianv.com/post/Module-Bundling-and-Webpack-in-Simple-Terms/ + An informative high level overview that explains what Webpack does and how it works. #### Basic Tutorials @@ -129,6 +133,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack 101** https://github.com/brunoscopelliti/webpack-101 A tutorial that builds up a Webpack config step-by-step, explaining why and how each change is made. + +- **Migration to Webpack@2** + https://blog.shakacode.com/migration-to-webpack-2-c9803871b931 + Some tips for updating a Webpack 1 config to work with Webpack 2 #### Configuration Terms and Concepts