Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Updates, 2018-11-12
  • Loading branch information
markerikson committed Nov 12, 2018
1 parent 3b53f7b commit fc208b9
Show file tree
Hide file tree
Showing 14 changed files with 119 additions and 12 deletions.
4 changes: 4 additions & 0 deletions mobx-tutorials.md
Expand Up @@ -86,6 +86,10 @@
https://www.robinwieruch.de/create-react-app-mobx-decorators/
Covers how to use MobX in a CRA project, with and without decorators.

- **React Performance and MobX**
https://medium.com/workday-engineering/react-performance-and-mobx-b038085ecb72
An informative look at how React's rendering process normally occurs, and how use of MobX-React affects React performance.


#### MobX and Redux Comparisons

Expand Down
4 changes: 4 additions & 0 deletions react-architecture.md
Expand Up @@ -118,6 +118,10 @@
- **Making website building fun**
https://www.gatsbyjs.org/blog/2017-10-16-making-website-building-fun/
The author of the Gatsby static site generator discusses how creating the right building blocks can make development simpler and more fun, and gives examples of how specific React components can be those kinds of building blocks.

- **React, Redux, and JavaScript Architecture**
https://jrsinclair.com/articles/2018/react-redux-javascript-architecture/
An excellent article that walks you through a progression of refactors for implementing a slide toggle component from jQuery to React + Redux, and explains along the way why you would want to use them and how to "think in React and Redux" in the process.


#### React Best Practices
Expand Down
8 changes: 8 additions & 0 deletions react-component-composition.md
Expand Up @@ -111,6 +111,10 @@
http://arianv.com/post/use-default-hocs-for-component-logic/
Demonstrates how default behavior and logic can be put into a HOC to simplify code and enable reuse.

- **Higher-Order Components: The Ultimate Guide**
https://medium.freecodecamp.org/higher-order-components-the-ultimate-guide-b453a68bb851
An extensive look at how HOCs can be used to create composable single-purpose components that encapsulate logic like filtering and sorting.




Expand Down Expand Up @@ -153,6 +157,10 @@
https://blog.kentcdodds.com/rendering-a-function-with-react-ca3eaf0751e2
Kent C Dodds looks at some unusual use cases for reusing React components, and a possible solution that uses a somewhat hacky approach of marking a function as an iterable.

- **Achieving modifiability with your React Components**
https://medium.com/@josclovisramrezdelarosa/achieving-modifiability-with-your-react-components-2d99373fae74
Looks at a use case for a customizable reporting component, and how render props can be used to enable disabling or overriding parts of the standard report UI.




Expand Down
25 changes: 23 additions & 2 deletions react-component-patterns.md
Expand Up @@ -152,13 +152,22 @@
http://www.albertgao.xyz/2017/10/28/how-to-auto-bind-props-by-using-react-element/
Examples of using the `React.Children` API to add additional props to child components

- **React sub-components**
https://itnext.io/react-sub-components-513f6679abed
Demonstrates defining "sub-components" like `Article.Title`, and using `React.Children` to ensure they're composed correctly.


#### React Component Lifecycle

- **React Docs: Component Specs and Lifecycle**
https://facebook.github.io/react/docs/component-specs.html
https://reactjs.org/docs/react-component.html
The official React docs page on component lifecycle

- **React 16.3+ Interactive Lifecycle Methods Diagram**
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
https://twitter.com/dan_abramov/status/981712092611989509
An excellent interactive diagram that shows the sequence of lifecycle methods in React 16.3+, and how they relate to React's "render" and "commit" update phases. Based on a diagram by Dan Abramov.

- **Understanding the React Component Lifecycle**
http://busypeoples.github.io/post/react-component-lifecycle/
A good look at which lifecycle methods run in which situations, as well as the signatures of each method.
Expand Down Expand Up @@ -262,7 +271,19 @@

- **React's new Context API**
https://dev.to/kentcdodds/reacts--new-context-api-dpi
Kent C Dodds digs into the new `context` API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using `context`.
Kent C Dodds digs into the new context API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using context.

- **Bitmasks and the new React Context API**
https://hph.is/coding/bitmasks-react-context
An explanation of how the new version of context works, and how change updates can be optimized using a bitmasking approach.

- **Exploring the React Context API with Provider and Consumer**
https://www.robinwieruch.de/react-context-api/
Explains the use cases for the new context API, and demonstrates how to use it both by itself and wrapped in a higher-order component.

