diff --git a/basic-concepts.md b/basic-concepts.md index b15a97e..56d2f7a 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -43,9 +43,9 @@ https://youtu.be/5NIL3Epadj0 A talk by Jack Franklin, summarizing the state of modern web development. -- **Modern JS Stack Training** - https://github.com/verekia/modern-js-stack-training - A repo that walks through concepts involved in a typical JS app, and how to set up each piece +- **JavaScript Stack from Scratch** + https://github.com/verekia/js-stack-from-scratch + This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. #### React Learning Guidelines diff --git a/es6-features.md b/es6-features.md index a2a4a96..b552e78 100644 --- a/es6-features.md +++ b/es6-features.md @@ -40,6 +40,10 @@ http://wesbos.github.io/ES6-Talk/ A set of slides describing the features in ES6 +- **Learn Harmony (ES2015 Now** + http://learnharmony.org/ + An interactive tool for learning and experimenting with ES6/ES2015 features + #### In-Depth Details @@ -87,6 +91,10 @@ http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/ A thorough set of examples for ES6's destructuring feature +- **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 + #### Techniques diff --git a/functional-programming.md b/functional-programming.md index 7edfc26..7bfd7cb 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -108,6 +108,22 @@ http://www.brandonkeown.com/2016/10/lenses-for-fun-and-profit.html Demonstrates the use of Ramda's "lens" concept for encapsulating data access +- **Functional Lenses, How Do They Work** + https://medium.com/@dtipson/functional-lenses-d1aba9e52254 + A dive into the "lens" concept, and how they can be used to manipulate data structures + - **Don't Be Scared of Functional Programming** https://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/ - Several examples of functional programming principles, both in plain JS and with Underscore.js \ No newline at end of file + Several examples of functional programming principles, both in plain JS and with Underscore.js + +- **Using Composition and Array Functions** + http://ignaciochavez.com/using-composition-and-array-functions/ + Some useful examples of composing together different functions to accomplish a task. Has some very nice diagrams illustrating the process. + +- **Dipping a toe into functional JS with lodash/fp** + https://simonsmith.io/dipping-a-toe-into-functional-js-with-lodash-fp/ + Examples of using Lodash's functional API for logic and React component composition + +- **Composability: From Callbacks to Categories in ES6** + https://medium.com/@homam/composability-from-callbacks-to-categories-in-es6-f3d91e62451e + Explores different solutions to "callback hell", based on various FP concepts \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 815c7b8..ed43cc6 100644 --- a/git-resources.md +++ b/git-resources.md @@ -41,6 +41,10 @@ https://codewords.recurse.com/issues/two/git-from-the-inside-out An explanation of how Git works, by describing the internal data structures and the graph that they form. +- **Ry's Git Tutorial** + http://rypress.com/tutorials/git/index + An excellent introduction to Git's key concepts and command. Very well written and explained. + #### Tips and Useful Info diff --git a/javascript-resources.md b/javascript-resources.md index a5f1aca..e12bd34 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -66,6 +66,14 @@ While this list is primarily focused on learning React and Redux, and generally http://watchandcode.com/p/practical-javascript A free online course to learn Javascript fundamentals. +- **Javascript Path** + https://github.com/javascript-society/javascript-path + A list of books to master JavaScript Development + +- **DevFreeBooks: Javascript** + https://devfreebooks.org/javascript/ + A list of free online books for Javascript + #### Interactive Exercises diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 705ca59..935c595 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -141,6 +141,10 @@ similar structures in ClojureScript. https://news.ycombinator.com/item?id=12536634 Another very long thread about the JS ecosystem and versioning. The linked comment describes how React, Redux, and Webpack have brought predictability to a particular application. +- **"React perf and optimization tests"** + https://twitter.com/AdamRackis/status/751486423232966656 + Discussion of React's performance compared to an existing Handlebars/Knockout app + #### React's PATENTS License - **Facebook Open Source License FAQ** diff --git a/react-component-patterns.md b/react-component-patterns.md index bd82ca8..fcd7a86 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -10,6 +10,11 @@ https://medium.com/@arcomito/react-component-jargon-as-of-august-2016-28451d8ceb1d A very useful glossary of widely-used terms describing React components +- **React in Patterns** + https://github.com/krasimir/react-in-patterns + http://krasimirtsonev.com/blog/article/react-js-presentational-container-components + List of design patterns/techniques used while developing with React + - **Functional Components vs. Stateless Functional Components vs. Stateless Components** https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c Clarifies the meaning of the terms, which are often used in overlapping ways. @@ -18,6 +23,10 @@ https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4 Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components. +- **Embracing Functions in React** + https://medium.com/javascript-inside/embracing-functions-in-react-d7d558d8bd30 + A look at stateless functional components in React, and why they might be useful or should be considered in the first place. + #### Component Categories @@ -41,6 +50,10 @@ https://medium.com/@rajaraodv/the-anatomy-of-a-react-redux-app-759282368c5a Breaks down the component structure of a typical React/Redux app, and classifies the different types of components that usually show up +- **React and Flux in Production Best Practices** + https://medium.com/@delveeng/react-and-flux-in-production-best-practices-c87766c57cb6 + Delve's practice of describing components as "containers", "smart", and "dumb" + #### Higher-Order Components @@ -76,6 +89,18 @@ https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e A very detailed article looking at some advanced HoC patterns +- **Real World Examples of Higher Order Components** + http://rea.tech/reactjs-real-world-examples-of-higher-order-components/ + Explanations and examples of HOCs and their uses + +- **Function as Child Components** + https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9 + Explains the "function as a child" technique as an alternative to Higher Order Components + +- **Functions as Child Components and Higher Order Components** + http://rea.tech/functions-as-child-components-and-higher-order-components/ + Comparisons and examples for these two component patterns + #### Other Component Patterns @@ -87,10 +112,23 @@ http://blog.andrewray.me/the-reactjs-controller-view-pattern/ Describes using top-level components to hold state and pass it to children as props -- **Function as Child Components** - https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9 - Explains the "function as a child" technique as an alternative to Higher Order Components - - **Functional React Series - Part 1: Get your App outta my Component** https://medium.com/@adamterlson/functional-react-series-part-1-get-your-app-outta-my-component-92656ae13e25 - Part 1 in a series about writing React applications by treating components as functions, not templates. \ No newline at end of file + Part 1 in a series about writing React applications by treating components as functions, not templates. + +- **Make Your React Components Pretty** + https://medium.com/walmartlabs/make-your-react-components-pretty-a1ae4ec0f56e + Techniques for making your components easier to read, including using functional components, using JSX spread for props, and use of destructuring. + +- **Component Factories in React.js** + https://github.com/szabototo89/create-it/blob/master/docs/article-full.md + A variation on Dependency Injection for React components + +- **Functional Components with React stateless functions and Ramda** + https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b + Examples of using Ramda functions to compose together components + +- **Mixins Considered Harmful** + https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html + https://news.ycombinator.com/item?id=12087796 + Dan Abramov explains why the React team discourages use of mixins, and prefers HoCs \ No newline at end of file diff --git a/react-forms.md b/react-forms.md index b4add72..4c00d7e 100644 --- a/react-forms.md +++ b/react-forms.md @@ -32,6 +32,10 @@ - **Managing state and controlled form fields with React** https://blog.iansinnott.com/managing-state-and-controlled-form-fields-with-react/ Describes the concepts of "controlled" and "uncontrolled" inputs. + +- **React Hates me: "Overcontrolled" components** + http://www.matthiaslienau.de/blog/2015/4/8/react-hates-me-overcontrolled-components + Describes some specific issues with controlled inputs and the preventDefault method #### Form Tutorials and Usage @@ -49,7 +53,7 @@ Explains how to set up more advanced form scenarios such as optional or repeatable sections. - **Using React's state to manage data entry** - https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42 + https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42 Describes how to manage data for forms using React component state and some wrapper components. - **Handling React Forms with Mobx Observables** diff --git a/react-performance.md b/react-performance.md index ed783b5..0c8027f 100644 --- a/react-performance.md +++ b/react-performance.md @@ -149,4 +149,8 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) - **Chat discussion - single connected component vs many connected components** https://gist.github.com/markerikson/6056565dd65d1232784bf42b65f8b2ad An extended chat log discussing pros and cons of various approaches to managing connected components in a Redux app + +- **React Performance Debugging: The Magic of Reselect Selectors** + http://rea.tech/reactjs-performance-debugging-aka-the-magic-of-reselect-selectors/ + Discussion of React perf topics, and how Reselect selector functions can improve perf for Redux apps diff --git a/react-redux-architecture.md b/react-redux-architecture.md index 4c39a41..6c15793 100644 --- a/react-redux-architecture.md +++ b/react-redux-architecture.md @@ -152,3 +152,20 @@ https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a An excellent set of guidelines for organizing your Redux store structure. +- **Things I Wish I Knew About Redux** + https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0 + https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/ + A number of excellent tips and lessons learned after building an app with Redux. Includes info on connecting components, selecting data, and app/project structure. Additional discussion on Reddit. + +- **Developing component-based web apps with React and Redux** + https://medium.com/@carlos_paelinck/developing-component-based-web-apps-using-react-redux-6236bc958930 + Some examples of component structure and data handling in a drawing app. + +- **Switching from Backbone to React and Redux** + https://medium.com/@royisch/moving-to-react-redux-in-baby-steps-aea0402624bf + https://medium.com/@royisch/6-lessons-learned-from-going-to-production-with-react-redux-19257f6724f6 + A pair of articles describing one company's transition from a Backbone app to using React and Redux. + +- **Black Pixel Redux Handbook** + http://bpxl-labs.github.io/redux-handbook/ + Black Pixel's guidelines for project/app structure and usage \ No newline at end of file diff --git a/react-redux-testing.md b/react-redux-testing.md index 6b26b64..3591d55 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -126,6 +126,10 @@ https://getstorybook.io/docs/testing/react-ui-testing Looks at using the React Storybook component editor to do UI testing +- **Testing React Components with mocha-webpack** + https://medium.com/@mmontoya/testing-reactjs-components-with-mocha-webpack-ce7f710d268c + Looks at how mocha-webpack can be used to enable faster testing for React components + #### General Testing, Tools, and Setup - **Javascript Testing: Unit vs Functional vs Integration** diff --git a/react-state-management.md b/react-state-management.md index daeb31a..8abe1b6 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -7,8 +7,9 @@ Describes different categories of state: data, communication, control, session, and location - **"M" and "C" in "MVC"** + https://www.youtube.com/watch?v=fUpkYixd03k https://github.com/jamesknelson/m-and-c-in-mvc-talk - Slides for James K. Nelson's talk at ReactNext, talking about the multiple categories of state and how controller components can manage them. + James K. Nelson's talk at ReactNext, talking about the multiple categories of state and how controller components can manage them. - **Exploring React's State Propagation** https://www.sitepoint.com/exploring-reacts-state-propagation/ @@ -21,10 +22,26 @@ - **Dataflow through React** https://jurassix.gitbooks.io/dataflow-through-react/content/index.html An online book that covers a number of topics on React components and data flow. + +- **React Anti-Patterns: Props in Initial State** + https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e + Discussion of why using props to initialize a component's state may or may not be a bad idea. + +- **How to safely use React context** + https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076 + Guidelines for when and how to actually use React's `context` feature + +- **Best Practices for Component State in React** + http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html + Some excellent suggestions and approaches for state handling and structure. #### Using `setState` +- **React component state cheatsheet** + https://twitter.com/dan_abramov/status/749710501916139520 + Dan Abramov pseudocodes his guidelines for when to put something into component state + - **Where to Hold React Component Data: state, store, static, and this** https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00 A great summary of different places to store state, and when and why you should use each. diff --git a/react-styling.md b/react-styling.md index 46483ee..52f935c 100644 --- a/react-styling.md +++ b/react-styling.md @@ -38,4 +38,8 @@ - **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. \ No newline at end of file + 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. + +- **Style as a Function of State** + 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 \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index aac1634..4f44d6c 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -82,6 +82,11 @@ - **React Cheat Sheet** http://reactcheatsheet.com/ A filterable list of React's APIs and concepts + +- **How React Do?** + http://blog.jfo.click/how-react-do/ + A tutorial written by someone as they learned React, stepping up through a series of React concepts. + #### Project-Based Tutorials @@ -169,6 +174,15 @@ https://blog.tighten.co/react-101-part-4-firebase A great 4-part series that progressively builds up a Giphy search engine +- **#ReactForNewbies: Building a Todo App with Create-React-App** + https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-1-5aae4bd637ee + The first part of an ongoing series, written by someone who is writing the posts as he learns React. + +- **Rock and Roll React Tutorial** + http://myappincome.co.uk/rock-and-roll-reactjs-tutorial-part-1/ + http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-2/ + http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-3/ + A tutorial that builds a React version of the Ember "Rock and Roll App" example. Covers more intermediate topics, and is aimed at new React devs trying to grow their knowledge. #### React Implementation Walkthroughs @@ -233,6 +247,22 @@ 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 +- **Tiny React Reimplementation** + http://jsbin.com/qiguyibolu/1/edit?js,output + A _very_ tiny (100 lines) implementation of React's basic algorithm + +- **What's Next for React - React Fiber** + https://www.youtube.com/watch?v=aV1271hd9ew + Andrew Clark describes the concepts, implementation, and potential benefits of the in-progress React Fiber internal algorithm reimplementation. + +- **React Implementation Notes** + https://facebook.github.io/react/contributing/implementation-notes.html + An in-depth explanation of how React's current internal algorithms work + +- **ReactJS: Under the Hood** + https://www.youtube.com/watch?v=xsKYAa1ZXpQ + A talk digging into React's internal concepts and implementation, including the split between the core library and the renderers. + #### Paid Courses and Books Also see the course sites listed in the [Community Resources](community-resources.md#online-course-sites) page. diff --git a/redux-side-effects.md b/redux-side-effects.md index dd22240..e092d47 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -65,5 +65,8 @@ https://medium.com/@andresmijares25/async-operations-using-redux-saga-2ba02ae077b3 An example of using Redux-Saga to coordinate multiple async calls based on another article's flight data scenario. +- **Should I use redux-saga or not?** + https://speakerdeck.com/kuy/should-i-use-redux-saga-or-not + A presentation from Yuki Kodama, comparing side effect approaches. In Japanese, but still has a number of useful diagrams that can be understood by English speakers. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index a7bbdcf..5d43c39 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -113,6 +113,12 @@ - **Applying Redux Reducers to Arrays** http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html Looks at one way to implement the classic "multiple instances of one connected component" issue in Redux. + +- **Redux: Encapsulating the Redux State Tree** + http://randycoulman.com//blog/2016/09/13/encapsulating-the-redux-state-tree/ + http://randycoulman.com/blog/2016/09/20/redux-reducer-selector-asymmetry/ + http://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/ + A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches #### UI and Widget Implementations diff --git a/redux-tutorials.md b/redux-tutorials.md index f3775c0..082017e 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -76,6 +76,10 @@ - **How to Use the React-Redux package** http://code.tutsplus.com/tutorials/how-to-use-the-react-redux-package--cms-27150 An excerpt from the "Modern Web Apps with React and Redux" course, explaining how to use React-Redux to connect components to Redux. + +- **Pro React beta chapter: Using Redux** + http://www.pro-react.com/materials/ + An alternative version of Pro React's chapter on using Flux that explains Redux usage #### Project-Based Tutorials diff --git a/thinking-in-react-and-flux.md b/thinking-in-react-and-flux.md index b193d87..4b955f0 100644 --- a/thinking-in-react-and-flux.md +++ b/thinking-in-react-and-flux.md @@ -58,4 +58,12 @@ - **You're Missing the Point of React** https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a - Dan Abramov explains React's real value: not popularizing the virtual DOM, but its use of composition and unidirectional data flow \ No newline at end of file + Dan Abramov explains React's real value: not popularizing the virtual DOM, but its use of composition and unidirectional data flow + +- **Reasons Why I Love Redux** + https://twitter.com/jlongster/status/780879989164081152 + James Longster describes his appreciation for Redux, and how its constraints force you to think through your state handling + +- **How to solve a Problem with React** + https://codequs.com/p/HyLJOnBt/how-to-solve-a-problem-with-react/ + A guide explaining ways to approach planning out a React app: composing individual components into larger components, or working top-down to plan out a component hierarchy. \ No newline at end of file diff --git a/tips-and-best-practices.md b/tips-and-best-practices.md index 2d2b5e0..acf1248 100644 --- a/tips-and-best-practices.md +++ b/tips-and-best-practices.md @@ -72,4 +72,8 @@ - **React Best Practices** https://medium.com/@nesbtesh/react-best-practices-a76fd0fbef21 - Suggestions and tips for effectively writing React and Redux \ No newline at end of file + Suggestions and tips for effectively writing React and Redux + +- **Helpful principles when starting with React** + http://ignaciochavez.com/helpful-principles-starting-react/ + Several useful tips for structuring components, managing data flow, and updating data. Has some excellent diagrams illustrating the concepts described. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 9698167..7869b13 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -72,6 +72,11 @@ http://www.jamesonnetworks.com/entry/webpack-bloat Discussion of how to improve production configurations for smaller bundle sizes +- **Dynamic Vendor Bundling in Webpack** + https://medium.com/jeremy-gayed/dynamic-vendor-bundling-in-webpack-528993e48aab + An approach to dynamically adding anything from `node_modules` to a "vendor" bundle + + #### Hot Module Replacement - **Webpack and Hot Module Replacement** @@ -105,7 +110,13 @@ https://gist.github.com/markerikson/dc6cee36b5b6f8d718f2e24a249e0491 An extracted example demonstrating using "plain" HMR to reload components, reducers, and even sagas. - +- **React - Hot Module Reload** + https://medium.com/@baphemot/react-hot-module-reload-f6b3d34b9b86 + An explanation of how to set up HMR using React-Hot-Loader 3.0 + +- **Adding HMR to Create-React-App** + http://chrisshepherd.me/posts/adding-hot-module-reloading-to-create-react-app + A quick example of the basic pattern for using plain HMR with Webpack #### Other Tips and Examples diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 09071d4..83044b6 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -5,6 +5,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac #### Overviews and Introductions +- **Webpack Documentation** + https://webpack.js.org/ + Webpack's new documentation site, explaining concepts, configuration, and recipes + - **Webpack from First Principles** https://www.youtube.com/watch?v=WQue1AN93YU A screencast video explaining what Webpack is and why you would want to use it @@ -122,6 +126,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac Examples of the different ways to define a loader in a Webpack config +- **Remix's Software Stack: Webpack** + https://blog.getremix.com/remixs-software-stack-webpack-34990de9d803 + An explanation of the configuration settings and options inside one company's Webpack config + + #### Webpack Configuration Utilities - **webpack-config-utils**