From 7996f15ccef3a9f733f38253a1d7b6ece4f29293 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 26 Feb 2017 16:19:38 -0500 Subject: [PATCH] Updates, 2017-02-26 --- README.md | 4 +- es6-features.md | 6 ++- immutable-data.md | 9 +++- react-architecture.md | 10 +++- react-component-patterns.md | 37 ++++++++++++-- react-performance.md | 7 ++- react-styling.md | 91 ++++++++++++++++++++++------------ react-tutorials.md | 18 ++++++- redux-architecture.md | 16 ++++++ redux-side-effects.md | 12 +++++ redux-techniques.md | 22 ++++++++ redux-tutorials.md | 29 ++++------- redux-without-react.md | 42 ++++++++++------ static-typing.md | 7 ++- using-react-with-es6.md | 5 ++ webpack-advanced-techniques.md | 12 +++++ webpack-tutorials.md | 7 ++- 17 files changed, 255 insertions(+), 79 deletions(-) diff --git a/README.md b/README.md index 350f41a..7326310 100644 --- a/README.md +++ b/README.md @@ -143,8 +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. - - [React to the Future](http://elijahmanor.com/talks/react-to-the-future/dist/#/) - A fantastic HTML slideshow describing what React is, what makes it special, and how to work with it + - [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/) A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. - [30 Days of React](https://www.fullstackreact.com/30-days-of-react/) diff --git a/es6-features.md b/es6-features.md index 7853e1f..e87dce3 100644 --- a/es6-features.md +++ b/es6-features.md @@ -247,4 +247,8 @@ - **Native ECMAScript Modules: dynamic import()** https://blog.hospodarets.com/native-ecmascript-modules-dynamic-import - Details on how the in-progress `import()` operator will allow dynamic loading of modules. \ No newline at end of file + Details on how the in-progress `import()` operator will allow dynamic loading of modules. + +- **A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers** + http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/ + A useful introduction to the various module formats and module tools \ No newline at end of file diff --git a/immutable-data.md b/immutable-data.md index 3641512..91bc0c0 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -51,6 +51,10 @@ http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific. +- **Immutably setting a value in a JS array (or how an array is also an object)** + https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702 + An example of how `Object.assign` can be used to immutably update an array + #### Immutability and React @@ -67,7 +71,10 @@ https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c Talks about the issues with mutation, and some ways to update immutably - +- **Comparing and Modifying Objects in React** + 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. + #### Immutable Data Libraries diff --git a/react-architecture.md b/react-architecture.md index eead7dd..d00b7bc 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -190,4 +190,12 @@ - **Our Best Practices for Writing React Components** https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8 - A description of the MuseFind team's approaches for writing components \ No newline at end of file + A description of the MuseFind team's approaches for writing components + +- **Lessons Learnt Rewriting a React Library from Scratch** + https://www.codecks.io/blog/2017/lessons-learnt-rewriting-react-lib/ + Some suggestions for use of context, embracing components, and writing documentation + +- **10 React mini-patterns** + https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 + A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index db7d0ce..73198ad 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -41,6 +41,30 @@ A quick overview of the three ways to declare React components, and which ones should be preferred. + +#### Component Rendering Logic + +- **Dynamically Rendering React Components** + https://wail.es/dynamically-rendering-react-components/ + Examples of how to dynamically determine which React component to render + +- **Loading State Trick for Stateless Functional Components in React** + http://kyleshevlin.com/loading-state-trick-for-stateless-functional-components-in-react/ + An example of conditionally rendering a spinner component if a list of items is empty + +- **How to Dynamically Render React Components** + http://kyleshevlin.com/how-to-dynamically-render-react-components/ + A quick example of how to dynamically decide which component type to render + +- **All the Conditional Renderings in React** + https://www.robinwieruch.de/conditional-rendering-react/ + Examples of all the possible ways to conditionally render components + +- **"React render function organization"** + https://gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3 + My suggested approach for organizing render function logic for clarity and readability + + #### React Component Children - **Ownership and Children in React** @@ -301,6 +325,10 @@ http://cmichel.io/how-to-use-d3js-in-react/ An overview of three ways to integrate D3 into a React app: using React to render, using D3 to render, and a hybrid approach. +- **Renderless Components, or How Logic Doesn't Always Need a UI** + 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. + #### Modal Dialogs @@ -316,13 +344,11 @@ https://daveceddia.com/open-modal-in-react/ An excellent example of how to approach rendering modals in React, by controlling them with props + + #### Other Component Patterns -- **Dynamically Rendering React Components** - https://wail.es/dynamically-rendering-react-components/ - Examples of how to dynamically determine which React component to render - - **The React Controller View Pattern** http://blog.andrewray.me/the-reactjs-controller-view-pattern/ Describes using top-level components to hold state and pass it to children as props @@ -353,4 +379,5 @@ - **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 + An extended investigation of server and client aspects needed for internationalization. + \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 84f821d..b2f1c6e 100644 --- a/react-performance.md +++ b/react-performance.md @@ -189,6 +189,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) #### Redux Performance +- **Practical Redux, Part 6: Connected Lists, Forms, and Performance** + http://blog.isquaredsoftware.com/2017/01/practical-redux-part-6-connected-lists-forms-and-performance/ + Discusses the key considerations for performance in Redux apps, with some examples and pointers to further information. + - **High Performance Redux** http://somebody32.github.io/high-performance-redux/ A detailed HTML slideshow that digs down into React Redux to show how `connect()`'s optimizations work, and has interactive demos to show various approaches. (Note: the code-related slides advance using the down arrow to step through different lines of code - don't miss that info!) @@ -237,4 +241,5 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Performance Optimizations in Redux's `mapStateToProps`** http://cmichel.io/performance-optimizations-in-redux-mapstatetoprops/ - Some quick tips on how to properly cache and memoize selectors for use in `mapState` functions \ No newline at end of file + Some quick tips on how to properly cache and memoize selectors for use in `mapState` functions + \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 7cc0c45..e4178f1 100644 --- a/react-styling.md +++ b/react-styling.md @@ -1,5 +1,7 @@ ### React and Styling +#### Basic Concepts + - **Styling in React** https://www.kirupa.com/react/styling_in_react.htm An introduction to using React's built-in inline styling abilities @@ -12,30 +14,55 @@ http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html Christopher Chedeau's classic talk that inspired the "CSS in JS" revolution +- **Components: A Styling Odyssey** + https://speakerdeck.com/alexlande/components-a-styling-odyssey + Slideshow discussing pros and cons of various approaches to managing styles for components + + +#### Components and Styling + - **Component Based Style Reuse** https://www.youtube.com/watch?v=_70Yp8KPXH8 Pete Hunt talks about various approaches to defining styles for components in plain CSS and in React +- **Patterns for Style Composition in React** + http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/ + Some great suggestions for defining reusable React components that can have variations in styling + +- **Functional CSS From A Pure UI Perspective** + https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc + Thoughts on various ways to compose classes and styles together. + +- **React JS Style Components** + https://www.youtube.com/watch?v=gNeavlJ7lNY + A talk describing ways to better compose existing styles in an application, using components. + +- **Orthogonality and CSS in JS** + https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ + Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). + + +#### CSS-Based Approaches + - **CSS Modules by Example** http://andrewhfarmer.com/css-modules-by-example/ A set of 7 examples demonstrating ways to use CSS modules. - + - **Elephants, The Three Code Ilities, & Two Months With CSS Modules** http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/ A look at how Lystable used CSS Modules to scale their codebase. -- **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS** - https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6 - A long, in-depth article detailing one dev's progression through various approaches to handling CSS. - -- **Patterns for Style Composition in React** - http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/ - Some great suggestions for defining reusable React components that can have variations in styling - - **Functional CSS - The Good, The Bad, and Some Protips for React.js Users** https://github.com/chibicode/react-functional-css-protips An essay describing the "functional CSS" approach, pros and cons of using it, and tips for using that approach with React. + +#### JS-Based Approaches + +- **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS** + https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6 + A long, in-depth article detailing one dev's progression through various approaches to handling CSS. + - **Thoughts on Inline Styles** https://medium.com/@andrewingram/my-thoughts-on-inline-styles-da94682b5e35 A look at reasons why people might or might not use inline style approaches, and some opinions and suggestions on when to use different approaches. @@ -44,22 +71,21 @@ https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7 A look at how styles can be managed similar to UI, and an example using the author's new styling library -- **React JS Style Components** - https://www.youtube.com/watch?v=gNeavlJ7lNY - A talk describing ways to better compose existing styles in an application, using components. - -- **Functional CSS From A Pure UI Perspective** - https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc - Thoughts on various ways to compose classes and styles together. - - **Invidual Paint for your React Components** https://vimeo.com/album/4199344/video/187454103 A talk discussing various approaches to manage styles and themes for React -- **Components: A Styling Odyssey** - https://speakerdeck.com/alexlande/components-a-styling-odyssey - Slideshow discussing pros and cons of various approaches to managing styles for components +- **Writing Your Styles in JS != Writing Inline Styles** + http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js + Max Stoiber describes the key difference between "inline styles" and "CSS-in-JS" approaches: styles applied to elements vs styles added to a style tag. +- **CSS-in-JS comparisons** + https://github.com/MicheleBertoli/css-in-js + A repository that contains implementation comparisons between many different CSS-in-JS libraries + + +#### Style Libraries + - **Styling ReactJS Applications** https://www.youtube.com/watch?v=19gqsBc_Cx0 Max Stoiber's talk at ReactNL 2016, comparing various options for styling React applications and introducing his new library, Styled-Components. @@ -68,10 +94,6 @@ https://medium.com/front-end-hacking/scalable-styles-in-production-js-cde88016f357 Some comparisons between various approaches to managing styles (plain CSS, inline styles, CSS-in-JS), and why Aphrodite can help solve some of the issues that come up. -- **Writing Your Styles in JS != Writing Inline Styles** - http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js - Max Stoiber describes the key difference between "inline styles" and "CSS-in-JS" approaches: styles applied to elements vs styles added to a style tag. - - **"Styled Components or Glamor?"** https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor/ Discussion and comparisons between some different CSS-in-JS libraries @@ -80,14 +102,21 @@ http://mxstbr.blog/2016/11/styled-components-magic-explained/ A look at how the styled-components library uses the new ES6 "tagged template literals" feature to interpolate arguments and build up CSS -- **Orthogonality and CSS in JS** - https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ - Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). - - **Styled-Components: Enforcing Best Practices** https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/ A look at some best practices for writing styles for reusable components, and how the styled-components library can help enforce those principles. -- **CSS-in-JS comparisons** - https://github.com/MicheleBertoli/css-in-js - A repository that contains implementation comparisons between many different CSS-in-JS libraries \ No newline at end of file +- **A 5-Minute Intro to Styled Components** + https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55 + A quick intro to the styled-components library + +- **CSS in JS: The Argument Refined** + https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955 + The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own + + +#### Techniques + +- **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 diff --git a/react-tutorials.md b/react-tutorials.md index 77e2ee1..467b319 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -7,10 +7,14 @@ https://facebook.github.io/react/docs/hello-world.html https://facebook.github.io/react/tutorial/tutorial.html The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information. + +- **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. - **React to the Future** http://elijahmanor.com/talks/react-to-the-future/dist/#/ - A fantastic HTML slideshow describing what React is, what makes it special, and how to work with it + A well-written HTML slideshow describing what React is, what makes it special, and how to work with it - **React: Getting Started and Concepts** https://scotch.io/tutorials/learning-react-getting-started-and-concepts @@ -112,6 +116,10 @@ http://erikaybar.name/react-101-medium-and-slides/ Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about. +- **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 + #### React Concept Overviews @@ -135,6 +143,10 @@ https://ihatetomatoes.net/react-cheat-sheet-pdf/ A downloadable PDF with snippets demonstrating uses of React's syntax and APIs +- **The philosophy of React** + https://medium.com/@malinnaleach/the-philosophy-of-react-e2c126c61af3 + Some high-level overviews of React's concepts, like state, props, and control flow + #### Project-Based Tutorials @@ -272,6 +284,10 @@ https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc A tutorial series that introduces React's concepts, using the Create-React-App tool to handle starting the project. +- **Retrogames Library with Node, React, and Redux: Server API and React Frontend** + 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. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index fccf56d..9e30887 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -179,6 +179,14 @@ - **When to Define Action Creators in Redux** https://daveceddia.com/redux-action-creators/ An excellent overview of why action creators exist, why they’re worth using, and when you can skip them + +- **React Redux Design Lessons Learned** + http://www.jeremyzerr.com/sites/default/files/React-Redux-Design-Lessons-Learned.pdf + A slideshow that coves some core React and Redux concepts, then discuses how the authors approached designing and developing a timesheet application + +- **3 Things I Learned about Working with Data in Redux** + https://dev.bleacherreport.com/3-things-i-learned-about-working-with-data-in-redux-5fa0d5f89c8b + Good practices for keeping UI state in components, using Higher-Order Components for reusability, and connecting multiple components at lower levels of the application #### Encapsulation and Reusability @@ -259,6 +267,14 @@ - **Instance Reducers** http://www.thesoftwaresimpleton.com/blog/2016/12/20/instance-reducers/ An interesting approach to the "multiple instances of a connected component" problem. + +- **Managing state for multiple component instances using React and Redux** + https://medium.com/@mikefey/managing-state-for-multiple-component-instances-using-react-and-redux-623ef7448cbe + Some useful examples illustrating the basic approach to storing data for individual reusable component instances in a Redux store + +- **How to use Redux on highly scalable Javascript applications?** + https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38 + Discussion of ways to structure reducers, selectors, and other logic into reusable features #### Variations on Redux Architectures diff --git a/redux-side-effects.md b/redux-side-effects.md index 2b41cf3..8712a49 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -75,6 +75,18 @@ https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/ An excellent look at the most popular libraries for Redux side effects, with comparisons of how each one works. +- **Redux 4 Ways** + https://medium.com/react-native-training/redux-4-ways-95a130da0cdc + Side-by-side comparisons of implementing some basic data fetching using thunks, sagas, observables, and a promise middleware + +- **3 Common Approaches to Side-Effects in Redux** + https://goshakkk.name/redux-side-effect-approaches/ + An overview of what "side effects" are, how they relate to Redux, and the most common ways to handle side effects in a Redux app + +- **Redux: Thunk vs Saga** + http://blog.jakegardner.me/redux-thunk-vs-saga/ + A couple quick examples showing how to use thunks and sagas for the same task + #### Sagas diff --git a/redux-techniques.md b/redux-techniques.md index 9ba334c..1c657c3 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -35,6 +35,7 @@ https://onsen.io/blog/react-redux-devtools-with-time-travel/ Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging. + #### Reducers - **Redux Docs: Structuring Reducers** @@ -57,6 +58,14 @@ http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application Dan Abramov gives a basic exapmle of how to rebuild and replace the root reducer function at runtime +- **Inject reducer arbitrarily rather than top level for Redux store to replace reducer** + https://medium.com/@jimmy_shen/inject-reducer-arbitrarily-rather-than-top-level-for-redux-store-to-replace-reducer-fdc1060a6a7 + A quick example of the basic approach to injecting additional reducers at runtime + +- **State Snapshots in Redux** + http://kyleshevlin.com/state-snapshots-in-redux/ + Describes a useful technique for saving copies of state slices on command, and re-applying those copies at a later point to ensure a known starting point for further actions. + #### Selectors and Normalization @@ -152,6 +161,14 @@ #### Redux and Forms +- **Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers** + http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/ + Demonstrates how to use a custom form wrapper component to buffer input change events + +- **Practical Redux, Part 8: Form Draft Data Management** + http://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/ + Discusses how to implement logic to handle "draft/work-in-progress" data while editing items + - **Abstracted Form State with Redux-Form** https://speakerdeck.com/erikras/abstracted-form-state-with-redux-form Slides by the author of Redux-Form, discussing how forms work in plain HTML/Javascript, in React, and how the Redux-Form library can integrate them into Redux. @@ -175,6 +192,10 @@ - **Using forms in React-Redux: Tips and Tricks** https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6 Some helpful suggestions for using Redux-Form to manage forms in a Redux app + +- **Dealing with forms in React/Redux - A simple pattern** + https://medium.com/@jonasjensen/dealing-with-forms-in-react-redux-a-simple-pattern-7b94b393eb26 + Helpful examples for writing some simple generic form-handling reducers and action creators #### Other @@ -228,6 +249,7 @@ - **Exploring Interaction History with Redux-DAG-History** https://blog.atsid.com/exploring-interaction-history-d09a52a7d186 The Microsoft Research group describes a library they built to implement a "branching" approach to application history and undo/redo capabilities. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index dfc4a5f..fd7dbbe 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -15,6 +15,10 @@ https://egghead.io/series/building-react-applications-with-idiomatic-redux https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos. + +- **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. - **Single State Tree + Flux** http://merrickchristensen.com/articles/single-state-tree.html @@ -195,33 +199,18 @@ http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ A nifty 8-part series that demonstrates building a CRUD app, including routing, AJAX calls, and the various CRUD aspects. Very well written, with some useful diagrams as well. - - **A comprehensive React-Redux tutorial** https://spapas.github.io/2016/03/02/react-redux-tutorial/ A very long, detailed article that digs into Redux's concepts, and builds a book management application in the process. - **React and Redux Sagas Authentication App Tutorial** http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/ + http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial-part-2/ A 3-part tutorial that builds a reasonably complex app, using Redux-Saga, Redux-Form and React-Router, with an emphasis on practical aspects of putting things together. - - -#### Using Redux with non-React Frameworks - -- **Redux without React - State Management in Vanilla Javascript** - https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ - A tutorial teaching Redux usage with a plain JS UI layer on top - -- **An Adventure in Redux: building redux-adventure** - http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html - Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 - -- **Building Redux in TypeScript with Angular 2** - http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ - An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application - -- **Managing State in Aurelia: How to Use Aurelia with Redux** - https://www.sitepoint.com/managing-state-aurelia-with-redux/ - A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. + +- **Get familiar with React, Redux, and basic personal finance** + https://medium.com/@ryanjyost/react-redux-react-router-and-rainy-day-fund-tutorial-e589f0803306 + A tutorial that builds a small financial savings calculation app. #### Redux Implementation Walkthroughs diff --git a/redux-without-react.md b/redux-without-react.md index 20132a6..e88277f 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -1,8 +1,18 @@ ### Using Redux without React + +#### Vanilla JS and jQuery + - **Redux without React - State Management in Vanilla Javascript** https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ A tutorial teaching Redux usage with a plain JS UI layer on top + + - **The Easiest Way to Start Using Redux Today** + https://viktorfonic.com/start-using-redux/ + A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI + + +#### Angular - **An Adventure in Redux: building redux-adventure** http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html @@ -12,22 +22,10 @@ http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application -- **Managing State in Aurelia: How to Use Aurelia with Redux** - https://www.sitepoint.com/managing-state-aurelia-with-redux/ - A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. - - **Scalable Single-Page Application Architecture with Redux and Angular 2** http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS. - -- **Using ember-changeset with ember-redux** - https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a - Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. - -- **The Easiest Way to Start Using Redux Today** - https://viktorfonic.com/start-using-redux/ - A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI - + - **Building a Redux Application with Angular 2** https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1 https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2 @@ -35,4 +33,20 @@ - **Build a Better Angular 2 Application with Redux and ngrx** http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ - An extended article that demonstrates how to build a Redux-based Angular 2 app using the ngrx store implementation. Some interesting discussion in the comments. \ No newline at end of file + An extended article that demonstrates how to build a Redux-based Angular 2 app using the ngrx store implementation. Some interesting discussion in the comments. + +- **Real World Angular** + https://blog.realworldfullstack.io/real-world-angular-part-4-state-of-my-spa-10bf90c5a15 + 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 + +#### Other + +- **Managing State in Aurelia: How to Use Aurelia with Redux** + https://www.sitepoint.com/managing-state-aurelia-with-redux/ + A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. + +- **Using ember-changeset with ember-redux** + https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a + Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. + diff --git a/static-typing.md b/static-typing.md index 86e0241..54a796f 100644 --- a/static-typing.md +++ b/static-typing.md @@ -192,4 +192,9 @@ - **How we migrated a 200K+ LOC Project to TypeScript** https://hashnode.com/post/how-we-migrated-a-200k-loc-project-to-typescript-and-survived-to-tell-the-story-ciyzhikcc0001y253w00n11yb - The Coherent Labs team discusses the tradeoffs in using static typing for JS code, why they chose TypeScript, and how they approached migrating their codebase to TypeScript. \ No newline at end of file + The Coherent Labs team discusses the tradeoffs in using static typing for JS code, why they chose TypeScript, and how they approached migrating their codebase to TypeScript. + +- **Why I was looking forward to Flow, and then I wasn't** + https://medium.com/@ckoster22/why-i-was-looking-forward-to-flow-and-then-i-wasnt-7c0a86f2d603 + Some useful thoughts on the tradeoffs involved in using Flow + \ No newline at end of file diff --git a/using-react-with-es6.md b/using-react-with-es6.md index c1ecc94..57100c9 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -61,6 +61,11 @@ - **React without `this`** https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 Examples of how to write components in a style that does not require the `this` keyword. Not the common approach, but an interesting idea. + +- **Use Property Initializers for Cleaner React Components** + https://www.fullstackreact.com/articles/use-property-initializers-for-cleaner-react-components/ + A look at how the "Class Properties"/"Property Initializer" syntax allows much cleaner definition of method binding, and how to configure Babel to use that syntax + #### Method Binding Utilities diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 6bb8e45..6546370 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -70,6 +70,10 @@ https://medium.com/@johnstew/webpack-tree-shaking-20914b7a9ca5 An explanation of what tree-shaking is, how to configure Webpack to apply it, and how it works. +- **How to optimize Moment.js with Webpack** + https://github.com/jmblog/how-to-optimize-momentjs-with-webpack + Tips on using IgnorePlugin and ContextReplacementPlugin to strip out uneeded locales from Moment + #### Code Splitting and Chunking @@ -117,6 +121,10 @@ https://dev.to/kayis/lazy-loaded-react-components-with-webpack-2 A follow-on to the previous article, showing how to extend the dynamic imports approach to lazily load and render components +- **Vendor and code splitting in Webpack 2** + 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. + #### Bundle Sizes and Visualization @@ -152,6 +160,10 @@ https://medium.com/@ahmedelgabri/analyzing-optimizing-your-webpack-bundle-8590818af4df Some quick suggestions for using CLI flags to show sizes of bundled chunks, and using webpack-bundle-analyzer and IgnorePlugin to exclude unneeded files. +- **Avoid Webpack bloat: Optimize your dependencies** + https://www.zillow.com/engineering/webpack-optimize-dependencies/ + Tips for tracking bundle sizes and managing dependency handling + #### Hot Module Replacement diff --git a/webpack-tutorials.md b/webpack-tutorials.md index c1743fe..1e0191f 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -56,7 +56,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack 2** http://sokra.github.io/slides/webpack2/#3 A slideshow from Webpack's original author. Describes the basics of Webpack, how it can be used to build Progressive Web Apps, and improve speed and reliability through bundling. - + #### Basic Tutorials @@ -153,6 +153,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **From zero to Webpack, one error at a time** http://www.jumoel.com/2017/zero-to-webpack.html A tutorial that builds a working Webpack config step-by-step, with explanations of how and why each piece is added. + +- **A Detailed Introduction to Webpack** + https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/ + 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 + #### Configuration Terms and Concepts