diff --git a/basic-concepts.md b/basic-concepts.md index bea820c..64dbd9a 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -68,6 +68,14 @@ 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. +- **The melting pot of JavaScript** + https://increment.com/development/the-melting-pot-of-javascript/ + Dan Abramov discusses the apparent messiness of the JavaScript ecosystem, why there's a proliferation of tools and libraries, the complexity of configuring those tools, and how providing good defaults can lead to a better experience for the community. + +- **Modern JavaScript Explained for Dinosaurs** + https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70 + Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context. Includes examples of how different tools were used and and what problems they help solve. + #### Suggested Learning Approaches diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index 88a4007..65a02b5 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -132,4 +132,8 @@ https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15 https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5 - An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript. \ No newline at end of file + An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript. + +- **Setting up Webpack, Babel, and React from scratch in 2017** + https://stanko.github.io/webpack-babel-react-revisited/ + A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch. \ No newline at end of file diff --git a/framework-comparisons.md b/framework-comparisons.md index c88a53a..bf4daf1 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -9,6 +9,10 @@ - **Comparing Frontend Approaches** https://medium.com/@peterxjang/comparing-frontend-frameworks-part-1-introduction-6cf3d49e42cf A series that builds the same notes app with jQuery, Vue, React, and Elm, and compares the pros and cons of the approaches. + +- **Web Framework Comparisons** + https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/ + A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia. Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness. The series is written by a company that works on Dojo, but the comparisons and descriptions are fair. #### React and Flux vs Backbone @@ -28,3 +32,10 @@ - **From Backbone to React (comments)** https://news.ycombinator.com/item?id=8329837 Discussion on the previous article + + +#### Migrating to React + +- **How to migrate an application from AngularJS to React and Redux** + https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa + Recaps several useful techniques to use when migrating an Angular 1.x app to React and Redux, including moving the build to use Webpack, rendering React components inside of Angular directives, sharing dependencies, and integrating Redux into the application. \ No newline at end of file diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 5330ac3..39f7a9d 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -82,6 +82,10 @@ https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities. +- **MobX (with Decorators) in create-react-app** + https://www.robinwieruch.de/create-react-app-mobx-decorators/ + Covers how to use MobX in a CRA project, with and without decorators. + #### MobX and Redux Comparisons diff --git a/react-architecture.md b/react-architecture.md index c629aed..e3b6173 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -114,6 +114,10 @@ - **React's Ecosystem as a flexible Framework** https://www.robinwieruch.de/essential-react-libraries-framework/ Robin Wieruch discusses why React's "just the view" + "pick-and-choose libraries" approach is ultimately a good thing, and provides some opinionated decisions on good library choices for several categories such as app boilerplate, utility library, styling, AJAX requests, and more. + +- **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 Best Practices @@ -252,6 +256,9 @@ https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ An excellent list of principles to consider when designing React components, including single responsibility, encapsulation, reusability, testability, and meaning. +- **8 Key React Component Decisions** + https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594 + A list of important design decisions to consider when starting a React project, including use of a starter kit, preferred component definition approach, state management, styling, and more. #### React Architecture diff --git a/react-component-composition.md b/react-component-composition.md index 22d5260..c1fa619 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -142,6 +142,10 @@ https://www.bignerdranch.com/blog/destroy-all-classes-turn-react-components-inside-out-with-functional-programming/ Demonstrates progressively refactoring a class component with logic into separate functional components, and then tying them together with Recompose +- **A React journey: from vanilla, to type-safe, to monadic** + https://medium.com/@giuseppemaggiore/a-react-journey-from-vanilla-to-type-safe-to-monadic-41beaa386910 + Demonstrates adding TypeScript to a JS React app for type-checking, then using a specialized library called Monadic-React to perform complex and type-safe composition of React components and logic. + #### Comparing Composition Approaches @@ -166,3 +170,6 @@ https://medium.com/alexkrolick/react-composition-patterns-from-the-ground-up-8401aaad93d7 Comparison of patterns such as Lifting State, Higher-Order Components, Render Callbacks, and "Renderless" State Providers, and how they relate to React's component model. +- **Solving the problems of Higher Order Components without throwing the baby out with the bathwater** + https://hackernoon.com/solving-the-problems-of-higher-order-components-without-throwing-the-baby-out-with-the-bathwater-40ddc72df5aa + A response to some criticisms of HOCs, such as indirection and naming collisions, showing some ways to compose HOCs to avoid the issues. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index b7318b1..22d1fe8 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -27,21 +27,9 @@ https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c Clarifies the meaning of the terms, which are often used in overlapping ways. -- **How to use Classes and Sleep at Night** - https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4 - Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components. - - **Embracing Functions in React** 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. + A look at stateless functional components in React, and why they might be useful or should be considered in the first placee. - **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/ @@ -51,6 +39,29 @@ https://github.com/vasanthk/react-bits An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource. +- **Simple React Patterns** + http://lucasmreis.github.io/blog/simple-react-patterns/ + A clearly written set of examples that showcase common React component patterns like "container/presentational", "Higher-Order Components", "Function-as-Child" / "render props", and "providers". + + +#### Component Definition Approach Comparisons + +- **How to use Classes and Sleep at Night** + https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4 + Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components. + +- **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. + +- **7 Reasons to Outlaw React's Functional Components** + https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c + The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components. Some good discussion in the comments. + +- **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. + - **We Jumped the Gun Moving React Components to ES2015 Class Syntax** https://medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3 A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments. @@ -269,6 +280,8 @@ Describes four categories of React components ("view", "control", "controllers", and "containers"), and gives suggestions on when and how to factor out new components. + + #### Wrapping Non-React Code - **React and third-party libraries** diff --git a/react-deployment.md b/react-deployment.md index 3992b57..5a9d713 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -40,4 +40,7 @@ - **Using React in Multiple Environments** https://daveceddia.com/multiple-environments-with-react/ Discusses strategies for handling deployments to dev/staging/prod-type environments, including configuration of API endpoints and feature flags. - \ No newline at end of file + +- **Deploy a React app with SASS using Nginx** + http://zabana.me/notes/build-deploy-react-app-with-nginx.html + Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index e41f87c..30cc44e 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -33,21 +33,7 @@ #### JSX and Events -- **How the JSX Transform Works** - https://jaketrent.com/post/how-jsx-transform-works/ - A helpful explanation of how JSX tags are transformed into React elements, with example snippets -- **JSX In Depth - an interactive tutorial** - http://blog.klipse.tech/javascript/2016/12/14/jsx.html - An interactive version of the "JSX in Depth" tutorial from the React docs - -- **Events in React** - https://www.kirupa.com/react/events_in_react.htm - An introduction to React's event handling system, including useful tips and some gotchas - -- **React events in depth** - 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 #### Miniature React Implementations @@ -87,7 +73,8 @@ https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0 https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37 - An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`. + https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec + An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`, `setState`, and the "Fiber" reconciliation approach. - **deact: React under the hood** https://github.com/lukebelliveau/deact @@ -209,6 +196,10 @@ https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520 A helpful list of links to further articles and resources for learning about React Fiber +- **React Fiber for the rest of us** + http://www.benmvp.com/slides/2017/reactboston/fiber.html#/ + Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16. + - **React Fiber Architecture** https://github.com/acdlite/react-fiber-architecture A description of React's new core algorithm, React Fiber diff --git a/react-performance.md b/react-performance.md index 0739882..175115d 100644 --- a/react-performance.md +++ b/react-performance.md @@ -9,6 +9,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://facebook.github.io/react/docs/advanced-performance.html https://facebook.github.io/react/docs/perf.html The React doc pages on performance. Describes the core concepts, including shouldComponentUpdate, using immutable data, and the Performance API for benchmarking. + +- **React, Inline Functions, and Performance** + https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 + An excellent article Ryan Florence that pushes back against the "creating functions in render is slow" conventional wisdom in the React community. This article is a must-read discussion on React performance. - **Performance Engineering with React** http://benchling.engineering/performance-engineering-with-react/ @@ -168,6 +172,7 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) - **When to use Component or PureComponent** https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81 Good advice on the potential benefits of using `PureComponent`, as well as several potential downsides or gotchas (such as binding functions in `render()`). + #### Code Splitting and Progressive Apps @@ -207,6 +212,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://medium.com/progressive-web-apps/react-progressive-web-apps-part-2-d55c6bd4b316 A pair of posts that cover how to set up an initial PWA and check its behavior against best practices, and how to add offline-first behavior to a React+Redux PWA. +- **What profiling my Universal React-Redux app revealed** + https://medium.com/@darioghilardi/what-profiling-a-universal-react-redux-app-revealed-c5cc4986353c + Discusses using the Chrome DevTools to debug and do CPU profiling of a Node server process that was doing server-side rendering of a React app. + #### Immutable Data diff --git a/react-redux-testing.md b/react-redux-testing.md index 8e9e6d0..3ecc4d7 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -245,6 +245,10 @@ - **Writing tests for redux-observable** https://dev.to/julioolvr/writing-tests-for-redux-observable Quick examples of how to set up tests for redux-observable epics. + +- **End-to-end testing on a React-Redux app** + https://medium.com/@darioghilardi/end-to-end-testing-on-a-react-redux-app-10f5a26f2f61 + Some high-level thoughts of how to best implement end-to-end testing in a way that works with React-Redux apps. Discusses use of Cypress, real APIs vs mock APIs, and some Rails-specific setup. diff --git a/react-server-rendering.md b/react-server-rendering.md index fde932a..c835fcf 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -61,4 +61,16 @@ - **Simple declarative Redux state with React Router 4 server side rendering** https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d - Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. \ No newline at end of file + Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. + +- **Server-side rendering with create-react-app** + https://medium.com/@cereallarceny/server-side-rendering-with-create-react-app-fiber-react-router-v4-helmet-redux-and-thunk-275cb25ca972 + Demonstrates how to set up server-side-rendering with a standard CRA project to allow proper meta tags to be added without having to eject. Includes sample code for creating an Express app that does the work. + +- **React SSR** + https://blog.eleven-labs.com/en/react-ssr/ + A step-by-step guide to setting up an SSR React app from scratch, including use of Redux. + +- **Case study of SSR with React in a large e-commerce app** + http://blog.jakoblind.no/case-study-of-ssr-with-react-in-a-large-e-commerce-app/ + A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details. \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index 5d90a37..5b5d60d 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -11,7 +11,7 @@ Explains that "props" are data passed in to a component, while "state" is data managed inside a component. - **Props vs State** - https://github.com/uberVU/react-guide/blob/master/props-vs-state.md + https://github.com/uberVU/react-guide/blob/master/props-vs-state.md A quick summary of the differences between "props" and "state" in React components - **The 5 Types of React Application State** diff --git a/react-styling.md b/react-styling.md index 667cc21..9655992 100644 --- a/react-styling.md +++ b/react-styling.md @@ -158,7 +158,9 @@ https://medium.com/@tkh44/emotion-ad1c45c6d28b The author of the Emotion library gives an overview of its principles, benchmarks, and uses. - +- **With styled-components into the future** + https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c + A talk transcript that discusses the history and future direction of the Styled-Components library, including how it works, improvements in v2, and plans for interoperability between CSS-in-JS libraries. #### Techniques and Examples diff --git a/react-techniques.md b/react-techniques.md index fe41ece..baea6c9 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -35,7 +35,7 @@ Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples. -#### JSX +#### JSX and Events - **Is JSX Still Relevant? Are there other options?** https://goshakkk.name/jsx-relevancy-options/ @@ -57,6 +57,26 @@ https://medium.com/@alexkrolick/writing-react-components-for-3rd-party-embedding-50331c18e26 Describes how using `React.createElement` instead of JSX eliminates the need for a compile step, compares examples of equivalent JSX and `createElement` usage, and shows how to write a small embeddable widget using React/Preact that doesn't need any build step at all. +- **9 Things You Should Know About JSX** + https://dev.to/sarah_chima/9-things-you-should-know-about-jsx-3bm + A useful explanation of what JSX syntax is, how it works, and and how to use it. + +- **How the JSX Transform Works** + https://jaketrent.com/post/how-jsx-transform-works/ + A helpful explanation of how JSX tags are transformed into React elements, with example snippets + +- **JSX In Depth - an interactive tutorial** + http://blog.klipse.tech/javascript/2016/12/14/jsx.html + An interactive version of the "JSX in Depth" tutorial from the React docs + +- **Events in React** + https://www.kirupa.com/react/events_in_react.htm + An introduction to React's event handling system, including useful tips and some gotchas + +- **React events in depth** + 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 + #### Debugging and Error Handling diff --git a/redux-architecture.md b/redux-architecture.md index e513dbc..f144073 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -268,6 +268,10 @@ - **Tips for success with React and Redux** https://medium.com/@AlexFaunt/tips-for-success-with-react-and-redux-b782c6b22ff0 Advice on how much of your React component tree should be connected to Redux, using non-HTML components to manage things like document titles, consistently using actions for app behavior, and moving app logic out of components. + +- **Chart the Stock Market with React, Redux, React-Vis, and Socket.io** + https://medium.com/@ddcreationstudi/chart-the-stock-market-with-react-redux-react-vis-and-socket-io-18caf312693c + An overview of approaches used and lessons learned in writing a real-time stock market charting example app. Not a tutorial specifically, but some useful ideas for structuring things. #### Encapsulation and Reusability diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index aca31a8..e865cf4 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -67,6 +67,10 @@ https://hackernoon.com/a-small-trick-to-write-clean-reducers-a0b1b1eff3d2 Shows a contrived example of updating deeply nested state, and discusses use of `lodash/fp` to simplify the update logic instead. +- **Dynamic Store Injection for Redux** + https://docs.google.com/presentation/d/1JA9hhBgx9-k0sHO9UVSTiD1WTBvsZJ13cWIudUao9vE/edit#slide=id.gcb9a0b074_1_0 + A slideshow that demonstrates the basic approach for dynamically adding reducers at runtime. + #### Selectors and Normalization @@ -159,4 +163,9 @@ - **The only reducer you will ever need** https://medium.com/riipen-engineering/the-only-reducer-you-will-ever-need-4dd41206f980 - Demonstrates using Normalizr and seamless-immutable to write a generic entity merging reducer \ No newline at end of file + Demonstrates using Normalizr and seamless-immutable to write a generic entity merging reducer + +- **How to use Normalizr to organize data in a Redux store** + https://dashbouquet.com/blog/frontend-development/using-normalizr-to-organize-data-in-stores-practical-guide + https://dashbouquet.com/blog/frontend-development/using-normalizr-to-organize-data-in-store-part-2 + A 2-part post with examples of normalizing nested data using Normalizr, using Redux-Saga to control the fetching logic, and denormalizing the data for use in the UI. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index b3a854a..1bcc3c2 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -119,6 +119,10 @@ https://twitter.com/rem/status/888361414070501376 A Twitter poll asking about people's preferences for handling async work in Redux. The replies are interesting, and show a very wide variety of choices being used. +- **Understanding redux-saga: from action creators to sagas** + https://blog.logrocket.com/understanding-redux-saga-from-action-creators-to-sagas-2587298b5e71 + Some short examples comparing implementations of the same fetching logic inside a component, using redux-thunk, and using redux-saga. + #### Sagas @@ -250,6 +254,14 @@ https://medium.com/@felixclack/when-should-i-use-a-saga-708cb3c75e9a Some quick rules of thumb for determining if building a saga is a good choice for a given feature. +- **Redux Saga: the Viking way to manage side effects** + https://www.slideshare.net/nachomartin/redux-sagas-react-alicante + A comprehensive slideset that covers many aspects of sagas, from basic concepts to use with complex workflows. + +- **Detecting state changes with Redux-Saga** + https://goshakkk.name/detect-state-change-redux-saga/ + Shows a simple but useful technique for running saga behavior based on state changes rather than just dispatched actions. + #### Other Side Effect Approaches diff --git a/redux-ui-management.md b/redux-ui-management.md index 9574083..7ccc5bf 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -69,6 +69,10 @@ https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-bab357d6c33c Some simple examples of how to use Redux and vanilla JS canvas code to draw canvas-based UIs with minimal dependencies. +- **React/Redux with Mapbox** + https://medium.com/@mcculloughrt/react-redux-with-mapbox-78fa3767211e + Useful techniques for driving the appearance and behavior of a Mapbox-based geospatial app from React and Redux. + #### Redux and Forms diff --git a/redux-without-react.md b/redux-without-react.md index b27dd74..1cbb6f0 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -81,4 +81,7 @@ - **Android.apply(Redux)** https://blog.shazam.com/android-apply-redux-2ad0f7355e0 Discusses a Redux-inspired pattern for use with Android as an alternative to the MVP approach. - \ No newline at end of file + +- **Managing State in Aurelia: How to Use Aurelia with Redux** + https://www.sitepoint.com/managing-state-aurelia-with-redux/ + Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 5cd15ad..a9c1778 100644 --- a/static-typing.md +++ b/static-typing.md @@ -116,6 +116,10 @@ - **Notes on Flow type checking in Javascript** https://davidxmoody.com/2016/notes-on-flow-type-checking-in-javascript/ A variety of quick notes and snippets of Flow syntax for various use cases + +- **Flow Fundamentals for JavaScript Developers** + https://gist.github.com/busypeoples/61e83a1becc9ee9d498e0db324fc641b + A JS file in a gist that provides a commented walkthrough of Flow concepts and syntax. #### React, Redux, and Static Types diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 1c27ef0..345da76 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -162,6 +162,10 @@ https://medium.com/faceyspacey/announcing-react-universal-component-2-0-babel-plugin-universal-import-5702d59ec1f4 Introduces some new Webpack addons and changes that enable dynamic import expressions, including use with SSR. +- **Using Redux Saga and code splitting to async load React components** + https://gist.github.com/jballands/accc2ff19a3702685d469c612d6f0776 + A gist that demonstrates using sagas to drive the loading of React components as needed, with some discussion in the comments of the best way to handle those components once they're received by the app. + #### Bundle Sizes and Visualization @@ -229,6 +233,11 @@ https://evilmartians.com/chronicles/size-limit-make-the-web-lighter Demonstrates writing a tiny library that results in a 100KB Webpack bundle, and then walks through improving the Webpack settings to improve bundle size to only 17B. +- **Put Your Webpack Bundle On A Diet** + https://www.contentful.com/blog/2017/10/10/put-your-webpack-on-a-diet-part-1/ + https://www.contentful.com/blog/2017/10/19/put-your-webpack-bundle-on-a-diet-part-2/ + A multi-part series that covers approaches for shrinking bundle size, ranging from simply using Webpack's -p flag up to advanced optimizations. + #### Hot Module Replacement