From c6aece3fa28e57cb5a354d5f76f3c39f74f68c37 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 24 Jun 2017 14:48:35 -0400 Subject: [PATCH] Updates, 2017-06-24 --- README.md | 47 ++++++++++++++++++---------------- basic-concepts.md | 4 +++ community-resources.md | 4 +++ immutable-data.md | 16 ++++++++++++ mobx-tutorials.md | 4 +++ pros-cons-discussion.md | 4 +++ react-ajax.md | 5 +++- react-architecture.md | 4 +++ react-component-patterns.md | 20 +++++++++++++-- react-deployment.md | 30 ++++++++++++++++++++++ react-performance.md | 4 +++ react-routing.md | 34 +++++++++++++++++++----- react-server-rendering.md | 6 ++++- react-styling.md | 9 +++++-- react-tutorials.md | 32 +++++++++++++++++++++-- redux-architecture.md | 18 ++++++++++++- redux-side-effects.md | 4 +++ redux-techniques.md | 19 +++++++++++--- redux-tutorials.md | 10 +++++++- static-typing.md | 4 +++ webpack-advanced-techniques.md | 16 ++++++++++++ webpack-tutorials.md | 11 ++++++++ 22 files changed, 263 insertions(+), 42 deletions(-) create mode 100644 react-deployment.md diff --git a/README.md b/README.md index dcdb774..ec6b41a 100644 --- a/README.md +++ b/README.md @@ -9,27 +9,27 @@ You might also want to check out my categorized list of Redux-related addons, li ## Table of Contents #### Getting Started -- [Basic Concepts and Overviews](basic-concepts.md) -- [Community Resources](community-resources.md) -- [Javascript Resources](javascript-resources.md) -- [Git Resources and Tutorials](git-resources.md) -- [Node.js and NPM](node-js-and-npm.md) -- [Webpack Tutorials](webpack-tutorials.md) -- [Boilerplates and Starter Kits](boilerplates-and-starter-kits.md) +- [Basic Concepts and Overviews](./basic-concepts.md) +- [Community Resources](./community-resources.md) +- [Javascript Resources](./javascript-resources.md) +- [Git Resources and Tutorials](./git-resources.md) +- [Node.js and NPM](./node-js-and-npm.md) +- [Webpack Tutorials](./webpack-tutorials.md) +- [Boilerplates and Starter Kits](./boilerplates-and-starter-kits.md) #### Basic Tutorials -- [ES6 Features and Samples](es6-features.md) -- [React Tutorials](react-tutorials.md) -- [Flux Tutorials](flux-tutorials.md) -- [Redux Tutorials](redux-tutorials.md) -- [MobX Tutorials](mobx-tutorials.md) +- [ES6 Features and Samples](./es6-features.md) +- [React Tutorials](./react-tutorials.md) +- [Flux Tutorials](./flux-tutorials.md) +- [Redux Tutorials](./redux-tutorials.md) +- [MobX Tutorials](./mobx-tutorials.md) #### Intermediate Concepts -- [Using React with ES6](using-react-with-es6.md) -- [Functional Programming](functional-programming.md) -- [Immutable Data](immutable-data.md) -- [React/Redux Testing](react-redux-testing.md) +- [Using React with ES6](./using-react-with-es6.md) +- [Functional Programming](./functional-programming.md) +- [Immutable Data](./immutable-data.md) +- [React/Redux Testing](./react-redux-testing.md) - [React Native](./react-native.md) #### Advanced Topics @@ -40,7 +40,8 @@ You might also want to check out my categorized list of Redux-related addons, li - [React State Management](./react-state-management.md) - [React Architecture and Best Practices](./react-architecture.md) - [Redux Architecture and Best Practices](./redux-architecture.md) - - [React/Redux Performance](react-performance.md) + - [React/Redux Performance](./react-performance.md) + - [React Deployment](./react-deployment.md) - **React**: - [React Implementation and Concepts](./react-implementation.md) - [React and Forms](./react-forms.md) @@ -50,17 +51,17 @@ You might also want to check out my categorized list of Redux-related addons, li - [React and Routing](./react-routing.md) - **Redux** - [Redux Middleware](./redux-middleware.md) - - [Redux Side Effects](redux-side-effects.md) - - [Redux Tips and Techniques](redux-techniques.md) + - [Redux Side Effects](./redux-side-effects.md) + - [Redux Tips and Techniques](./redux-techniques.md) - [Using Redux Without React](./redux-without-react.md) - **Other** - - [Webpack Advanced Techniques](webpack-advanced-techniques.md) + - [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - [Static Typing](./static-typing.md) #### Comparisons and Discussion -- [React/Flux/Redux Pros, Cons, and Discussion](pros-cons-discussion.md) -- [React and Flux vs Backbone](react-vs-backbone.md) +- [React/Flux/Redux Pros, Cons, and Discussion](./pros-cons-discussion.md) +- [React and Flux vs Backbone](./react-vs-backbone.md) @@ -82,6 +83,8 @@ All of the links in this collection are worth reading, but there's obviously a L ### Suggested Learning Approaches - [A Study Plan to Cure Javascript Fatigue](https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1) The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem. + - [Grab Front-End Study Guide](https://github.com/grab/front-end-guide) + An excellent guide to learning front-end technologies, based on "A Study Plan to Cure Javascript Fatigue". Includes descriptions of each topic, links to learning resources, and estimates for how much time to spend on each topic. - [React How-To](https://github.com/petehunt/react-howto) Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux) - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) diff --git a/basic-concepts.md b/basic-concepts.md index d736758..acff781 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -64,6 +64,10 @@ 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. +- **Choosing a frontend framework in 2017** + https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341 + An excellent look at the history of the major client-side web frameworks, how they developed over the last few years, and some suggestions for when each framework might be appropriate. + #### Suggested Learning Approaches diff --git a/community-resources.md b/community-resources.md index cb6cfe6..34327c7 100644 --- a/community-resources.md +++ b/community-resources.md @@ -59,6 +59,10 @@ https://github.com/tuchk4/awesome-css-in-js A collection of awesome things regarding CSS in JS approaches +- **"What are your top React/React Native Blogs that you frequent?"** + https://www.reddit.com/r/reactjs/comments/5t8loz/what_are_your_top_reactreact_native_blogs_that/ + Several comments listing good React-related blogs, including my own list of high-quality blogs that I subscribe to. + #### People diff --git a/immutable-data.md b/immutable-data.md index 52149b5..17b066d 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -77,6 +77,10 @@ https://blog.komand.com/object-comparison-in-react-js-components Some examples of comparing objects inside of React's lifecycle methods, and how to update them properly. +- **Handling State in React: Four Immutable Approaches to Consider** + https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5 + A summary of four different ways to update state immutably + #### Immutable Data Libraries @@ -119,3 +123,15 @@ - **Immutable Deep State Updates in React with Ramda.js** https://vanslaars.io/post/setstate-lenses/ Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic + +- **Why I Don't Use Immutable.js with Redux** + https://medium.com/front-end-hacking/why-i-dont-use-immutable-js-with-redux-db05004f436 + Thoughts on the pros and cons of using Immutable.js in a Redux app + +- **Should I use Immutable.js with Redux?** + https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e + A detailed list of pros and cons for using Immutable.js in a Redux app + +- **Practical Guide to using Immutable.js with Redux and React** + https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2 + A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux \ No newline at end of file diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 4f6683c..c32d538 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -40,6 +40,10 @@ https://www.sitepoint.com/manage-javascript-application-state-mobx/ A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates +- **MobX + React Tutorial: Building your first app** + http://orlandohamsho.com/javascript/mobx-react-tutorial-building-first-application/ + A walkthrough that builds a basic list/detail application, and introduces the basics of MobX along the way. + #### Testing diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index eca0a58..7113ec3 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -43,6 +43,10 @@ https://css-tricks.com/projects-need-react/ A response to the previous article, suggesting that React has benefits across a wide variety of applications. +- **Why I'm betting on React Native for my next Startup** + https://calbucci.com/why-im-betting-on-react-native-for-my-next-startup-3b8ff5ae03e4 + A startup product lead gives several reasons why he's using React Native for their large app, including uniformity of experience, testing, recruiting, and scalability. + #### Redux/Flux Comparisons diff --git a/react-ajax.md b/react-ajax.md index c25cb7e..e25d6e6 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -80,4 +80,7 @@ - **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 + +- **A Better Way To Handle Loading State In Redux** + http://nikolay.rocks/2017-06-18-better-redux-loading + Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches. Talks about Redux, but applies to React as well. \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index e56a75a..29593bc 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -228,6 +228,10 @@ https://medium.com/@kylpo/you-can-spread-props-in-jsx-but-should-you-6cc3e766e281 Some thoughts on the pros and cons of using JSX's object spread operator, including examples of how it is compiled via Babel +- **Techniques for decomposing React components** + https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da + Three useful techniques for splitting up components: splitting render methods, passing React elements as props, and extracting higher-order components. + #### React Architecture diff --git a/react-component-patterns.md b/react-component-patterns.md index cdd8c77..58da9b0 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -107,6 +107,10 @@ https://github.com/xat/react-component-composition-cheatsheet A useful list of ways to combine components together +- **Avoiding deeply nested component trees** + https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991 + Examples of `children` to include arbitrary content inside of a component for more flexible handling of presentation and composition. + #### React Component Lifecycle @@ -288,7 +292,7 @@ Comparisons and examples for these two component patterns - **ReactCasts: Higher Order Components** - https://www.youtube.com/watch?v=LTunyI2Oyzw + https://youtu.be/6nVxCWUAEPM A screencast that walks through the idea and usage of Higher Order Components - **ReactCasts: Function as Child Component** @@ -398,6 +402,14 @@ http://www.primaryobjects.com/2017/05/08/integrating-react-with-an-existing-jquery-web-application/ Covers 3 methods for methods for integrating React and jQuery: referencing jQuery from within React, using a helper class passed to React, and using a pub-sub model passed to React. +- **Building D3 Components with React** + https://hackernoon.com/building-d3-components-with-react-7510e4743288 + A detailed walk through custom integration of D3 and React without use of an additional library. + +- **PixiJS Application in a React Component** + https://www.protectator.ch/post/pixijs-v4-in-a-react-component + A quick example of loading PixiJS and wrapping it in a React component, showing the basics for integration. + #### Modal Dialogs @@ -450,6 +462,10 @@ https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566 A list of 5 useful HOCs provided by the Recompose library, including `branch` and `withHandlers`. +- **ReactCasts #11: Recompose** + https://youtu.be/SQtrgiLy3Fo + A screencast that introduces the Recompose library and explains some of its useful tools like `withState` and `branch`. + #### Other Component Patterns @@ -480,4 +496,4 @@ - **Creating a cross-domain React component with xcomponent** https://medium.com/@bluepnume/creating-a-cross-domain-react-component-with-xcomponent-fbcccc4778fd A look at how to wrap a React component using the xcomponent library, so that it can be rendered and used across domains. - + \ No newline at end of file diff --git a/react-deployment.md b/react-deployment.md new file mode 100644 index 0000000..891a2b5 --- /dev/null +++ b/react-deployment.md @@ -0,0 +1,30 @@ +### React Deployment + +- **Understanding React deployment** + https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd + An excellent overview of the basic steps needed to deploy a React app, including solutions for common problems such as routing producing 404s and changes not showing up properly. + +- **Surge vs Github Pages: How to deploy a create-react-app project** + https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 + Shows how to deploy a CRA-based app onto the Surge.sh and Github Pages static hosting sites + +- **Fullstack React: Deploying a React App** + https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/ + https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/ + A pair of articles that show how to deploy a React app's static assets onto Amazon S3, and a backend API server onto Heroku + +- **Deploying React + Redux to Heroku** + http://www.thegreatcodeadventure.com/deploying-react-redux-to-heroku/ + Covers configuring Webpack for production, setting up build tasks and environment variables, configuring an Express server, and pushing the app to Heroku + +- **Create-React-App with an Express Backend** + https://daveceddia.com/create-react-app-express-backend/ + A quick overview showing how to configure Create-React-App to proxy API requests to a separate server (example uses Express, but applies to any other app server). + +- **Create-React-App with Express in Production** + https://daveceddia.com/create-react-app-express-production/ + Shows how to set up an React app with an Express server that serves as both API server and static file server, and deploy it to Heroku. + +- **From React to an Electron app ready for production** + https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3 + Walks through the basics of configuring a Create-React-App-based Electron app and building it for production. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 80b26c6..4bc2381 100644 --- a/react-performance.md +++ b/react-performance.md @@ -151,6 +151,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component +- **React at Light Speed** + https://blog.vixlet.com/react-at-light-speed-78cd172a6411 + The Vixlet team discusses perf optimizations they've applied to their app. Includes a lot of the common advice like use of `shouldComponentUpdate`, but also has advice on use of literal values and issues with performance traps with JS timer functions. + #### Code Splitting and Progressive Apps diff --git a/react-routing.md b/react-routing.md index aa0651e..b7cdefd 100644 --- a/react-routing.md +++ b/react-routing.md @@ -5,13 +5,7 @@ - **Routing React Apps: The Complete Guide** https://scotch.io/tutorials/routing-react-apps-the-complete-guide An in-depth article covering use of React-Router (v2) - -- **Let the URL Do the Talking** - http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/ - http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/ - http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/ - http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/ - A series of articles discussing pain points when using React-Router and Redux together, and introducing a library called Redux-Little-Router as an alternative + - **Do I Even Need a Routing Library?** http://jamesknelson.com/even-need-routing-library/ @@ -38,6 +32,32 @@ Examples of how to implement a custom routing approach, with minimal external dependencies. +#### Routing with Redux + +- **Let the URL Do the Talking** + http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/ + http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/ + http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/ + http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/ + A series of articles discussing pain points when using React-Router and Redux together, and introducing a library called Redux-Little-Router as an alternative + + +- **An Introduction to the Redux-First Routing Model** + https://medium.freecodecamp.com/an-introduction-to-the-redux-first-routing-model-98926ebf53cb + An article that argues in favor of keeping location state in Redux, updating it with actions, and syncing the browser URL based on that state. Includes a sample implementation for the approach, and a link to the actual library the author built. + +- **Pre Release: Redux-First Router - A Step Beyond Redux-Little-Router** + https://medium.com/faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea + An opinionated article that argues against the approaches used by both React-Router and Redux-Little-Router, in favor of basing routing state in Redux, with a corresponding new library. + +- **Routedux - Routing the Redux way** + https://cjdev.github.io/routedux/ + An article introducing a library that maps URLs to actions and vice versa. + +- **Entering/Leaving hooks of routing for Redux apps** + https://medium.com/@kuy/entering-leaving-hooks-of-routing-for-react-redux-app-22e6eea055a5 + Discusses use of enter/leave routing hooks for handling component data fetching needs, and how that is handled with the author's Redux-based routing library. + #### Authentication diff --git a/react-server-rendering.md b/react-server-rendering.md index 93580d6..0862ab0 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -39,4 +39,8 @@ - **Code Cracked for Code Splitting + SSR in Reactlandia: React Loadable + Webpack Flush Chunks** https://hackernoon.com/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8 - Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems. \ No newline at end of file + Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems. + +- **Server-Side React Rendering** + https://css-tricks.com/server-side-react-rendering/ + A good tutorial that walks through the basic setup needed to start rendering React components into HTML in an Express server. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 08a5105..f8bd793 100644 --- a/react-styling.md +++ b/react-styling.md @@ -135,8 +135,13 @@ The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own -#### Techniques +#### Techniques and Examples - **How to build animated microinteractions in React** https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8 Examples of various ways to create small animations to give feedback as the user interacts with components - \ No newline at end of file + +- **Create That Component** + https://medium.com/taitounited/create-that-component-1-7a2267bc2833 + https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a + https://medium.com/taitounited/create-that-component-3-25f1f722cead + A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 3ef233f..5564477 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -23,6 +23,10 @@ - **React Fundamentals** https://reacttraining.com/online/react-fundamentals A free online course from the React Training company. Covers key aspects of Javascript, React concepts as of React 15.5, React Router v4, and building and deploying an application. + +- **React Express** + http://www.react.express/ + An all-in-one beginner's guide to modern React application development. Gives an opinionated walkthrough through create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more. - **React to the Future** http://elijahmanor.com/talks/react-to-the-future/dist/#/ @@ -116,6 +120,16 @@ https://www.youtube.com/watch?v=dRo_egw7tBc A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React +- **React by Example** + https://medium.com/front-end-hacking/react-by-example-part-1-76d3e2137cf4 + https://medium.com/front-end-hacking/react-by-example-part-2-340582c6f552 + https://medium.com/@johntucker_48673/react-by-example-part-3-f825444bc1d8 + https://medium.com/@johntucker_48673/react-by-example-part-4-5d32168db362 + https://medium.com/@johntucker_48673/react-by-example-part-5-e1716e69dacc + https://medium.com/@johntucker_48673/react-by-example-part-6-8c71dda057ac + https://medium.com/@johntucker_48673/react-by-example-part-7-8dc97b57f668 + A multi-part series that illustrates core React concepts via a series of small example repos, with explanations of the source and concepts in the articles. + #### React Project Setup @@ -288,8 +302,6 @@ http://react.tips/from-react-to-flux-to-redux/ Four implementations of a shopping list application, built with varying approaches to help you see the differences: React/ES5, React/ES6, React/Flux/ES5, React/Redux/ES6. - - - **Create an Instagram-like App with Node.js, React, and Redux** http://www.eloquentwebapp.com/instagram-app-node-react-redux/ An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more. @@ -309,6 +321,22 @@ https://scotch.io/tutorials/retrogames-library-with-node-react-and-redux-1-server-api-and-react-frontend Part 1 of a series building an application using Node, React, Redux, and MongoDB with Mongoose. +- **Building a React Component Library** + https://hackernoon.com/building-a-react-component-library-part-1-d8a1e248fe6c + https://hackernoon.com/building-a-react-component-library-part-2-46fd4f77bb5c + https://hackernoon.com/building-a-react-component-library-part-3-adb2cd0e021c + A series that walks through how to build your own React component library and publish it to NPM. + +- **Building Powerful List Components in React** + https://www.robinwieruch.de/react-paginated-list/ + https://www.robinwieruch.de/react-infinite-scroll/ + https://www.robinwieruch.de/react-advanced-list-component/ + An excellent 3-part series that shows how to build real-world list components that handle pagination and infinite scrolling, using concepts like higher-order-components. + +- **Accept Stripe Payments with React and Express** + https://www.robinwieruch.de/react-express-stripe-payment/ + Demonstrates building a small app that handles payment information using the Stripe service + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index 1dde1a4..47b48f6 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -107,6 +107,10 @@ https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a Peggy Rayzis from MLS shares a detailed look at how they used the React Apollo library and GraphQL to drastically simplify their Redux application +- **"I made a diagram of my first React app - do you see anything that's going to bite me?"** + https://www.reddit.com/r/reactjs/comments/6ec4dz/i_made_a_diagram_of_the_design_of_my_first_react/ + A Reddit thread with some excellent discussion about how Apollo and GraphQL fit into the architecture of a Redux application. + #### Redux Best Practices @@ -228,6 +232,14 @@ - **React Native, Redux, and Firebase for experts, by dummies** https://medium.com/rumors/react-native-redux-and-firebase-for-experts-by-dummies-6376becdd5c8 The Rumors team describes how they've structured their Redux+Firebase application, and some of the things they ran into + +- **Redux Architecture Guidelines** + http://joeellis.la/redux-architecture/ + Several useful tips for building a good Redux app, including planning state shape, avoiding nesting, storing plain data, and more. + +- **Getting started in React with Redux** + https://medium.com/@simonhfrost/getting-started-in-react-with-redux-8b2b42b66dee + Some quick tips for structuring a Redux app, including several related to organizing state. #### Encapsulation and Reusability @@ -370,4 +382,8 @@ - **Introducing FilterBubbler: A WebExtension built using React/Redux** https://hacks.mozilla.org/2017/06/introducing-filterbubbler-a-webextension-built-using-reactredux/ - Describes how the authors built a browser WebExtension that uses the Redux-WebExt bridge as part of the implementation. \ No newline at end of file + Describes how the authors built a browser WebExtension that uses the Redux-WebExt bridge as part of the implementation. + +- **Scaling Redux for real-life applications** + https://hackernoon.com/scaling-redux-for-real-life-applications-be18c731a54d + Describes a variation of the "ducks" structure that divides code into "basic concepts" that contain app state and minimal logic, and "container concepts" that contain minimal data and implement most application logic. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 2e71659..f67549b 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -197,6 +197,10 @@ https://gist.github.com/iammerrick/fc4a677cea11d9c896e8d3a29a184f91 A small essay on the benefits of treating effects as data, and how it enables decoupling +- **redux-saga factories and decorators** + https://medium.com/@TomasEhrlich/redux-saga-factories-and-decorators-8dd9ce074923 + Some quick examples of creating reusable sagas to reduce duplicate code + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index 3e4a5c8..424b4fd 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -39,6 +39,10 @@ https://blog.logrocket.com/redux-logging-in-production-3b2a4816b713 https://blog.logrocket.com/maximizing-debuggability-with-redux-79b2ad07b64c A pair of articles discussing a variety of aspects and approaches for debugging Redux apps. Includes several mentions of the LogRocket service, but also covers other tools and approaches, including building your own analytics pipeline. + +- **Redux DevTools for Dummies** + https://medium.com/@tylerwclark/redux-devtools-for-dummies-74566c597d7 + An overview of the Redux DevTools Extension, including examples of how to properly add the DevTools when setting up a Redux store, and explanations of the various parts of the extension's UI. #### Reducers @@ -180,9 +184,10 @@ http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680 Dan Abramov describes a great technique for descriptively managing React modal dialogs using Redux actions and state, by storing names of components and their props. -- **"Generic Modal Dialogs with Feature-Specific Actions"** +- **Creating Reusable Generic Modals in React and Redux** + http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/ https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3 - A follow-on to Dan's technique, with a short suggestion for using generic modal components in a variety of situations by including actions as props. + Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.) - **Implement a confirm modal using React & Redux** http://jslancer.com/2016/08/07/implement-a-confirm-modal-using-react-redux/ @@ -212,6 +217,10 @@ 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 +- **Practical Recursion: Implementing a File Item Tree View in React & Electron** + https://codeburst.io/practical-recursion-implementing-a-file-tree-view-in-react-electron-af62e7b46d26?gi=da3b8e9bf9ee + Demonstrates implementing a tree view component that shows folder structure read from the filesystem, and managing the visibility of tree nodes in Redux + #### Redux and Forms @@ -316,6 +325,11 @@ - **Let the Buyer Beware: React Redux Rerender Gotcha** https://www.nathanl.in/posts/let-the-buyer-beware-react-redux-rerender-gotcha An article describing some similar concerns regarding timing of Redux actions and React lifecycle methods, especially in regards to tracking loading state. + +- **Why I created Redux-Tiles library to deal with Redux verbosity** + http://blog.bloomca.me/2017/06/02/why-i-created-redux-tiles-library.html + https://news.ycombinator.com/item?id=14482215 + Describes several concerns with increasing verbosity and complexity in Redux apps, and how the author's library can help simplify those. #### Network Management @@ -336,4 +350,3 @@ - **Introducing Redux Offline: Offline-First Architecture for Progresive Web Applications** https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0 An excellent blog post explaining the need for better offline behavior in web apps, and introducing a new Redux-based library that helps manage that behavior. - diff --git a/redux-tutorials.md b/redux-tutorials.md index 1701473..75702f9 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -118,6 +118,13 @@ https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/ A short but clear explanation of what the React-Redux library does, and how its `connect` function works to interact between React components and a Redux store (including several helpful diagrams). +- **Redux by Example** + https://medium.com/front-end-hacking/redux-by-example-part-1-4afca1b7bd58 + https://medium.com/front-end-hacking/redux-by-example-part-2-e9750574e3c1 + https://medium.com/front-end-hacking/redux-by-example-part-3-52e82d82d861 + https://medium.com/front-end-hacking/redux-by-example-part-4-474c76eec86d + A 4-part series that illustrates core Redux concepts via a series of small example repos, with explanations of the source and concepts in the articles. + #### Project-Based Tutorials @@ -287,11 +294,12 @@ https://engineering.universe.com/reading-redux-ca160163867e A guided walkthrough of the code for Redux's `createStore` function + #### Paid Courses and Books - **The Complete Redux Book** https://leanpub.com/redux-book - How do I manage a large state in production? Why do I need store enhancers? What is the best way to handle form validations? Get the answers to all these questions and many more using simple terms and sample code. Learn everything you need to use Redux to build complex and production-ready web applications. + How do I manage a large state in production? Why do I need store enhancers? What is the best way to handle form validations? Get the answers to all these questions and many more using simple terms and sample code. Learn everything you need to use Redux to build complex and production-ready web applications. (Note: now permanently free!) - **Developing a Redux Edge** https://bleedingedgepress.com/developing-a-redux-edge/ diff --git a/static-typing.md b/static-typing.md index 92152f3..03c9634 100644 --- a/static-typing.md +++ b/static-typing.md @@ -160,6 +160,10 @@ - **Porting a React and Redux Application to TypeScript** https://bytesized.xyz/react-redux-typescript/ Demonstrates porting an existing React+Redux sample app to use TypeScript + +- **React Higher Order Components in TypeScript made simple** + https://dev.to/danhomola/react-higher-order-components-in-typescript-made-simple + Demonstrates how to extract an HOC and properly define types for various groups of props #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index c647b38..65a41b7 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -78,6 +78,10 @@ http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ Shows how to configure Webpack to load the Cesium 3D globe library, and how to set up a Webpack config that uses DllPlugin to build a separate bundle for Cesium. +- **Tree shake Lodash with Webpack, Jest, and Typescript** + https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd + Walks through ways to configure Webpack and Babel to properly tree shake Lodash so that it only includes used functions. + #### Code Splitting and Chunking @@ -129,6 +133,10 @@ https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923 An excellent dive into multiple aspects of code splitting, including basic setup, advanced config, and some Webpack gotchas/tips. +- **How to use Webpack's new "magic comment" feature with React Universal Component + SSR** + https://medium.com/webpack/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a + Introduces Webpack's new "magic comments" feature for defining chunk names, and shows how to use that in association with a couple of libraries for optimized server-side rendering approaches + #### Bundle Sizes and Visualization @@ -329,6 +337,14 @@ https://medium.com/appifycanada/migrate-to-webpack-from-grunt-bower-legacy-build-system-344526f47873 A recap of the steps needed to migrate an Angular app's build system to Webpack, including managing imports, handling global variables, and code splitting. +- **Case study: improving the Polished size for Webpack users** + https://iamakulov.com/notes/polished-webpack/ + A detailed investigation of bundle size issues for the Polished library, and steps taken to improve the sizes for distribution. + +- **Unambiguous Webpack Config with Typescript** + https://medium.com/webpack/unambiguous-webpack-config-with-typescript-8519def2cac7 + Shows how to use Typescript and type definitions to ensure correct setup of Webpack configs. + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 705e00f..a79d5a9 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -166,6 +166,13 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack - From Journeyman to Master** https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/ A follow-up presentation, digging into advanced Webpack concepts, configuration, and internals + +- **webpack By Example** + https://medium.com/front-end-hacking/webpack-by-example-part-1-1d07bc42006a + https://medium.com/front-end-hacking/webpack-by-example-part-2-ff6c75b1e20 + https://medium.com/front-end-hacking/webpack-by-example-part-3-a4ceaaa6299a + https://medium.com/front-end-hacking/webpack-by-example-part-4-f55821016821 + A 4-part series that illustrates core Webpack concepts via a series of small example repos, with explanations of the source and concepts in the articles. #### Configuration Terms and Concepts @@ -226,6 +233,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config Explains what Webpack is by explaining some of the problems it attempts to solve, and looks at the basics of a Webpack configuration. +- **Stages of Learning Webpack, Part 3 - SourceMaps, Loaders, and Plugins** + https://dev.to/nitishdayal/stages-of-learning-webpack-pt-3---sourcemaps-loaders--plugins + Shows how to configure sourcemaps for debugging, use a loader to add TypeScript support, and add a plugin to generate an HTML index page for the bundle. + #### Webpack Configuration Utilities