diff --git a/community-resources.md b/community-resources.md index d8d6f38..f0a7513 100644 --- a/community-resources.md +++ b/community-resources.md @@ -43,6 +43,10 @@ https://github.com/mightyCrow/awesome-react-talks A curated list of talks about React or topics related to React. +- **230 Curated Resources and Tools for Building Apps with React** + https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/ + A useful list of articles, libraries, and tools that cover the range of React development. + #### People diff --git a/es6-features.md b/es6-features.md index b1eb601..bc991c4 100644 --- a/es6-features.md +++ b/es6-features.md @@ -75,10 +75,6 @@ #### Specific Features - -- **Powering Javascript with Generators** - http://appendto.com/2016/06/powering-javascript-with-generators - A useful introduction to the generators feature in ES6. - **Metaprogramming in ES6: Symbols, Reflection, and Proxies** https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/ @@ -102,6 +98,29 @@ http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/ A thorough set of examples for ES6's destructuring feature +- **My New Favorite ES6 Toy: Destructured Objects as Parameters** + https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/ + An example of using objects and destructuring to act like named parameters + +- **Extract Nested Data from Arrays and Objects with Destructuring Assignment** + https://angulartoreact.com/es6-destructuring/ + Examples of how destructuring can make it easy to create new variables from other data. + +- **The Reflect API of ES6** + http://www.zsoltnagy.eu/the-reflect-api-of-es6/ + An overview of the Reflect API, which allows some complex metaprogramming capabilities. + + +#### Generators + +- **Javascript Generators** + https://blog.ragnarson.com/2016/12/15/javascript-generators.html + A nice readable introduction to what generator functions are and how to use them + +- **Powering Javascript with Generators** + http://appendto.com/2016/06/powering-javascript-with-generators + A useful introduction to the generators feature in ES6. + - **Using ES6 Generators and Yield to Implement Async Workflows** https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm A dive into how generators work, and how they can be used to handle async behavior @@ -114,13 +133,6 @@ http://goshakkk.name/javascript-generators-understanding-sample-use-cases/ A simple thinking pattern for easily understanding generators, plus 3 practical applications. -- **My New Favorite ES6 Toy: Destructured Objects as Parameters** - https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/ - An example of using objects and destructuring to act like named parameters - -- **Extract Nested Data from Arrays and Objects with Destructuring Assignment** - https://angulartoreact.com/es6-destructuring/ - Examples of how destructuring can make it easy to create new variables from other data. #### Promises diff --git a/immutable-data.md b/immutable-data.md index cb4c850..9b1c1df 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -86,3 +86,7 @@ - **Immutable.js: An Introduction with examples written for humans** http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/ A detailed series of tutorials explaining how to use Immutable.js's API + +- **Seamless-Immutable: An Alternative to Immutable.js** + https://medium.com/@ckoster22/seamless-immutable-an-alternative-to-immutablejs-12795d6bf577 + Examples of how to use the Seamless-Immutable library, and how it compares to Immutable.js diff --git a/javascript-resources.md b/javascript-resources.md index b9de2a7..c853789 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -45,7 +45,9 @@ While this list is primarily focused on learning React and Redux, and generally https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225 Extensive suggestions for resources to use when learning Javascript - +- **Array iteration methods summarized** + https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff + An explanation of all the different Array methods that loop over the array, what they do, and when they should be used #### Tutorials, Books, and Courses diff --git a/project-structure.md b/project-structure.md index 7d9adbf..bd8af16 100644 --- a/project-structure.md +++ b/project-structure.md @@ -32,6 +32,8 @@ - **Rules for Structuring (Redux) Applications** http://jaysoo.ca/2016/02/28/organizing-redux-application/ + http://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/ + http://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/ Gives several useful rules for structuring code, with examples. - **A Better File Structure for React/Redux Applications** diff --git a/react-architecture.md b/react-architecture.md index ed64ba8..334b30b 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -83,6 +83,10 @@ https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_while/ Some great discussion of important concepts and things to understand about React. +- **React "aha" moments** + https://tylermcginnis.com/react-aha-moments/ + Tyler McGinnis shares some of his own "aha" moments in thinking about React + #### React Best Practices @@ -153,4 +157,12 @@ - **The Top 5 [Tips] of Effective React** https://code.kiwi.com/the-top-5-of-effective-react-984e54cceac3 - Tips include using container/presentational components, keeping components simple, and more. \ No newline at end of file + Tips include using container/presentational components, keeping components simple, and more. + +- **Advice on large scale React apps - rebuilding the social publishing platform for Latam** + https://medium.com/taringa-on-publishing/advice-on-large-scale-react-js-apps-rebuilding-the-biggest-social-publishing-platform-for-latam-1f4c8fa35a4f + Lessons learned from migrating a PHP application to a universal React/Redux/Webpack application, including introducing React to a team, documentation, types, and more. + +- **11 lessons learned as a React contractor** + https://medium.com/@jolyon_russ/11-lessons-learned-as-a-react-contractor-f515cd0491cf + A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index c434f03..5ff3239 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -2,6 +2,8 @@ **Related topics**: - [Thinking in React](./thinking-in-react-and-flux.md): Articles discussing ways to think about React applications and component structure +- **React Implementation and Concepts**: Includes articles that explain the differences between "components", "elements", and "instances" + #### Terms and Concepts @@ -124,6 +126,14 @@ https://medium.com/@delveeng/react-and-flux-in-production-best-practices-c87766c57cb6 Delve's practice of describing components as "containers", "smart", and "dumb" +- **Content vs Container** + https://hackernoon.com/content-vs-container-e0a1ada681c1 + General advice for determining component responsibilities in terms of content, layout, and logic + +- **The React + Redux Container Pattern** + http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/ + Explanation and examples of "container" and "presentational" components and their responsibilities. Uses Redux for the examples, but the principles apply to "just" React as well. + #### Higher-Order Components @@ -192,6 +202,10 @@ https://www.okgrow.com/posts/compose-react-sphoc Thoughts and examples of composing multiple small focused HOCs together into a final combined HOC +- **What are Higher Order Components?** + https://benmccormick.org/2016/12/14/what-are-higher-order-components/ + A short, simple explanation of what an HOC is, and how they can be used + #### Wrapping Non-React Code @@ -224,6 +238,21 @@ Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery. +#### Modal Dialogs + +- **How to Render Components Outside the Main React App** + https://blog.komand.com/how-to-render-components-outside-the-main-react-app + An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application. + +- **Modals in React** + https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701 + A demonstration of building a reusable modal component using the "portals" technique + +- **Modal Dialogs in React** + 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** @@ -253,14 +282,7 @@ - **"What is the ideal way to pass data to a callback prop?** https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38 Discussion and examples of various ways to pass data to callbacks between children and parents - -- **How to Render Components Outside the Main React App** - https://blog.komand.com/how-to-render-components-outside-the-main-react-app - An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application. - -- **Modals in React** - https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701 - A demonstration of building a reusable modal component using the "portals" technique + - **On Privacy with React Context** https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509 diff --git a/react-forms.md b/react-forms.md index ac841ab..edcd304 100644 --- a/react-forms.md +++ b/react-forms.md @@ -48,6 +48,10 @@ - **Controllable React Components** https://speakerdeck.com/lettertwo/controllable-react-components A slideshow discussing how React components can themselves either be controlled or uncontrolled, and introducing a library to help make components controllable. + +- **Collecting data from a wizard form** + https://goshakkk.name/wizard-form-collect-info/ + Examples of how to handle data management for a multi-step form #### Form Tutorials and Usage diff --git a/react-implementation.md b/react-implementation.md index 08caf6a..42500e5 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -19,6 +19,10 @@ https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html A post celebrating React's progress, including a history of how React's concepts came together over time +- **React Elements vs React Components** + https://tylermcginnis.com/react-elements-vs-react-components/ + An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements + #### Miniature React Implementations @@ -52,6 +56,7 @@ Some thoughts on why and how you might want to try writing your own React-alike, and some of the tradeoffs involved in writing something like React. + #### Implementation and Internals - **React.js Reconciliation** @@ -98,6 +103,10 @@ http://goshakkk.name/react-custom-renderers/ Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas +- **The Inner Workings of Virtual DOM** + https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf + An in-depth article that digs into how a Virtual DOM implementation works, using Preact as an example. Includes some detailed flowcharts of their behavior. + #### React Fiber @@ -111,4 +120,8 @@ - **React Fiber Resources** https://github.com/koba04/react-fiber-resources - Links and info on the new React Fiber algorithm \ No newline at end of file + Links and info on the new React Fiber algorithm + +- **Why, What, and How of React Fiber** + https://www.youtube.com/watch?v=crM1iRVGpGQ + Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index cb1c451..3f4079b 100644 --- a/react-performance.md +++ b/react-performance.md @@ -103,7 +103,9 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) - **React Snippets: Debug Component performance with ES7 Annotations** https://www.neos.io/blog/react-snippets-debug-component-performance-with-es7-annotations.html Demonstrates using a custom decorator to wrap components and log information on when and why components re-rendered - +- **How to Benchmark React Components: The Quick and Dirty Guide** + https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c + Suggestions for using React's Perf API to benchmark component rendering, and use of shouldComponentUpdate to cut down on unnecessary renders. #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index 0394723..5f6a55f 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -158,6 +158,10 @@ https://cafedev.org/article/2016/12/testing-with-wepack-2-inject-loader-karma-mocha-chai-and-sinon/ Examples of using these tools to test some complex code, including mocking out dependencies +- **Best practices for testing React components using Mocha, Chai, and Enzyme** + https://reflect.io/blog/js-testing-mocha-chai-enzyme/ + A number of useful tips for improving component tests, including use of shallow rendering, avoiding errors while testing, and making test code consistent + #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index 96b8ba2..7d1e590 100644 --- a/react-routing.md +++ b/react-routing.md @@ -1,5 +1,7 @@ ### React and Routing +#### Routing + - **Routing React Apps: The Complete Guide** https://scotch.io/tutorials/routing-react-apps-the-complete-guide An in-depth article covering use of React-Router (v2) @@ -25,4 +27,16 @@ - **How to Handle Routing in React** https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355 - A quick example of using React-Router v2 in a small React app \ No newline at end of file + A quick example of using React-Router v2 in a small React app + + + +#### Authentication + +- **How to Build a React Application with User Login and Authentication** + https://stormpath.com/blog/build-a-react-app-with-user-authentication + Builds a small React app from the ground up, with use of React-Router for routing and the Stormpath SDK to handle authentication and authorization. + +- **JWT Authentication with React + Redux** + http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/ + Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users. \ No newline at end of file diff --git a/react-server-rendering.md b/react-server-rendering.md index c3586c7..e4effc5 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -19,4 +19,8 @@ - **Server Side React** https://remysharp.com/2016/12/07/server-side-react - A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources \ No newline at end of file + A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources + +- **Universal React Rendering: How We Rebuilt SitePoint** + https://www.sitepoint.com/universal-react-rendering-sitepoint/ + The SitePoint team explains how they added server-rendered React content into their existing Wordpress application \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 8040023..2bd2ad9 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -108,6 +108,10 @@ 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 + #### Project-Based Tutorials @@ -233,6 +237,10 @@ http://www.eloquentwebapp.com/instagram-app-node-react-redux/ An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more. +- **Building a chat component in React and ES6** + http://www.zsoltnagy.eu/building-a-chat-component-in-react-and-es6/ + An introduction to React by building a small chat app + #### Paid Courses and Books @@ -259,3 +267,7 @@ Also see the course sites listed in the [Community Resources](community-resource https://appendto.com/courses/react-training/ appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack. +- **The Road to Learn React** + http://www.robinwieruch.de/the-road-to-learn-react/ + A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more. The author's blog posts are excellent, and this book is definitely recommended. + diff --git a/redux-architecture.md b/redux-architecture.md index e1cac94..a2846dc 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -146,6 +146,10 @@ - **4 Things for Efficient Redux** https://blog.spacelab.team/4-things-for-efficient-redux-17e87b4cd6cb Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions. + +- **Seven Months Into Redux: Two Things My Team Learned Along the Way** + https://medium.com/@benipsen/seven-months-into-redux-two-things-my-team-learned-along-the-way-5d979c25ea61 + A couple useful suggestions on use of RxJS for managing action updates and handling derived data in selectors. #### Encapsulation and Reusability @@ -214,6 +218,10 @@ - **Scoped Selectors for Redux Modules** http://www.datchley.name/scoped-selectors-for-redux-modules/ A follow-on to Randy Coulman's series on local vs global selectors, discussing tradeoffs in approaches for defining and managing selectors. + +- **Scaling React and Redux at IOOF** + http://www.slideshare.net/VivianFarrell/scaling-react-and-redux-at-ioof + A slideshow discussing creation of enterprise-scale Redux apps built with "micro-frontends" that can be composed together, and a look at a "Redux-Subspace" library to help with that #### Variations on Redux Architectures diff --git a/redux-techniques.md b/redux-techniques.md index 4db9358..99faaec 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -90,6 +90,9 @@ https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions +- **ReactCasts #8: Selectors in Redux** + https://www.youtube.com/watch?v=frT3to2ACCw + A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values #### UI and Widget Implementations @@ -163,6 +166,14 @@ http://engineering.tes.com/post/secure-file-uploads/ Some examples of how to use Redux-Plupload to manage file uploads +- **Redux: Perils of Time** + http://redux-perils-of-time.surge.sh/#/?presenter + A slideshow with some intriguing thoughts on how to manage offline experiences, cached data, and optimistic UI in a Redux app. + +- **{Persist}ence is Key: Using Redux-Persist to Store Your State in LocalStorage** + https://medium.com/@clrksanford/persist-ence-is-key-using-redux-persist-to-store-your-state-in-localstorage-ac6a000aee63 + A quick introduction to using redux-persist to reuse store state between page refreshes + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index d59b7ae..c771d77 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -88,11 +88,14 @@ - **Redux for the Very Beginner** http://toranbillups.com/blog/archive/2016/01/22/redux-for-the-very-beginner/ A beginner-friendly screencast that introduces Redux + +- **React, Redux, and React-Redux** + http://jilles.me/react-redux-and-react-redux/ + Comparison and examples of implementing a filterable list with just React, with "manual" React code reading from Redux, and using the official React-Redux library #### Project-Based Tutorials - - **Managing Data Flow on the Client Side** http://blog.madewithlove.be/post/redux/ Walks through a small Redux example, and talks about the benefits @@ -174,6 +177,10 @@ - **A Practical Guide to Redux** http://lorenstewart.me/2016/11/27/a-practical-guide-to-redux/ A tutorial that introduces the key concepts and usage of Redux through the code in a small sample app. + +- **Building a Simple CRUD App with React + Redux** + 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. @@ -222,6 +229,10 @@ https://hashnode.com/ama/with-redux-cisteui6p005gzx53fstg8t6l https://blog.hashnode.com/the-story-of-redux-and-more/ Dan Abramov and Andrew Clark answer questions about Redux, and describe the history of its original development. Second link is a summary of answers in the AMA. + +- **Rebuilding Redux** + https://www.spencerdixon.com/blog/rebuilding-redux/ + A short screencast that demonstrates building a mini-Redux from scratch #### Paid Courses and Books diff --git a/redux-without-react.md b/redux-without-react.md index 19726e6..1fae301 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -22,4 +22,8 @@ - **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. \ No newline at end of file + 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 \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 0bb8bb7..f41c58b 100644 --- a/static-typing.md +++ b/static-typing.md @@ -38,6 +38,10 @@ #### TypeScript +- **TypeScript: the Missing Introduction** + https://toddmotto.com/typescript-the-missing-introduction + An introduction to TypeScript's concepts, with explanations of a number of terms related to compilers and static typing. + - **TypeScript Deep Dive** https://basarat.gitbooks.io/typescript/content/ An online book that digs into numerous TypeScript topics @@ -53,6 +57,10 @@ - **Hybrid Types in TypeScript** https://turbomack.github.io/posts/2016-12-07-hybrid-types-in-typescript.html Examples of adding type checking to some dynamic code that uses d3 for visualization. + +- **A Typed pluck: exploring TypeScript 2.1's mapped types** + https://medium.com/@danvdk/a-typed-pluck-exploring-typescript-2-1s-mapped-types-c15f72bf4ca8 + Detailed explanation of how the "mapped types" feature in TS 2.1 can be used to add typing to functions that map over data #### Flow Tutorials diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 5928fdd..80626e4 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -89,6 +89,10 @@ http://odetocode.com/blogs/scott/archive/2016/12/01/building-vendor-and-feature-bundles-with-webpack.aspx Demonstrates using DllPlugin to build a vendor bundle, and generating multiple bundles for different features by dynamically building up multiple entry points. +- **Components a la carte** + http://darrennewton.com/2016/12/21/components-a-la-carte/ + Describes a technique for dynamically loading only certain features that a user should see + #### Bundle Sizes and Visualization @@ -214,6 +218,10 @@ http://drhayes.io/secret-game/map-entity-loader.html A small example of writing a custom Webpack loader for game data +- **Webpack Tricks** + https://github.com/rstacruz/webpack-tricks + A useful list of tips for improving Webpack usage + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index b445a83..c2e6c32 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -117,6 +117,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Migrating to Webpack 2** http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/ Tips for migration an existing Webpack config to work properly with Webpack 2 + +- **Webpack 101** + https://github.com/brunoscopelliti/webpack-101 + A tutorial that builds up a Webpack config step-by-step, explaining why and how each change is made. + #### Configuration Terms and Concepts @@ -153,6 +158,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac http://cheng.logdown.com/posts/2016/03/25/679045 A list of the available values for the `devtool` option in a Webpack config +- **Webpack and the Public Path Config** + http://tomasalabes.me/blog/_site/web-development/2016/12/10/Webpack-and-the-public-path.html + Looks at how to configure URLs for resources that are not part of the final output bundle, such as images on CDNs + + #### Webpack Configuration Utilities - **webpack-config-utils**