- **React's new Context API and Actions**
https://dev.to/washingtonsteven/reacts-new-context-api-and-actions-446o
Shows how to update values being passed through context, and particularly how to pass down functions that can be used to update the values.


#### Component Categories
Expand Down
4 changes: 4 additions & 0 deletions react-deployment.md
Expand Up @@ -51,6 +51,10 @@
https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/
A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app.

- **So you want to host your Single Page React App on Github Pages?**
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
Solutions for common problems encountered when trying to deploy a React app on Github Pages, especially around routing.


#### Libraries

Expand Down
6 changes: 5 additions & 1 deletion react-forms.md
Expand Up @@ -8,7 +8,7 @@
- [Redux Techniques: Redux and Forms](redux-techniques.md#redux-and-forms)


#### "Controlled" and "Uncontrolled Inputs
#### "Controlled" and "Uncontrolled" Inputs

- **React Docs: Forms**
https://facebook.github.io/react/docs/forms.html
Expand Down Expand Up @@ -142,6 +142,10 @@
https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b
An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app.

- **An imperative guide to forms in React**
https://blog.logrocket.com/an-imperative-guide-to-forms-in-react-927d9670170a
A useful overview of how to work with forms. Includes several runnable examples, and also looks at how the Formik library can simplify form handling.


#### Form Validation

Expand Down
14 changes: 14 additions & 0 deletions react-redux-testing.md
Expand Up @@ -177,6 +177,18 @@
https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/
Tips on dealing with larger-scale integration tests of React apps under Mocha. Discusses handling async API calls, using `mocha-steps` for multi-step tests, and working with React-Router.

- **How to write clean React unit tests with Enzyme**
http://www.bradleycbuchanan.com/b/clean-react-enzyme/
Several tips for writing simpler React component tests with Enzyme, including focusing on the logic, testing as shallow as possible, and writing assertions using JSX.

- **Acceptance Test Driven Development with React/Redux**
https://itnext.io/acceptance-test-driven-test-with-react-redux-part-1-7ae8cb4fab00
A multi-part tutorial series that walks through creating and refactoring a React/Redux application using an Acceptance Test Driven Development approach.

- **React Testing Tutorial: Test Frameworks & Component Tests**
https://www.robinwieruch.de/react-component-tests-tutorial/
An excellent in-depth guide that walks through writing unit, integration, and end-to-end tests using common React test frameworks and tools like Mocha, Enzyme, Sinon, Jest, Coveralls, and Cypress.io.



#### Redux
Expand Down Expand Up @@ -351,6 +363,8 @@
http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html
A pair of articles that discuss ways to handle testing the various pieces of connected components.





#### General Testing, Tools, and Setup
Expand Down
6 changes: 5 additions & 1 deletion react-routing.md
Expand Up @@ -184,4 +184,8 @@

- **Securing a React Web App with Authorization Rules**
https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca
A tutorial that shows how to add authorization and authentication to a Todo app
A tutorial that shows how to add authorization and authentication to a Todo app

- **Composing authorizing into React apps**
https://medium.com/@sarat1669/composing-authorization-into-react-apps-180fa3c18d1
Examples of generic auth management at the component level, using a package called react-identity.
11 changes: 8 additions & 3 deletions react-tutorials.md
Expand Up @@ -16,6 +16,10 @@
https://egghead.io/courses/the-beginner-s-guide-to-reactjs
A free video course with short lessons that explain key React concepts, including using `React.createElement` and JSX, conditional rendering, forms, styling, lists, HTTP requests, and deploying a React app.

- **A Comprehensive Guide to Building Apps with React**
https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
An excellent introduction to the core concepts, terms, syntax, and usage of React. Includes several interactive examples, and has been updated to cover React 16.3.

- **30 Days of React**
https://www.fullstackreact.com/30-days-of-react/
A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment.
Expand Down Expand Up @@ -199,13 +203,14 @@
https://academind.com/learn/react/react-q-a/
An article and accompanying video that explain answers to common questions about React, including whether a complex project setup is necessary, different ways to define components, ways to style React apps, immutability, using React with various backends, and more.

- **React Cheatsheet**
https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/react.js
A useful single-file summary of React's APIs and concepts


#### Project-Based Tutorials

- **A Comprehensive Guide to Building Apps with React**
http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
Walks through the major concepts and API functions in React


- **Hacking with React**
http://www.hackingwithreact.com/
Expand Down
6 changes: 5 additions & 1 deletion redux-middleware.md
Expand Up @@ -108,4 +108,8 @@

- **How to use Redux middleware to decouple AJAX call?**
http://www.albertgao.xyz/2017/12/07/how-to-use-redux-middleware-to-decouple-ajax-call/
Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request
Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request

- **Custom Form Validation in React with Redux Middleware**
http://tech.tunecore.com/redux-form-validation-middleware
A detailed example of how middleware can be used to implement some complex form validation logic in a centralized way.
8 changes: 8 additions & 0 deletions redux-reducers-selectors.md
Expand Up @@ -142,6 +142,14 @@
https://hackernoon.com/selectors-in-redux-are-a-must-d6b0637c79b7
Examples of how nested Redux state can be difficult to work with, how to separate and structure domain data and UI data, and how and why to write selectors that extract and reshape the data as needed for different parts of the application.

- **Be Selective With Your State**
https://medium.com/riipen-engineering/be-selective-with-your-state-8f1be76cb9f4
A helpful overview of when and why to use selectors and Reselect with Redux, some issues with using selectors in multiple components, and using `re-reselect` to create "cached" selectors.

- **Scaling data selection on the client**
https://medium.com/@skovy/scaling-data-selection-on-the-client-5e4411de6984
Describes several reasons to use selector functions, and gives examples of writing selectors to handle normalized state.


#### Normalization

Expand Down
18 changes: 17 additions & 1 deletion redux-techniques.md
Expand Up @@ -153,6 +153,10 @@
- **Redux Dead Drop**
https://medium.com/@erikras/redux-dead-drop-1b9573705bec
Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node

- **The Definitive Guide to Redux-Persist v5**
https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975
An informative guide that covers setting up Redux-Persist, customizing what's persisted, and merging persisted data into the store.



Expand Down Expand Up @@ -232,6 +236,14 @@
https://medium.com/@yazeedb/redux-lets-refactor-our-higher-order-duck-e44b0110befc
A neat example of how to write reusable logic in Redux. Walks through writing generic CRUD logic for managing the contents of a list, and shows how to organize it using the "ducks" structure and make it reusable for different types of data. The second article shows how to refactor some of the logic using the `createReducer` approach from the Redux docs.

- **DRY Redux at Scale: The Basics**
https://medium.com/@gaforres/dry-redux-at-scale-the-basics-d1dac63f5a53
Walks through a series of approaches for reducing boilerplate and abstracting generation of action creators and reducers, and discusses the pros and cons of adding additional abstraction layers.

- **Reducing boilerplate in Redux Apps with Arc**
https://hackernoon.com/reducing-boilerplate-in-redux-apps-with-arc-d9550434470e
The author of the redux-arc library describes how it can help simplify your Redux code by generating action creators and reducers for CRUD logic.


#### Network Management

Expand Down Expand Up @@ -272,4 +284,8 @@

- **Remote Reducers and Predictive Reduction**
https://medium.com/@seveibar/remote-reducers-and-predictive-reduction-572ab5054211
Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order.
Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order.

- **React/Redux Tips: Better Way to Handle Loading Flags in Your Reducers**
https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6
A quick suggestion to store loading state in its own slice reducer, rather than spread across the app state.
8 changes: 8 additions & 0 deletions static-typing.md
Expand Up @@ -258,6 +258,14 @@
https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575
Looks at the new "conditional types" feature in TS2.8, and how that can be used to simplify adding types to Redux logic.

- **The Redux Type Flow**
https://medium.com/@zhirzh/the-redux-type-flow-93aada6964e5
Looks at some advanced approaches for automatically extracting types for Redux actions with Flow and applying them to reducers.

- **Ultimate React Component Patterns with Typescript**
https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
An extensive set of examples for using TypeScript with common React component patterns, including functional / class components, default props, render callbacks, and much more.



#### Advancing Typing Techniques
Expand Down
9 changes: 6 additions & 3 deletions webpack-tutorials.md
Expand Up @@ -17,9 +17,8 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
https://www.youtube.com/watch?v=WQue1AN93YU
A screencast video explaining what Webpack is and why you would want to use it

- **"Having a hard time understanding Webpack"**
https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsoq9p3/
https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsphcmb/
- **"Why use packers/bundlers?"**
http://tinselcity.net/whys/packers
A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together".

- **Egghead.io - Intro to Webpack (Playlist)**
Expand Down Expand Up @@ -278,6 +277,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9
The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities.

- **Upgrade to Webpack 4**
https://dev.to/flexdinesh/upgrade-to-webpack-4---5bc5
Some quick tips for upgrading a Webpack config from v3 to v4


#### Webpack Configuration Utilities

Expand Down

0 comments on commit fc208b9

Please sign in to comment.