From 041f71cf9b4e4d0787ecce51ec46fd4a28b82a30 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 5 Mar 2017 14:41:30 -0500 Subject: [PATCH] Updates, 2017-03-05 --- basic-concepts.md | 5 +++++ project-structure.md | 5 +++++ react-ajax.md | 4 ++++ react-architecture.md | 4 ++++ react-component-patterns.md | 6 +++++- react-native.md | 13 ++++++++++++- react-performance.md | 8 ++++++++ react-redux-testing.md | 8 ++++++++ react-state-management.md | 6 +++++- redux-side-effects.md | 6 +++++- redux-techniques.md | 3 +++ redux-tutorials.md | 1 + 12 files changed, 65 insertions(+), 4 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index 9dd14dd..862d949 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -58,6 +58,11 @@ - **Glossary of Modern Javascript Concepts: Part 1** https://auth0.com/blog/glossary-of-modern-javascript-concepts/ An excellent overview and introduction to a number of concepts that are used in modern applications, such as "purity", "state", "immutability", "functional programming", "observables", and more. + +- **The Tools of the JS Trade** + https://dev.to/kayis/the-tools-of-the-js-trade + A helpful overview of commonly used JS development tools, grouped by type, with short descriptions for each. + #### Suggested Learning Approaches diff --git a/project-structure.md b/project-structure.md index c32a847..df60b2a 100644 --- a/project-structure.md +++ b/project-structure.md @@ -75,6 +75,11 @@ - **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. + +- **How OkCupied organizes its multi-page React App** + https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/ + https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/ + The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures. Some good follow-up discussion in the Reddit comments. #### Project Setup diff --git a/react-ajax.md b/react-ajax.md index fdd10e3..b521c5b 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -62,4 +62,8 @@ - **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. + +- **Dealing with APIs in React with ReactRemoteData** + http://javascriptplayground.com/blog/2017/03/remote-data-react-components/ + The author of the RemoteDataJS libraries shows a small React wrapper he created and how to use it \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index d00b7bc..d3b3bce 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -94,6 +94,10 @@ - **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()` ). + +- **Just Write Components** + https://medium.com/lystable-product-engineering/just-write-components-75bd7875223e + The Lystable team discusses how consistently writing encapsulated components leads to scalability in application development #### React Best Practices diff --git a/react-component-patterns.md b/react-component-patterns.md index 73198ad..912f4e6 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -5,7 +5,7 @@ - **[React Implementation and Concepts](./react-implemenation.md)**: Includes articles that explain the differences between "components", "elements", and "instances" -#### Terms and Concepts +#### Component Terms, Concepts, and Types - **React Patterns** http://reactpatterns.com/ @@ -40,6 +40,10 @@ 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. +- **Building User Interfaces with Pure Functions and Function Composition in React** + https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/ + A look at the idea of composing together UIs with simple components, with comparisons to the idea of combining functions together. + #### Component Rendering Logic diff --git a/react-native.md b/react-native.md index fe2bada..41a2c87 100644 --- a/react-native.md +++ b/react-native.md @@ -27,6 +27,10 @@ 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. +- **Build an Imgur Client with React Native and MobX** + https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250 + A tutorial that demonstrates build an RN app with MobX for state management, use of RESTful APIs, full-screen images in a ListView, and detection of device orientation + #### Specific aspects @@ -49,4 +53,11 @@ - **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 + A number of informative lessons learned building an app using RN and Redux, including components, performance, workflow, and use of Redux. + +- **Understanding React Native flexbox layout** + https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4 A helpful visual guide to how Flexbox works, both in general and specific to React Native + +- **How to Create An Authentication System and a Persistent User Session with React Native** + http://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/ + Demonstrates how to build an app that uses JWT authentication, and persist the token in storage to keep the user logged in \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index b2f1c6e..6fb626b 100644 --- a/react-performance.md +++ b/react-performance.md @@ -123,6 +123,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) 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`. +- **Why Did This React Component Re-Render?** + http://ericlathrop.com/2017/02/why-did-this-react-component-rerender/ + A reminder that passing a style object in `render` will usually cause shallow-equality checks to fail, even if the style values are identical + #### Code Splitting and Progressive Apps @@ -148,6 +152,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) 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. +- **Improving first load time of a Production React App** + https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0 + A detailed look at the various approaches used by UrbanClap to improve their load time, including file chunking, on-demand loading, dropping non-critical libraries, and more + #### Immutable Data diff --git a/react-redux-testing.md b/react-redux-testing.md index 59c88e7..0537aa6 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -174,6 +174,14 @@ 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. +- **Never render in React testing again** + https://medium.com/@planttheidea/never-render-in-react-testing-again-fc4bcfc2f71d + Some examples of using higher-order functions to simplify test logic + +- **Low effort, high value: Integration tests in Redux apps** + 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 + #### General Testing, Tools, and Setup diff --git a/react-state-management.md b/react-state-management.md index 8a84a52..2fcea33 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -80,4 +80,8 @@ - **"Best kept React secret: declare state changes separately from component classes"** https://twitter.com/dan_abramov/status/824308413559668744 - Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState` \ No newline at end of file + Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState` + +- **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 diff --git a/redux-side-effects.md b/redux-side-effects.md index 8712a49..ac5ccce 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -175,4 +175,8 @@ - **A simplified approach to calling APIs with Redux** http://www.sohamkamani.com/blog/2016/06/05/redux-apis/ - A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state. \ No newline at end of file + A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state. + +- **Elm Architecture with Redux** + https://smallbusinessforum.co/elm-architecture-with-react-redux-redux-loop-645a67070b1a + A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index 1c657c3..1a20321 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -158,6 +158,9 @@ https://codersmind.com/scalable-modals-react-redux/ Demonstrates implementing the basic Redux modal manager technique described by Dan Abramov in his Stack Overflow answer. +- **A Redux-Saga Implementation of Modal Confirmation Dialogs in React** + https://decembersoft.com/posts/a-redux-saga-implementation-of-modal-confirmation-dialogs-in-react-redux/ + Some examples of using sagas for controlling flow of async calls and dialog management #### Redux and Forms diff --git a/redux-tutorials.md b/redux-tutorials.md index fd7dbbe..06c25df 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -206,6 +206,7 @@ - **React and Redux Sagas Authentication App Tutorial** http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/ http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-2/ + http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-3/ A 3-part tutorial that builds a reasonably complex app, using Redux-Saga, Redux-Form and React-Router, with an emphasis on practical aspects of putting things together. - **Get familiar with React, Redux, and basic personal finance**