From dac609b3bc4cfec7b25dda2aa8d378fe7dfa99c0 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 1 Jan 2017 21:59:44 -0500 Subject: [PATCH] Updates, 2017-01-01 --- react-native.md | 6 +++++- react-performance.md | 6 +++++- react-tutorials.md | 7 +++++++ redux-architecture.md | 8 ++++++++ redux-techniques.md | 14 +++++++++++++- webpack-tutorials.md | 4 ++++ 6 files changed, 42 insertions(+), 3 deletions(-) diff --git a/react-native.md b/react-native.md index 4b35fc5..fe2bada 100644 --- a/react-native.md +++ b/react-native.md @@ -45,4 +45,8 @@ - **Under the hood of React Native** https://speakerdeck.com/mkonicek/under-the-hood-of-react-native - A slideset digging into the guts of how React Native works \ No newline at end of file + A slideset digging into the guts of how React Native works + +- **What I learned from building my first React Native App** + http://cmichel.io/lessons-from-building-first-react-native-app/ + A number of informative lessons learned building an app using RN and Redux, including components, performance, workflow, and use of Redux. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 3f4079b..d21f0bf 100644 --- a/react-performance.md +++ b/react-performance.md @@ -213,4 +213,8 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://medium.com/@dtinth/an-artificial-example-where-mobx-really-shines-and-redux-is-not-really-suited-for-it-1a58313c0c70 https://www.reddit.com/r/reactjs/comments/5hf4d4/an_artificial_example_where_mobx_really_shines/ https://github.com/dtinth/pixelpaint/pull/1 - An excellent in-depth article that sets up a specific benchmark example, and compares the performance of a MobX implementation vs several different Redux-based implementations. There's valuable discussion in the Reddit comments, and Dan Abramov submitted a PR to the sample project that demonstrates some fairly simple changes that result in improved Redux performance. \ No newline at end of file + An excellent in-depth article that sets up a specific benchmark example, and compares the performance of a MobX implementation vs several different Redux-based implementations. There's valuable discussion in the Reddit comments, and Dan Abramov submitted a PR to the sample project that demonstrates some fairly simple changes that result in improved Redux performance. + +- **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 diff --git a/react-tutorials.md b/react-tutorials.md index 2bd2ad9..b20dfb2 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -241,6 +241,13 @@ http://www.zsoltnagy.eu/building-a-chat-component-in-react-and-es6/ An introduction to React by building a small chat app +- **Learning React with Create-React-App** + https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc + https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d + https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192 + https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc + A tutorial series that introduces React's concepts, using the Create-React-App tool to handle starting the project. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index a2846dc..ff7c7ad 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -222,6 +222,14 @@ - **Scaling React and Redux at IOOF** http://www.slideshare.net/VivianFarrell/scaling-react-and-redux-at-ioof A slideshow discussing creation of enterprise-scale Redux apps built with "micro-frontends" that can be composed together, and a look at a "Redux-Subspace" library to help with that + +- **Structuring Redux Selectors** + http://cmichel.io/redux-selectors-structure/ + Another article on "globalizing" selector functions, with references to the articles by Randy Coulman and Dave Atchley. + +- **Instance Reducers** + http://www.thesoftwaresimpleton.com/blog/2016/12/20/instance-reducers/ + An interesting approach to the "multiple instances of a connected component" problem. #### Variations on Redux Architectures diff --git a/redux-techniques.md b/redux-techniques.md index cb9c404..20d1f58 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -48,10 +48,18 @@ - **Taking Advantage of `combineReducers`** http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/ Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. + +- **Modifying a Leaf of the Redux State Tree** + http://cmichel.io/modifying-a-leaf-of-the-redux-state-tree/ + Some useful observations on how to properly do deep immutable updates. + #### Selectors and Normalization -**Related topics**: [Redux Architecture - Encapsulation](./redux-architecture.md#encapsulation-and-reusability) +**Related topics**: +- [Redux Architecture - Encapsulation](./redux-architecture.md#encapsulation-and-reusability) +- [Redux Performance](./react-performance.md#redux-performance) + - **Querying a Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f @@ -185,6 +193,10 @@ http://danielearwicker.github.io/Immuto_Epilogue.html An interesting series of experiments in adding typed cursor-like behavior to Redux. The author appears to give up on the idea in the end, but the writing and thought process are informative. +- **Using Actions in Redux the Correct Way** + 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. + #### Network Management diff --git a/webpack-tutorials.md b/webpack-tutorials.md index c2e6c32..200f172 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -36,6 +36,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **What is Webpack and what can it do for you?** http://x-team.com/2016/09/webpack-can-absolute-beginners/ A plain-English explanation of what Webpack is and what problems it can help solve. + +- **Seamless client side Javascript with Webpack** + https://opbeat.com/community/posts/seamless-client-side-javascript-with-webpack-by-jack-franklin/ + A talk by Jack Franklin, talking about what problems Webpack solves #### Basic Tutorials