diff --git a/README.md b/README.md index 7326310..dcdb774 100644 --- a/README.md +++ b/README.md @@ -143,6 +143,8 @@ If you are new to React, try reading these articles in order. The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information. - [Create-React-App](https://github.com/facebookincubator/create-react-app) The official project creation tool from the React team. Allows you to set up a new React project, with no configuration work required. + - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) + An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production. - [Modern Web Development with React and Redux](http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/) An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples. - [Learn Raw React](http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/) diff --git a/basic-concepts.md b/basic-concepts.md index 862d949..96b16d8 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -129,4 +129,8 @@ - **How to avoid Javascript fatigue and sleep well at night** https://www.javascriptfatigue.club/blog/2016/11/29/how-to-avoid-javascript-fatigue-and-sleep-well-at-night - A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve \ No newline at end of file + A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve + +- **How to Manage Javascript Fatigue** + https://auth0.com/blog/how-to-manage-javascript-fatigue/ + A description of what "JS fatigue" means in practice, and advice for managing it, including "picking battles", "make something interesting", and "be aware of common concepts". \ No newline at end of file diff --git a/es6-features.md b/es6-features.md index 6b85c03..fd4f4c4 100644 --- a/es6-features.md +++ b/es6-features.md @@ -130,6 +130,10 @@ http://www.zsoltnagy.eu/es6-proxies-in-practice/ An overview of how to use ES6 proxies for advanced use cases, with examples +- **ES6 Features - 10 Use Cases for Proxy** + http://dealwithjs.io/es6-features-10-use-cases-for-proxy/ + Lists a variety of ways that ES6 proxies can be used, with links to examples + #### Generators diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 11891fa..8ecbd17 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -62,6 +62,10 @@ https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 MobX creator Michel Weststrate discusses MobX's key concepts, including running all updates synchronously, and potential use of Proxies as a future improvement. +- **Creating a reusable popver system with React and MobX** + https://medium.com/@enitoni/creating-a-reusable-popover-system-with-react-and-mobx-7f47cc3b270d + A useful tutorial on implementing a React modal system driven by MobX state + #### MobX and Redux Comparisons @@ -77,6 +81,10 @@ A great video to understand the differences between MobX and Redux. http://www.robinwieruch.de/redux-mobx-confusion/ An in-depth comparison of the ideas, concepts, approaches, and use cases for the two state management libraries +- **MobX vs Redux: Comparing the Opposing Paradigms** + https://www.youtube.com/watch?v=76FRrbY18Bs&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0&index=8 + A fantastic presentation by Preethi Kasireddy at ReactConf 2017, comparing the philosophies, concepts, tradeoffs, and use cases for Redux and MobX. + - **Redux vs MobX by example** https://hashnode.com/post/redux-vs-mobx-by-example-part-i-intro-and-exploring-redux-cito5m0nn0sssxi53c7zq7jpr https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228 diff --git a/react-ajax.md b/react-ajax.md index 7ca03cb..c25cb7e 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -9,6 +9,10 @@ - **How to make AJAX requests in React?** https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1 A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status. + +- **Where to fetch Data: componentWillMount vs componentDidMount** + https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/ + A quick comparison of when these two lifecycle methods are called, and why AJAX calls should generally be done in `componentDidMount` - **React AJAX Best Practices** http://andrewhfarmer.com/react-ajax-best-practices/ @@ -51,6 +55,10 @@ https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware +- **You don't need a fancy framework to use GraphQL with React** + https://edgecoders.com/you-dont-need-a-fancy-framework-to-use-graphql-with-react-b47b436626fb + A detailed explanation of how to construct GraphQL queries in a client and load the data into React components, without using any complicated libraries. + #### Handling Request Status with State diff --git a/react-architecture.md b/react-architecture.md index 43fe744..c5cd183 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -212,4 +212,5 @@ https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6 https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89 https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391 + https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a A multi-part series that discusses several variations on component and state architecture in detail, with thoughts on the pros and cons of each. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index b79f553..4d3c534 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -44,6 +44,10 @@ 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. +- **React Bits: React patterns, techniques, tips, and tricks** + 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. + #### Component Rendering Logic @@ -131,6 +135,10 @@ https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9 A table listing the lifecycle methods, when they're called, whether each method allows side effects or state updates, and examples uses for each method +- **React Lifecycle Methods - how and when to use them** + https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 + A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call `setState` inside. + #### Component Communication @@ -176,6 +184,10 @@ http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/ An overview of what `context` is, how it works, and when you should use it for passing data +- **Callback functions in React** + https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766 + Some basic explanations of how a React app uses callback functions to communicate from children to parents + #### Component Categories @@ -299,6 +311,14 @@ https://dev.to/kayis/higher-order-what A quick introduction to the concept of Higher Order Functions and Components +- **Reusable State with Higher Order Components** + https://daveceddia.com/extract-state-with-higher-order-components/ + An easy-to-read explanation of how HOCs work, and examples of how to extract common logic into a reusable HOC + +- **React Patterns - Render Callback** + http://leoasis.github.io/posts/2017/03/27/react-patterns-render-callback + An explanation of the "render callback" or "function as child" pattern, including concepts and example uses + #### Wrapping Non-React Code @@ -306,6 +326,14 @@ http://krasimirtsonev.com/blog/article/react-third-party-library-integration Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin +- **Declaratively Rendering Earth in 3D, Part 2: Controlling Cesium with React** + http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-2-cesium-react/ + A detailed description of how to create React components that wrap up a 3D globe library, including use of lifecycle methods for controlling imperative non-React APIs. + +- **When to use Ref on a DOM Node in React** + https://www.robinwieruch.de/react-ref-attribute-dom-node/ + An explanation of the `ref` property, how to use it to access real DOM nodes, and when you should use it. + - **Using React and jQuery Together** http://tech.oyster.com/using-react-and-jquery-together/ Examples of how to use jQuery inside a React component, and React inside jQuery-controlled elements @@ -346,6 +374,10 @@ http://kyleshevlin.com/renderless-components/ Shows how you can create components that return null from `render`, and use React's lifecycle methods to drive imperative logic rather than rendering UI. +- **Getting Started with React and Leaflet** + https://www.azavea.com/blog/2016/12/05/getting-started-with-react-and-leaflet/ + Examples of how to create React components that interact with the Leaflet maps library. + #### Modal Dialogs @@ -403,4 +435,7 @@ - **Internationalizing React Apps** https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/ An extended investigation of server and client aspects needed for internationalization. - \ No newline at end of file + +- **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-forms.md b/react-forms.md index 730f73a..09c000e 100644 --- a/react-forms.md +++ b/react-forms.md @@ -3,6 +3,11 @@ (Note: the "linked state mixin" and "two-way binding" approaches described in some of these articles are still valid, but _mostly_ discouraged at this point. The more idiomatic approach is "one-way data flow" with "controlled inputs".) +**Related topics**: + +- [Redux Techniques: Redux and Forms](redux-techniques.md#redux-and-forms) + + #### "Controlled" and "Uncontrolled Inputs - **React Docs: Forms** @@ -97,6 +102,14 @@ https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f Describes a different approach for reading and managing form data, besides the usual "controlled inputs" pattern, based on the Javascript FormData object. +- **Should a form for editing update the underlying model?** + https://goshakkk.name/react-forms-for-editing/ + Some quick thoughts on ways to handle tracking data in a form - whether it should be fully controlled by a parent, or accept the initial values and report them when it's submitted. + +- **Modeling form state in React** + http://beautifulcode.1stdibs.com/2017/03/23/react-form-state/ + Examples of how to structure form state to handle values and validation. Applicable no matter what state management approach is being used. + #### Form Validation diff --git a/react-performance.md b/react-performance.md index ad7984a..c7f4597 100644 --- a/react-performance.md +++ b/react-performance.md @@ -127,6 +127,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) 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 +- **React is Slow, React is Fast: Optimizing React Apps in Practice** + https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba + A clear and informative explanation covering multiple aspects of performance, including use of the Chrome DevTools flame graph for visualizing perf, extracting components and implementing `shouldComponentUpdate`, connecting to Redux, and use of Recompose and Reselect to improve performance. + #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index 3c191d1..328100c 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -190,6 +190,14 @@ https://medium.com/@admm/test-driven-development-in-react-is-easy-178c9c520f2f A tutorial that walks through a TDD-based approach to building components in an application. +- **Testing React Applications** + https://blog.logrocket.com/testing-react-applications-part-1-of-3-ebd8397917f3 + Describes several types of unit tests that can be written in a React app (component tests, component tests, storybook tests), and the intent and benefits of each. + +- **How to test React and Redux with Redux-Saga and ReactDND** + https://medium.freecodecamp.com/testing-react-and-redux-with-redux-saga-and-reactdnd-whew-dedebcbd78dd + In-depth examples of testing React components using the Teaspoon library, as well as setting up tests for Redux-connected components, Redux-Saga functions, and uses of ReactDND. + #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index 02fd648..8980cce 100644 --- a/react-routing.md +++ b/react-routing.md @@ -33,6 +33,10 @@ https://medium.com/@daveford/react-router-alternative-switch-acd7961f08db Some examples of simply using switch statements and the history API for routing +- **Routing in React, the uncomplicated way** + https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997 + Examples of how to implement a custom routing approach, with minimal external dependencies. + #### Authentication @@ -51,4 +55,8 @@ - **Role based authorization in React** https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4 - Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering \ No newline at end of file + Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering + +- **Dealing with Authentication in React** + https://medium.com/@nesbtesh/dealing-with-authentication-in-react-cadb679fbc0f + Some short examples of saving an authentication token, writing queries to use and update that token, and checking the token when rendering components. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 467b319..35d3346 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -11,6 +11,14 @@ - **Modern Web Development with React and Redux** http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples. + +- **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. + +- **Learn Raw React** + http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ + A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. - **React to the Future** http://elijahmanor.com/talks/react-to-the-future/dist/#/ @@ -24,10 +32,6 @@ http://blog.andrewray.me/reactjs-for-stupid-people/ A high-level overview of what React is, and some pros and cons -- **Learn Raw React** - http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ - A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. - - **React.js Tutorial and Guide to the Gotchas** https://zapier.com/engineering/react-js-tutorial-guide-gotchas/ Excellent look at what React and JSX are, and how to handle components and state. Also some excellent guidelines to be aware of when writing React code. @@ -47,10 +51,6 @@ - **Survive.js Training** https://survivejs.github.io/training/#/0 An interactive presentation that goes through quick intros to Babel and Webpack before covering React basics, type checking, state management with Redux and MobX, async data, routing, performance, testing, and structuring applications. - -- **Taming the React Setup** - http://developer.telerik.com/featured/taming-react-setup/ - Describes seven different setups for writing React code, from simple (plain react.js loaded into the browser), to complex (use of Babel with Webpack or JSPM). - **React From Zero** https://github.com/kay-is/react-from-zero @@ -60,14 +60,10 @@ https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a A one-page set of simple snippets demonstrating usage of React -- **I Learned How to be Productve in React in a Week and You Can, Too** +- **I Learned How to be Productive in React in a Week and You Can, Too** https://css-tricks.com/productive-in-react/ A solid article written by a React newcomer, covering the basics, some gotchas, and important takeaways. Aimed at general web devs who are curious about React. -- **Getting Started with React the Easy Way** - http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ - Shows the simplest way to load React into a web page and start using it - - **React Enlightenment** http://www.reactenlightenment.com/ A straightforward, cookbook-style approach to learning React. (Currently a work-in-progress.) @@ -92,10 +88,6 @@ https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA A set of video tutorials introducing React concepts -- **How to get Create-React-App to work with your API** - https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ - An example of how to set up a server to work with Create-React-App - - **A Walk Through My "Just Enough React To Get You Into Trouble" Presentation** http://www.globalnerdy.com/2016/07/22/a-walk-through-my-just-enough-react-to-get-you-into-trouble-presentation-at-tampa-code-camp-2016/ A blog post version of a talk introducing React's core concepts, and demoing them in JSFiddle @@ -104,10 +96,6 @@ https://docs.google.com/presentation/d/19DaabQG8CB4INKGpaHao0hIXcB7zmETg4IHOZkF7MPM A slideshow from Lee Byron, one of React's early team members, giving an overview of what React is, how it works, and how it can fit into applications. -- **Kick-Start React Projects with Create-React-App** - https://www.sitepoint.com/create-react-app/ - Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. - - **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 @@ -120,6 +108,37 @@ http://blog.klipse.tech/javascript/2016/12/14/jsx.html An interactive version of the "JSX in Depth" tutorial from the React docs +- **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 + + +#### React Project Setup + +- **Simple React Development in 2017** + https://hackernoon.com/simple-react-development-in-2017-113bd563691f + An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production. + +- **Taming the React Setup** + http://developer.telerik.com/featured/taming-react-setup/ + Describes seven different setups for writing React code, from simple (plain react.js loaded into the browser), to complex (use of Babel with Webpack or JSPM). + +- **Kick-Start React Projects with Create-React-App** + https://www.sitepoint.com/create-react-app/ + Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. + +- **Getting Started with React the Easy Way** + http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ + Shows the simplest way to load React into a web page and start using it + +- **The Minimal React Webpack Babel Setup** + https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ + A clear walkthrough for the key steps needed to set up a useful Webpack+Babel config from scratch for a productive React dev environment. Very helpful if you choose not to use Create-React-App. + +- **How to get Create-React-App to work with your API** + https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ + An example of how to set up a server to work with Create-React-App + #### React Concept Overviews @@ -265,9 +284,7 @@ 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. -- **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. + - **Create an Instagram-like App with Node.js, React, and Redux** http://www.eloquentwebapp.com/instagram-app-node-react-redux/ diff --git a/redux-techniques.md b/redux-techniques.md index 8de81e4..792d260 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -74,6 +74,10 @@ https://blog.shakacode.com/redux-tree-efc9e3d22d6e Looks at structuring a reducer/state tree as "branches" and "leaves", and introduces the idea of an "interaction" to encapsulate all related state changes for a given action, with a library to implement the idea. +- **Reducer composition with Higher Order Reducers** + https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f + Some great examples of writing small functions that can be composed together to perform larger specific reducer tasks, such as providing initial state, filtering, updating specific keys, and more. + #### Selectors and Normalization @@ -129,11 +133,20 @@ - **Dissecting Twitter's Redux Store** https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1 - An informative look at the contents of the Redux store for Twitter's new mobile site + https://medium.com/@nuncamind/diving-deeper-into-twitters-redux-store-adventures-in-minified-vendor-javascript-67fbac5dc219 + An informative look at the contents of the Redux store for Twitter's new mobile site. The second article shows how to dig through the minified JS to enable use of the Redux DevTools against a production site. - **Advanced Redux Entity Normalization** https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5 Describes a "keyWindow" concept for tracking subsets of entities in state, similar to an SQL "view". A useful extension to the idea of normalized data. + +- **"Why are you supposed to normalize data in Redux?"** + https://twitter.com/AdamRackis/status/847883670950219776 + A Twitter thread with some excellent discussion, explaining why use of normalized data is encouraged with Redux. + +- **Redux Clerk: Reusable action creators and reducers for async CRUD** + https://inside.getambassador.com/redux-clerk-reusable-action-creators-and-reducers-for-async-crud-b0b6954f7056 + Discussion of a library that tries to reduce the repetitive nature of async CRUD work in Redux #### UI and Widget Implementations @@ -174,6 +187,7 @@ 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 - **Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers** @@ -277,4 +291,7 @@ https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9 Examples for combining Firebase into a Redux application +- **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 06c25df..7fbcda3 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -248,7 +248,11 @@ - **Build Alterdux: A Redux-Compatible Library From Scratch** https://antjanus.com/blog/web-development-tutorials/front-end-development/build-alterdux-redux-like-redux-compatible-library-scratch/ A useful example of building a mini-Redux from the ground up, with explanations of some of the ideas that Redux uses. - + +- **Code your own Redux** + http://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux/ + http://blog.jakoblind.no/2017/03/20/learn-react-redux-by-coding-the-connect-function-yourself/ + Another "build a mini-Redux" series, including an explanation of how React-Redux's `connect` function works #### Paid Courses and Books diff --git a/redux-without-react.md b/redux-without-react.md index d0c30fb..02b9949 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -40,6 +40,10 @@ https://blog.realworldfullstack.io/real-world-angular-part-5-light-my-fire-34b0bcb351a8 An Angular 2 tutorial that builds an app using Redux and Firebase +- **UI State management with Redux in Angular 2** + https://www.pluralsight.com/guides/front-end-javascript/ui-state-management-with-redux-in-angular-2 + An extended article that discusses the benefits of using Redux to manage state, and build an example app that uses Redux to control modals and sidebars. + #### Other - **Managing State in Aurelia: How to Use Aurelia with Redux** diff --git a/static-typing.md b/static-typing.md index 4ab18e5..7845f04 100644 --- a/static-typing.md +++ b/static-typing.md @@ -134,11 +134,20 @@ - **Type-Checking React and Redux with Flow** https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-1-ad12de935c36 - Examples of how to define Flow types for React components. (Part 2 will cover Redux.) + https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-2-206ce5f6e705 + Examples of how to define Flow types for React components and Redux functions - **How the Debugger got into the Flow** http://jasonlaster.github.io/devtools/js/2017/01/20/typing-the-debugger.html A look at how the Firefox DevTools team uses Flow to help type their React and Redux code for improved maintainability + +- **Typed Redux: Redux Revisited** + https://www.ajostrow.me/articles/redux-revisited + A follow-up to an earlier post by the author, giving an updated set of thoughts on use of TypeScript with Redux + +- **Type-safe Flux Standard Actions in React** + https://www.triplet.fi/blog/type-safe-flux-standard-actions-fsa-in-react-using-typescript-fsa/ + Describes the "Flux Standard Action" concept, and how the TypeScript FSA library can be used to help generate FSAs in a type-safe way. #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index be6023a..29635ea 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -168,6 +168,14 @@ https://www.zillow.com/engineering/webpack-optimize-dependencies/ Tips for tracking bundle sizes and managing dependency handling +- **Webpack bits: getting the most out of the CommonsChunkPlugin** + https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318 + Sean Larkin of the core Webpack team shares examples of common bundle size problems, and how to use the CommonsChunkPlugin to extract heavily used libraries into a separate bundle. + +- **Weeding Out Your ES6 Webpack Bundle Sizes** + https://medium.com/lendingtree-engineering/weeding-out-your-es6-webpack-bundle-sizes-62cbc5a62a30 + A recap of how adding a couple libraries to a production app resulted in much larger bundles, and some practical steps that can be taken to investigate and improve bundle sizes + #### Hot Module Replacement @@ -289,6 +297,10 @@ https://shellmonger.com/2016/01/22/working-with-fonts-with-webpack/ Explains how to configure Webpack to use external font files. +- **Working on OkCupid "in production" with Webpack and localhost** + https://tech.okcupid.com/working-on-okcupid-in-production-with-webpack-and-localhost/ + Describes setting up Webpack-Dev-Server to serve local files during development in a distributed build system. + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 04eb951..564af33 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -159,6 +159,14 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac A solid introduction to Webpack's basic concepts and usage, including CLI usage, config file setup, use of loaders and plugins, and chunking for lazy-loading +- **Webpack - From Apprentice to Journeyman** + http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/ + A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack. + +- **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 + #### Configuration Terms and Concepts