diff --git a/basic-concepts.md b/basic-concepts.md index 64dbd9a..6f84be9 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -76,6 +76,10 @@ https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70 Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context. Includes examples of how different tools were used and and what problems they help solve. +- **A Brief, Incomplete History of JavaScript** + https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript + An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era. + #### Suggested Learning Approaches diff --git a/es6-features.md b/es6-features.md index 3db87f8..2b75e31 100644 --- a/es6-features.md +++ b/es6-features.md @@ -181,6 +181,10 @@ http://goshakkk.name/javascript-generators-understanding-sample-use-cases/ A simple thinking pattern for easily understanding generators, plus 3 practical applications. +- **ES6 Generators and asynchronous Javascript** + http://web.archive.org/web/20160304215133/https://alexperry.io/javascript/2015/09/17/es6-generators-and-asynchronous-javascript.html + A clear description of how generator functions can be paused and continued, and how that capability enables writing asynchronous code in a synchronous-looking way. + #### Promises @@ -233,6 +237,10 @@ https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918 Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback. +- **Gotchas about async/await and Promises** + https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di + Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling. + #### Techniques diff --git a/framework-comparisons.md b/framework-comparisons.md index 1c90707..c4f0965 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -12,7 +12,20 @@ - **Web Framework Comparisons** https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/ - A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia. Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness. The series is written by a company that works on Dojo, but the comparisons and descriptions are fair. + https://www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions/ + A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia. Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness. The series is written by a company that works on Dojo, but the comparisons and descriptions are fair. Links go to the first and last articles in the series. + +- **How I stopped loving Angular** + https://codeburst.io/how-i-stopped-loving-angular-c2935f7378c4 + An extensive article detailing the author's critiques of Angular 2+, and why they ultimately chose to switch to Vue instead. + +- **React vs Angular: An In-depth Comparison** + https://www.sitepoint.com/react-vs-angular/ + A well-written post that not only offers comparisons between React and Angular, but gives suggested approaches for comparing tools and ecosystems in general. + +- **React vs Angular 2+: Developer Ergonomics** + https://medium.com/@stelly_ryan/react-vs-angular-2-developer-ergonomics-b6d5103e8699 + Specific opinion-based comparisons on the developer experience for React and Angular in areas like components, testing, and framework-specific syntax, based on writing equivalent example apps using both frameworks. #### React and Flux vs Backbone diff --git a/functional-programming.md b/functional-programming.md index b5bf652..433f199 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -5,7 +5,7 @@ Describes the three basic principles of FP: "data in/data out", "code as data", and "function composition" all the way down, and demonstrates transforming some data. Has some _very_ helpful graphics and illustrations. - **Understanding Programmatic Side Effects** - https://web.archive.org/web/20160326014453/http://web24studios.com/2015/10/understanding-programmatic-side-effects/ + http://c2fo.io/c2fo/programming/2016/05/11/understanding-programmatic-side-effects/ A short article that explains the concept of "side effects" - **What Is Functional Programming?** diff --git a/git-resources.md b/git-resources.md index 4e068f3..6599832 100644 --- a/git-resources.md +++ b/git-resources.md @@ -61,6 +61,10 @@ https://crypto.stanford.edu/~blynn/gitmagic/ An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts. +- **Git Beyond the Basics** + http://blog.bloomca.me/2017/11/17/git-beyond-the-basics.html + A good tutorial that explains intermediate concepts like merging, rebasing, cherry-picking, and cleaning pull requests + #### Tips and Useful Info diff --git a/javascript-resources.md b/javascript-resources.md index ef37e2b..0d2bcfc 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -99,8 +99,8 @@ While this list is primarily focused on learning React and Redux, and generally A free course from Wes Bos that teaches how to build 30 different interesting projects, using only "vanilla" Javascript. - **Javascript; The Core** - http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ - A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. + http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/ + A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. The second edition includes more of a focus on ES6 and newer features. - **The Modern Javascript Tutorial** http://javascript.info/ @@ -110,14 +110,15 @@ While this list is primarily focused on learning React and Redux, and generally https://github.com/bpesquet/thejsway A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on. - -#### Interactive Exercises - #### Online Code Editors +- **CodeSandbox** + https://codesandbox.io + A full-fledged online IDE that lets you build entire applications using React, Vue, and other toolkits. + - **A Roundup of Online Code Playgrounds** https://www.sitepoint.com/round-up-online-code-playgrounds/ An overview and comparison of various online Javascript live code editing tools. diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 39f7a9d..48458a5 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -89,10 +89,6 @@ #### MobX and Redux Comparisons -- **Comparing MobX and Redux - Video** - https://www.youtube.com/watch?v=83v8cdvGfeA -A great video to understand the differences between MobX and Redux. - - **"Confused: Redux or MobX?** https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ An in-depth thread comparing the two libraries. Includes comments from both Dan Abramov of Redux and Michel Weststrate of MobX describing their libraries, as well a number of other good comparisons. @@ -114,13 +110,13 @@ A great video to understand the differences between MobX and Redux. https://hashnode.com/post/how-does-mobx-compare-with-redux-and-which-one-is-better-for-react-app-development-cisrch8eh0030g5532qeds1ja/answer/citq8rptk010cus530wdzdg69 An excellent answer comparing the two libraries and their philosophies +- **Comparing MobX and Redux - Video** + https://www.youtube.com/watch?v=83v8cdvGfeA +A great video to understand the differences between MobX and Redux. + - **Redux vs MobX** https://medium.com/@himrc/redux-vs-mobx-a42c8950f3 Some quick pros and cons of each, links to other discussions, and thoughts on when to use them. - -- **ReactConf 2017: MobX vs Redux: Comparing the Opposing Paradigms** - https://www.youtube.com/watch?v=76FRrbY18Bs&index=8&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0 - A fantastic presentation by Preethi Kasireddy. She compares several aspects of Redux and MobX, the general principles behind each, and discusses the pros/cons/tradeoffs in using them. - **Redux or MobX: What I learned after refactoring a medium-sized React app** https://dannyherran.com/2017/03/react-redux-mobx-takeaways/ @@ -132,4 +128,6 @@ A great video to understand the differences between MobX and Redux. - **Introduction to Redux and MobX** https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479 - A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources. \ No newline at end of file + A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources. + + \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 068b4ee..5256132 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -279,6 +279,10 @@ similar structures in ClojureScript. https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec https://www.reddit.com/r/javascript/comments/7buksy/how_redux_can_make_you_a_better_developer/ A blog post recapping aspects of functional programming and immutability in JS and Redux. The Reddit thread has some excellent discussion on pros and cons of using Redux and how it has benefited people. +- **"React is focused on making your code understandable, not on making simple examples as short as possible"** + https://twitter.com/dan_abramov/status/930380316463726593 + Some great points from Dan Abramov about React focusing on code predictability, maintainability, and data flow, rather than terseness. + #### React's PATENTS License diff --git a/react-architecture.md b/react-architecture.md index 26a96e5..47ca587 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -264,6 +264,10 @@ https://dev.to/kayis/is-react-solid-630 Looks at the SOLID architectural principles, and discusses how those apply to React components. +- **Clean Code vs Dirty Code: React Best Practices** + http://americanexpress.io/clean-code-dirty-code/ + Some very opinionated thoughts on what qualifes as "clean" React code. Your experience may vary, but some interesting food for thought. + #### React Architecture @@ -281,4 +285,12 @@ - **Reusable Web Application Strategies: three patterns for running the same app in multiple spots** https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8 - Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components. \ No newline at end of file + Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components. + +- **Integrating React in a 6+ Year Old Rails App** + https://blog.codeship.com/integrating-react-in-a-6-year-old-rails-app/ + Discuss techniques for using React in an existing Rails app. Focus is a bit more on the Rails side of things, but some useful info. + +- **Characteristics of an Ideal React Architecture** + https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b + Some opinionated thoughts on what constitutes good React architecture, including avoiding use of components as controllers, keeping prop passing to just a few levels, and ensuring that diff calculations are cheap. \ No newline at end of file diff --git a/react-component-composition.md b/react-component-composition.md index 9126fcf..04d75d3 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -95,6 +95,10 @@ https://www.sitepen.com/blog/2017/08/15/higher-order-components-in-react/ Shows an example of a React app that needs to authenticate routes, and how a HOC can help handle that in a reusable way. Also includes example HOCs for A/B-testing features, collecting metrics, and injecting props. +- **Save the "zombines": How to add state and lifecycle methods to stateless React components** + https://codeburst.io/save-the-zombies-how-to-add-state-and-lifecycle-methods-to-stateless-react-components-1a996513866d + A humorously-written look at how to extract state management logic into HOCs. + @@ -133,6 +137,13 @@ https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf Kent C Dodds describes how "prop getter" functions can be used with render props to provide more control over how rendering behavior is hooked together. +- **Rendering a function with React** + https://blog.kentcdodds.com/rendering-a-function-with-react-ca3eaf0751e2 + Kent C Dodds looks at some unusual use cases for reusing React components, and a possible solution that uses a somewhat hacky approach of marking a function as an iterable. + + + + #### Functional Composition @@ -198,7 +209,7 @@ Michael Jackson demonstrating that a component with render prop can do anything a HOC can do, and more. - **React Composition Patterns from the Ground Up** - https://medium.com/alexkrolick/react-composition-patterns-from-the-ground-up-8401aaad93d7 + https://hackernoon.com/react-composition-patterns-from-the-ground-up-8401aaad93d7 Comparison of patterns such as Lifting State, Higher-Order Components, Render Callbacks, and "Renderless" State Providers, and how they relate to React's component model. - **Solving the problems of Higher Order Components without throwing the baby out with the bathwater** @@ -209,3 +220,6 @@ https://medium.com/@joshuawcomeau/randomness-in-react-props-3929c1669f8b Demonstrates several approaches to structuring logic for generating values and passing them to children, including initialization in a constructor, creating a wrapper component, and using a function-as-a-child. +- **Simplifying life with React render callbacks** + https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 + Compares several approaches for passing data from a parent component directly to a child, including cloning children, using a HOC, and using render props. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index cfff6f9..1c5f0b0 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -466,3 +466,11 @@ https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16. +- **3 React Gripes** + https://gist.github.com/jlongster/febd2a397aff9501abec0c2d66075ec8 + https://twitter.com/jlongster/status/921016877408837632 + James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in `componentWillReceiveProps`. Some good discussion in both the gist comments and Twitter. + +- **React without `this`** + https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 + Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index d263880..2e2634b 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -29,13 +29,8 @@ - **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 - - -#### JSX and Events - - #### Miniature React Implementations - **Building React from Scratch** @@ -172,6 +167,10 @@ - **An Interview with the React Team About Wordpress and Project Gutenberg** https://wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/ A Wordpress community site interviews Dan Abramov, Andrew Clark, and Sophie Alpert about a variety of topics, including how they prioritize features, how React is tested, dealing with breaking changes, downsides of React, and aspects of Wordpress using React for its "Project Gutenberg" tool. + +- **The React Story: How Facebook's Instagram Acquisition Led to the Open Sourcing of React** + https://stackshare.io/posts/the-react-story + An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened. Page includes a complete transcript of the discussion. #### React Fiber diff --git a/react-performance.md b/react-performance.md index 5f62b83..f730ef6 100644 --- a/react-performance.md +++ b/react-performance.md @@ -174,6 +174,9 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81 Good advice on the potential benefits of using `PureComponent`, as well as several potential downsides or gotchas (such as binding functions in `render()`). +- **The Virtual DOM and its Anti-Patterns** + https://medium.com/riipen-engineering/the-virtual-dom-and-its-anti-patterns-aa4c523d00ed + First in a 3-part series discussing causes of slow components and wasteful rendering. Later posts will cover ways to optimize Redux usage, and tools to find bottlenecks that can be optimized. #### Code Splitting and Progressive Apps @@ -221,6 +224,14 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://medium.com/@joshuawcomeau/performance-tuning-a-react-application-f480f46dc1a2 An excellent case study on improving load time for a small React+Redux app. Describes use of gzipping, image cropping, lazy loading, and more. +- **A React and Preact Progressive Web App Performance Case Study: Treebo** + https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299 + An extensive technical deep dive into how Treebo optimized their React application for good performance on mobile devices. + +- **Firebase + React: Optimizing for the Real World** + https://codeburst.io/firebase-react-optimizing-for-the-real-world-4d9edbbd54c5 + Describes shrinking a React + Firebase app bundle from 1.7MB to 230KB by switching to smaller alternative packages and analyzing bundle size. + #### Immutable Data diff --git a/react-redux-testing.md b/react-redux-testing.md index 0090089..414bf66 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -141,6 +141,10 @@ http://www.alayor.com/2017/Creating-a-React-Component-using-TDD Demonstrates writing a simple React component using the TDD "red-green" testing approach. +- **Unit Testing with Semantic-UI-React and Enzyme** + https://medium.com/bluepick-dev/testing-with-semantic-ui-react-and-enzyme-7cb39228a5ea + Specific tips and advice for testing components that use the Semantic-UI-React library, including advice on focusing your tests on your own components' behavior. The tips are also applicable to React component testing in general. + #### Redux - **Simple React/Redux Testing** @@ -265,6 +269,14 @@ - **Unit Testing React, Redux, Selectors, and Epics** https://codeburst.io/unit-testing-react-redux-selectors-and-epics-664e7b4798a8 Quick examples of ways to different parts of a React+Redux app. + +- **Jest Testing Patterns for React-Redux Applications** + https://ranjithnair.github.io/2017/11/17/Jest-Testing-basics.html + Includes info on basic Jest test setup, as well as examples of using Jest to test React components, Redux-connected components, actions and reducers, API calls, and React event behavior. + +- **Recipes for Testing Redux Actions and Reducers** + https://densitylabs.io/blog/recipes-for-testing-redux-actions-and-reducers + Useful examples of testing Redux code, using redux-thunk, chai, axios, redux-mock-store, and axios-mock-adapter. @@ -356,4 +368,8 @@ - **Stubbing HTTP Reqeusts with Sinon** http://mherman.org/blog/2017/11/06/stubbing-http-requests-with-sinon/ - An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests. \ No newline at end of file + An extensive tutorial that discusses the benefits of stubbing behavior in tests, setting up Mocha+Chai+Sinon, and using Sinon's stub functions in integration and unit tests. + +- **What makes a good test?** + https://medium.com/@alexkrolick/what-makes-a-good-test-dff3df6058a2 + A variety of short thoughts on why we write unit tests, how to write good tests, and some specific suggestions for working with snapshot tests and tests for async behavior. \ No newline at end of file diff --git a/react-routing.md b/react-routing.md index ae774b5..1d9646c 100644 --- a/react-routing.md +++ b/react-routing.md @@ -136,4 +136,8 @@ - **How to Implement Authentication for Your React App** https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b https://medium.appbase.io/securing-a-react-web-app-with-server-side-authentication-1b7c7dc55c16 - A pair of posts that demonstrate implementing both client-side and server-side authentication behavior for a React/Node app. \ No newline at end of file + A pair of posts that demonstrate implementing both client-side and server-side authentication behavior for a React/Node app. + +- **Protected Routes and Authentication with React Router v4** + https://tylermcginnis.com/react-router-protected-routes-authentication/ + A great tutorial that shows how to create routes that only authenticated users can access. \ No newline at end of file diff --git a/react-server-rendering.md b/react-server-rendering.md index 587fd1a..2b268c8 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -1,5 +1,9 @@ ### React Server Rendering +- **What's New with Server-Side Rendering in React 16** + https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67 + Sasha Aickin, who wrote most of React 16's new SSR implementation, gives a very detailed look at how the implementation and behavior have changed. + - **React for Beginers: Creating an Isomorphic React App** https://medium.com/codingbox/react-for-beginners-creating-isomorphic-react-redux-app-and-deploying-it-on-heroku-6a313f8f3693 An in-depth article describing an isomorphic project configuration and deployment @@ -82,8 +86,10 @@ - **Making CRA apps work with SSR** https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-1-8f5f813d510b https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-2-fb871868216e - A 2-part post that shows how to add SSR to an ejected CRA app, including use of Redux. + https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-3-199d70b4cbe5 + A series of posts that shows how to add SSR to an ejected CRA app, including use of Redux and React-Router. - **You might (not) need a Server Side Rendering Framework** https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/ - Discusses building a home-grown SSR setup using Webpack, rather than reusing something like Next.js. \ No newline at end of file + Discusses building a home-grown SSR setup using Webpack, rather than reusing something like Next.js. + diff --git a/react-state-management.md b/react-state-management.md index 5b5d60d..7e8214a 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -70,6 +70,10 @@ - **How to manage or eliminate React state without Redux** http://monicalent.com/blog/2017/07/23/manage-state-in-react/ An excellent writeup on techniques you can use to help manage state in React without using Redux, including only using component state for things that are really needed, extracting state management logic, and rethinking when you actually need stateful components. + +- **State management in Javascript** + https://codeburst.io/state-management-in-javascript-15d0d98837e1 + Not React-specific, but some excellent general principles for dealing with state overall: represent data uniquely, derive values, define dependencies, and localise state as much as possible. #### Using `setState` @@ -125,4 +129,8 @@ - **Atomic `setState` Updates in React** https://alligator.io/react/getting-atomic-updates-with-setstate/ - Discusses how the standard object form of `setState` can cause race conditions, while the functional form is more predictable. \ No newline at end of file + Discusses how the standard object form of `setState` can cause race conditions, while the functional form is more predictable. + +- **`setState` ftw** + https://speakerdeck.com/michelebertoli/setstate-ftw + Slides from Facebook dev Michele Bertoli's talk on how `setState` works, how to use it properly, and useful techniques for working with `setState`. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 495b2e3..79e9309 100644 --- a/react-styling.md +++ b/react-styling.md @@ -34,6 +34,11 @@ https://medium.com/@wesharehoodies/all-you-need-to-know-about-css-in-js-984a72d48ebc A clear summary of the differences between "inline styles" and "CSS-in-JS", the pros and cons of using CSS-in-JS, and quick examples of using some of the most popular CSS-in-JS libraries. +- **The CSS Holy War & How To Think Beyond Dogma / A Brief History of CSS-in-JS: How We Got Here and Where We're Going** + https://medium.com/gitconnected/the-css-holy-war-how-to-think-beyond-dogma-e2c67692d409 + https://medium.com/gitconnected/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04 + A pair of articles that look at the history of CSS, discuss the problems it tries to solve, + and describe the use of CSS-in-JS as a way to help solve certain use cases in today's apps. #### Components and Styling diff --git a/react-techniques.md b/react-techniques.md index 54983e0..472b6d2 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -35,6 +35,10 @@ https://medium.com/@niwaa/creating-react-editables-how-to-build-a-set-of-reusable-react-components-with-an-hoc-and-write-7a685947a992 Looks at the steps needed to create a set of reusable React components and publish them to NPM. Includes extended thoughts on component design for reusability. +- **Robust React User Interfaces with Finite State Machines** + https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/ + An excellent article that describes the concepts of state machines, how they relate to applications, and how they can be applied to help manage React component behavior. + #### Security diff --git a/react-tutorials.md b/react-tutorials.md index 8284d96..194e3ee 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -18,7 +18,8 @@ - **Learn React From Your Browser: Introducing React** https://reactarmory.com/guides/learn-react-by-itself - An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples. (This is a rewritten and improved version of the "Learn Raw React" tutorial.) + https://reactarmory.com/examples/hello-world/jsx-hello-world + An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples. (This is a rewritten and improved version of the "Learn Raw React" tutorial.) Now includes an interactive editor to let you try working with React code there in the browser. - **Learn Raw React** http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ @@ -26,7 +27,7 @@ - **React Fundamentals** https://tylermcginnis.com/courses/react-fundamentals/ - An online course from the React Training company. Covers key aspects of Javascript, React concepts as of React 15.5, React Router v4, and building and deploying an application. + An online course from an excellent React trainer. Covers key aspects of Javascript, React concepts as of React 16, React Router v4, and building and deploying an application. - **React Express** http://www.react.express/ @@ -139,6 +140,11 @@ https://www.writesoftware.org/topic/react A short tutorial series that introduces basic React concepts like JSX, components, props, state, and events. +- **Everything You Should Know About React: The Basics You Need To Start Building** + https://medium.freecodecamp.org/everything-you-need-to-know-about-react-eaedf53238c4 + A comprehensive tutorial that covers topics like components, rendering, JSX, state, event handling, async behavior, props, and refs. + + #### React Concept Overviews @@ -170,7 +176,13 @@ https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-1-93940e11800a https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-2-913e089e8fc2 +- **An Introduction to React and the Surrounding Ecosystem in 2017** + https://www.youtube.com/watch?v=qDTQzIzqodw + A video presentation that describes some of the business case and benefits of using React, introduces React component concepts, and discusses some of the common tools in the React ecosystem. +- **React Interview Questions** + https://github.com/Pau1fitz/react-interview + A large list of questions on React concepts that might pop up in an interview, with answers. #### Project-Based Tutorials @@ -363,6 +375,18 @@ https://www.writesoftware.org/tutorial/react-spreadsheet An excellent tutorial that shows how to build a miniature spreadsheet app using React +- **Developig modern offline apps with ReactJS, Redux, and Electron** + https://blog.codecentric.de/en/2017/10/developing-modern-offline-apps-reactjs-redux-electron-part-1/ + An ongoing multi-part series that covers using React to build an Electron app, including discussion of architectural decisions. + +- **MERN Stack Tutorial** + https://appdividend.com/2017/06/28/mern-stack-tutorial/ + An extensive full-stack app tutorial that covers building an app with React on the client and Mongo+Express on the back end. + +- **Build a realtime PWA with React** + https://blog.pusher.com/build-a-realtime-pwa-with-react/ + Covers building a Progressive Web App that shows crypto-currency pricess, using Create-React-App and the Pusher service. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index 8b19e72..2a45c82 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -292,6 +292,10 @@ - **Tips for Redux** https://www.yihangho.com/tips-for-redux/ Some excellent tips for working with Redux, including designing the state tree, dealing with side effects, implementing optimistic updates, and more. + +- **How We Built Our UI** + https://www.endgame.com/blog/technical-blog/how-we-built-our-ui + The Endgame team discusses why they rebuilt their app's UI, why they picked React and Redux, use of REdux-Saga to manage business logic, and how the data workflow fits together. #### Encapsulation and Reusability diff --git a/redux-middleware.md b/redux-middleware.md index 15a8892..ce2201b 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -76,4 +76,8 @@ - **"Do I always need to return a value from a Redux middleware?"** https://stackoverflow.com/questions/45964129/do-i-always-need-to-return-a-value-from-a-redux-middleware/45964310#45964310 - My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. \ No newline at end of file + My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. + +- **Practical Advanced Redux Webinar: Redux Middleware** + https://www.youtube.com/watch?v=DqWiuvuK_78 + A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. \ No newline at end of file diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 43ebaf3..e26470f 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -180,4 +180,20 @@ - **Introducing @ngrx/entity** https://medium.com/ngrx/introducing-ngrx-entity-598176456e15 - Describes an NgRX-based library for generating reducer operations and selectors for normalized entities. \ No newline at end of file + Describes an NgRX-based library for generating reducer operations and selectors for normalized entities. + +- **Better Redux Selectors with Ramda** + https://medium.com/@grrttn/better-redux-selectors-with-ramda-c1ab7af3f16 + A long article that describes how to use the Ramda FP utility library to create selectors, including use of functional composition. + +- **Shape your Redux store like your database** + https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5 + Discusses the merits of storing data in arrays vs lookup tables for access speed, and adding additional indices to allow easily lookup up items based on other values besides IDs. + +- **Optimizing React Redux Application Development with Reselect** + https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/ + A good tutorial on Reselect. Covers the concept of "selector functions", how to use Reselect's API, and how to use memoized selectors to improve performance. + +- **Usage of Reselect in a React-Redux Application** + https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application + Discusses the importance of memoized selectors for performance, and good practices for using Reselect. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 7b05fc9..a98e946 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -315,4 +315,8 @@ - **Using redux-observable to handle asynchronous logic in Redux** https://medium.com/dailyjs/using-redux-observable-to-handle-asynchronous-logic-in-redux-d49194742522 - An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation. \ No newline at end of file + An extended post that compares a thunk-based implementation of handling a line-drawing example vs an observable-based implementation. + +- **Redux Observable to the rescue** + https://medium.com/@daslusan/redux-observable-to-the-rescue-b27f07406cf2 + A quick comparison of writing some complex AJAX-related logic as a thunk and with redux-observable, and some of the benefits of writing the code using observables. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index 7b879cf..e5ca041 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -121,11 +121,6 @@ - **Let the Buyer Beware: React Redux Rerender Gotcha** https://www.nathanl.in/posts/let-the-buyer-beware-react-redux-rerender-gotcha An article describing some similar concerns regarding timing of Redux actions and React lifecycle methods, especially in regards to tracking loading state. - -- **Why I created Redux-Tiles library to deal with Redux verbosity** - http://blog.bloomca.me/2017/06/02/why-i-created-redux-tiles-library.html - https://news.ycombinator.com/item?id=14482215 - Describes several concerns with increasing verbosity and complexity in Redux apps, and how the author's library can help simplify those. - **Manage analytics actions in React** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de @@ -144,15 +139,24 @@ - **Evil things you do in Redux - dispatch in updating lifecycle methods** https://hackernoon.com/evil-things-you-do-with-redux-dispatch-in-updating-lifecycle-methods-ad116de882d4 Thoughts on the pros and cons of dispatching Redux actions in React lifecycle methods, such as causing cascades of re-renders and updates in other components. - -- **Reducing Redux Boilerplate with redux-actions** - http://www.hypertext.io/redux/react/2017/10/30/redux-actions.html - A short look at how the `redux-actions` lib can simplify the process of defining action type, action creators. and reducers. - + - **Redux and JSON Schema** https://blog.prismatik.com.au/redux-and-json-schema-c63368931143 Short discussion of the overall benefits of using JSON Schema to define data structures, and a Redux library that helps use those for Redux. + + +#### Reducing Boilerplate + +- **Why I created Redux-Tiles library to deal with Redux verbosity** + http://blog.bloomca.me/2017/06/02/why-i-created-redux-tiles-library.html + https://news.ycombinator.com/item?id=14482215 + Describes several concerns with increasing verbosity and complexity in Redux apps, and how the author's library can help simplify those. + +- **Reducing Redux Boilerplate with redux-actions** + http://www.hypertext.io/redux/react/2017/10/30/redux-actions.html + A short look at how the `redux-actions` lib can simplify the process of defining action type, action creators. and reducers. + - **Reducing Redux: avoiding boilerplate with redux-scc** https://medium.com/onfido-tech/reducing-redux-avoiding-boilerplate-with-redux-scc-b72c80c338e5 https://medium.com/onfido-tech/redux-scc-update-combined-actions-and-custom-types-ce346ea91e85 Looks at how the redux-scc library allows building "store chunks", which simplify the amount of work needed to define and update a Redux store. @@ -169,6 +173,14 @@ https://medium.com/@atomarranger/redux-mapstatetoprops-and-mapdispatchtoprops-shorthand-67d6cd78f132 A quick example of the "object shorthand" supported by `connect` for `mapDispatch`, and use of Reselect's `createStructuredSelector` for equivalent behavior of `mapState`. +- **Less Redux Boilerplate with Union Types** + https://codeburst.io/less-redux-boilerplate-with-union-types-3d5fd6acb53c + Examples of using Elm-inspired "union types" to define Redux logic, as well as combining action creators and reducers in a single file similar to the "ducks" approach. + +- **ARC - Simplifying async requests in Redux apps** + https://medium.com/front-end-hacking/arc-simplifying-async-requests-in-redux-apps-e8052b874216 Describes the "async action" pattern commonly used with Redux, and how the ARC library can simplify the process of generating actions, action creators, and reducers that work with async actions. + + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index 9e488b4..cad22f3 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -19,6 +19,18 @@ - **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. + +- **What Does Redux Do? (and when should you use it?)** + https://daveceddia.com/what-does-redux-do/ + An excellent summary of how Redux helps solve data flow problems in a React app. + +- **How Redux Works: A Counter-Example** + https://daveceddia.com/how-does-redux-work/ + A great follow-up to the previous article. It explains how to use Redux and React-Redux, by first showing a React component that stores a value in its internal state, and then refactoring it to use Redux instead. Along the way, the article explains important Redux terms and concepts, and how they all fit together to make the Redux data flow work properly. + +- **Redux and React: An Introduction** + http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/ + A great introduction to Reduxs core concepts, with explanations of how to use the React-Redux package to use Redux with React. - **Single State Tree + Flux** http://merrickchristensen.com/articles/single-state-tree.html @@ -142,10 +154,6 @@ https://medium.com/dailyjs/when-do-i-know-im-ready-for-redux-f34da253c85f Walks through a typical process of scaling up a React application, and how Redux can help solve common pain points with data flow. Has some really neat animated diagrams that illustrate how state updates interact with the React component tree. -- **What Does Redux Do? (and when should you use it?)** - https://daveceddia.com/what-does-redux-do/ - An excellent summary of how Redux helps solve data flow problems in a React app. - - **4 ways to dispatch actions with Redux** https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux Describes different ways to dispatch actions from React components: directly passing the store, using `connect`, using sagas, and using the `bindActionCreators` utility. @@ -154,6 +162,16 @@ https://www.kirupa.com/react/introduction_to_redux.htm A basic introduction to the ideas of storing data in Redux and dispatching actions to update that data. +- **TLTR; Redux** + https://medium.com/@nicotsou/tltr-redux-e4fc30f87e4a + A clear descriptive overview of Redux's background, core concepts, principles, and usage with React. Also describes the basics of async behavior, testing, and debugging. + +- **Introduction to Redux / A beginner's introduction to working with Redux in React** + https://dev.to/aurelkurtula/introduction-to-redux-1g3 + https://dev.to/aurelkurtula/a-beginners-introduction-to-working-with-redux-in-react-13k + A pair of tutorials that explain the basics of working with a Redux store and how to use the React-Redux library. + + #### Project-Based Tutorials diff --git a/redux-without-react.md b/redux-without-react.md index 9677121..3af5018 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -61,17 +61,38 @@ http://brianflove.com/2017/11/01/ngrx-anti-patterns/ Examples of some ways to improve poor NgRx usage patterns. +- **Getting started with Angular and Redux** + https://damienbod.com/2017/09/07/getting-started-with-angular-and-redux/ + A tutorial that covers setting up an Angular app that uses NgRx for state management. Recently updated to work with Angular 5. -#### 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. +#### Ember + +- **Why ember redux?** + http://toranbillups.com/blog/archive/2017/08/02/why-ember-redux/ + The author of the ember-redux lib talks about why he likes Redux, and why he prefers using it with Ember. + +- **The Frontside Podcast: ember-redux and glimmer-redux** + https://frontside.io/podcast/055-redux-and-ember-with-toran-billups + https://frontside.io/podcast/089-glimmer-redux-with-toran-billups + A pair of podcasts with the creator of ember-redux and glimmer-redux + + +- **Setting Up Redux + Observables in an Ember App** + https://medium.com/@john.sniezek/setting-up-redux-observables-in-an-ember-app-aca9dccdd152 + A tutorial that shows how to set up ember-redux and add redux-observable. - **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. + +#### 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. + - **Explorations in Adapting Redux to C#** https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/ An informative look at how AtomicObject has a Redux variant in C# @@ -97,4 +118,4 @@ - **Coupling a Stencil TODO app with Redux** https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/ - A tutorial that updates an existing Stencil Todo app to use Redux \ No newline at end of file + A tutorial that updates an existing Stencil Todo app to use Redux diff --git a/static-typing.md b/static-typing.md index 8783604..f252559 100644 --- a/static-typing.md +++ b/static-typing.md @@ -34,6 +34,10 @@ - **React: Validating Children** http://www.mattzabriskie.com/blog/react-validating-children Examples of using PropTypes to enforce what children can be passed to a component + +- **React Pattern: Centralized PropTypes** + https://medium.freecodecamp.org/react-pattern-centralized-proptypes-f981ff672f3b + Discusses creating centralized definitions of data structures using PropTypes to reduce repetition, and suggests a few other good practices for working with PropTypes. #### TypeScript @@ -219,6 +223,15 @@ https://blog.angularindepth.com/how-to-reduce-action-boilerplate-90dc3d389e2b Looks at how TypeScript is normally used with Redux, including "narrowing" actions with type guards and discriminated unions, and looks at ways different libraries use narrowing to help generate actions in a type-safe way. +- **Using TypeScript Generics for writing React Components** + https://blog.mojotech.com/typescript-generic-react-components/ + Useful techniques for writing typed higher-order-components, with specific examples focusing on typing form field components. + +- **Back to the Basics: Using React + Flow** + https://medium.com/javascript-inside/back-to-the-basics-1bd3b12e38dc + https://medium.com/javascript-inside/back-to-the-basics-using-react-flow-pt-2-99292993829f + A series that demonstrates using Flow to add static typing for a Tic-Tac-Toe game + #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index c79434a..a93fab4 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -102,9 +102,12 @@ https://www.viget.com/articles/unpacking-the-mysteries-of-webpack-a-novices-journey Recaps some high-level Webpack terms and concepts, and walks through several changes to speed up compilation and improve bundle size. -- **To ship less code, write transpiler-aware Javascript** - https://medium.com/@jbartos/to-ship-less-code-write-transpiler-aware-javascript-a56250296760 - Tips for improving bundle size by using syntax supported natively by browsers, as well as other techniques for improving bundle output. + + + +- **How to Improve Webpack Performance in Large Projects** + https://redfin.engineering/tech-talk-recap-how-to-improve-webpack-performance-in-large-projects-5435bb18dd18 + Slides, audio, and summary of a talk on various ways to improve Webpack build performance, including disabling sourcemaps for dev builds, parallelizing work, and using DllPlugin. @@ -178,6 +181,15 @@ https://blog.eleven-labs.com/en/ecmascript-asynchronicity-dynamic-import/ Recaps ES6 module behavior and use of Webpack's CommonsChunkPlugin, and describes how to lazy load code using `require.ensure` and the new dynamic `import()` capability. +- **Component Level Isomorphic Webpack Code-Splitting** + https://medium.com/discovery-engineering/component-level-isomorphic-webpack-code-splitting-b98922382cc1 + Looks at the use cases for code splitting, the different ways Webpack can be used to do code splitting, problems with synchronous loading on the server vs async loading on the client, and how the React Universal Component toolkit can help solve those issues. + +- **Lazy Loading with React, Redux, and Webpack 2+** + https://medium.com/front-end-hacking/lazy-loading-with-react-and-webpack-2-8e9e586cf442 + https://medium.com/front-end-hacking/lazy-loading-with-react-redux-and-webpack-2-35ad6fc1b640 + An excellent pair of posts that cover ways to structure components in terms of features, load them at runtime using Webpack's dynamic importing, and apply the same principles to loading Redux feature logic. + #### Bundle Sizes and Visualization @@ -412,6 +424,14 @@ - **Webpack: Creating dynamically named outputs for wildcarded entry files** https://medium.com/@sanjsanj/webpack-creating-dynamically-named-outputs-for-wildcarded-entry-files-9241f596b065 Demonstrates a useful technique for collecting files based on globbing, and generating Webpack entry definitions from those files. + +- **To ship less code, write transpiler-aware Javascript** + https://medium.com/@jbartos/to-ship-less-code-write-transpiler-aware-javascript-a56250296760 + Tips for improving bundle size by using syntax supported natively by browsers, as well as other techniques for improving bundle output. + +- **Deploying ES2015+ Code in Production Today** + https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ + Discusses a way to use `script type="module"` loading as a way to determine if a browser supports most modern syntax, and how to configure Babel to target modern browsers. Not Webpack specific, but useful. #### Webpack Tools