From e77219d6c01c36ed66a57616ee054bd1b160c4ae Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 14 Jan 2018 17:04:33 -0500 Subject: [PATCH 01/59] Updates, 2018-01-14 --- basic-concepts.md | 4 ++++ boilerplates-and-starter-kits.md | 2 +- es6-features.md | 4 ++++ framework-comparisons.md | 6 +++++- git-resources.md | 4 ++++ immutable-data.md | 8 ++++++++ javascript-resources.md | 2 +- pros-cons-discussion.md | 17 ++++++++++++---- react-architecture.md | 6 +++++- react-component-composition.md | 23 ++++++++++++++++++++-- react-component-patterns.md | 6 +++++- react-deployment.md | 19 +++++++++++++++++- react-implementation.md | 2 ++ react-native.md | 9 +++++++-- react-performance.md | 9 +++++++-- react-redux-testing.md | 25 ++++++++++++++++++++++-- react-routing.md | 16 ++++++++++++++++ react-server-rendering.md | 10 +++++++++- react-state-management.md | 2 +- react-styling.md | 11 ++++++++++- react-techniques.md | 14 +++++--------- react-tutorials.md | 13 +++++++++---- redux-architecture.md | 33 ++++++++++++++++++++++++++++++-- redux-middleware.md | 6 +++++- redux-reducers-selectors.md | 4 ++++ redux-side-effects.md | 8 ++++++++ redux-techniques.md | 10 ++++++++-- redux-tutorials.md | 2 +- redux-ui-management.md | 4 ++++ static-typing.md | 6 ++++-- webpack-advanced-techniques.md | 15 ++++++++++++--- webpack-tutorials.md | 4 ++-- 32 files changed, 257 insertions(+), 47 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index d27d69c..e8705b2 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -128,6 +128,10 @@ https://goshakkk.name/next-steps-official-react-tutorial/ General advice on how to approach learning new things in general without getting overloaded, as well as specific advice for concepts and ideas to learn about after grasping the basics of React. +- **5 practical tips to finally learn React in 2018** + https://goshakkk.name/tips-finally-learn-react/ + Common-sense suggestions for simplifying the React learning process, including skipping buzzwords and hardcoding data. + - **Spellbook of Modern Web Dev** https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework A large list of categorized resources for dozens of web development-related topics. diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index d75eccb..9a99b6f 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -91,7 +91,7 @@ #### React Project Setup -- **Simple React Development in 2017** +- **Simple React Development in 2018** https://hackernoon.com/simple-react-development-in-2017-113bd563691f An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production. diff --git a/es6-features.md b/es6-features.md index 51ce247..31c350d 100644 --- a/es6-features.md +++ b/es6-features.md @@ -161,6 +161,10 @@ https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999 A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment. +- **Spreading the Spread and Rest Love: Javascript's Spread Syntax** + https://spin.atomicobject.com/2018/01/09/javascript-spread-syntax/ + Examples of the new array spread and object rest/spread syntaxes, and how to use them + #### Generators diff --git a/framework-comparisons.md b/framework-comparisons.md index 84db72d..72cf8a6 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -71,4 +71,8 @@ - **Migrating complex Javascript applications** https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/ - Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. \ No newline at end of file + Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. + +- **A Chip off the Monolith** + https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 + The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 2f2ffad..73e2071 100644 --- a/git-resources.md +++ b/git-resources.md @@ -150,6 +150,10 @@ https://github.com/blog/2019-how-to-undo-almost-anything-with-git Instructions for undoing and redoing changes in various scenarios. +- **Undoing in Git** + https://blog.tratif.com/2018/01/04/undoing-in-git/ + A summary of the most common ways for undoing things in Git, including bringing back removed commits. + #### E-Books diff --git a/immutable-data.md b/immutable-data.md index 54f4f18..184f440 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -58,6 +58,10 @@ - **ReactCasts #9: Immutability in Javascript** https://www.youtube.com/watch?v=4LzcQyZ9JOU A screencast discussing why immutability is important and its benefits. Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript. + +- **Why Mutation Can Be Scary** + http://alistapart.com/article/why-mutation-can-be-scary + A detailed look at how JS objects and primitives behave in relation to mutability, how `Object.assign` works, and some alternative functions for merging objects. #### Immutability and React @@ -87,6 +91,10 @@ #### Immutable Data Libraries +- **Introducing Immer: Immutability the easy way** + https://hackernoon.com/introducing-immer-immutability-the-easy-way-9d73d8f71cb3 + Michel Weststrate, author of MobX, introduces his new Immer library, which uses ES6 proxies to allow writing normal mutative code while the updates are applied immutably. + - **List of immutable libraries** https://gist.github.com/jlongster/bce43d9be633da55053f A follow-up to James Longster's article, with pointers to numerous immutable data libraries diff --git a/javascript-resources.md b/javascript-resources.md index c4fb2e9..65513f0 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -16,7 +16,7 @@ While this list is primarily focused on learning React and Redux, and generally - **Eric Elliott's Javascript Resource Lists** https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e - https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9 + https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9 Eric Elliott is a strong proponent of Javascript, has written numerous articles about learning and understanding Javascript, and assembled some very useful lists of numerous Javascript resources. (Note that he is very strongly opinionated in his own articles, particularly about certain code patterns that he feels everyone should follow, but overall his advice and information is pretty solid.) - **Wes Bos's Javascript Resource List** diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index b868625..bf78c75 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -12,7 +12,7 @@ A higher-level, more business-case look at the pros of React - **React: A Competitive Edge and a Business Decision** - https://reactjs-tampabay-b63e2.firebaseapp.com/#/ + https://reactjs-tampabay-b63e2.firebaseapp.com/#/ A slideshow laying out a number of arguments for using React - **React.js: The Good and the Bad** @@ -139,9 +139,17 @@ - **6 mistakes Reacters make that Re-framers avoid** https://purelyfunctional.tv/article/react-vs-re-frame/ https://news.ycombinator.com/item?id=15157527 - https://news.ycombinator.com/item?id=15158334 + https://news.ycombinator.com/item?id=15158334 Comparisons between common React/Redux patterns, and how ClojureScript developers using the Reframe toolkit might solve the problems instead. Some decent discussion in the HN comments, including one comment that directly responds to the points in the original article, and discusses how React+Redux give you the power to solve the specific problems you're dealing with. +- **Why is React More Popular than Angular?** + https://javascriptreport.com/why-is-react-more-popular-than-angular/ + A look back at the announcements of React and Angular 2, thoughts on the respective paradigms, and how their popularity might change in the future. + +- **Me on React: an old dog with new tricks** + https://remysharp.com/2017/08/14/me-on-react-an-old-dog + Remy Sharp, creator of JSBin, gives his thoughts and experiences learning React. Discusses tooling support, styled-components, server-side rendering, hot reloading, tradeoffs and abstractions, and more. + #### Comment Threads and Discussions @@ -276,12 +284,13 @@ similar structures in ClojureScript. - **"Redux app size, boilerplate, and abstraction"** https://news.ycombinator.com/item?id=15341562 https://news.ycombinator.com/item?id=15344600 - https://news.ycombinator.com/item?id=15344447 + https://news.ycombinator.com/item?id=15344447 A long subthread of the "React 16" announcement post that discusses several aspects of Redux "boilerplate" and abstraction. I answered a lot of questions about how Redux can and should be used, and there were actually some excellent comments about how Redux usage pays off for long-term app maintainability. - **How Redux can make you a better developer** 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. + 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 diff --git a/react-architecture.md b/react-architecture.md index 47ca587..8412b15 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -293,4 +293,8 @@ - **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 + 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. + +- **In the Mouth of the Beast** + https://charlespeters.net/writing/in-the-mouth-of-the-beast/ + Thoughts on how to approach state management in relation to React, including a focus on the actual needs of your application and what state truly needs to be global. \ No newline at end of file diff --git a/react-component-composition.md b/react-component-composition.md index 625c0ff..11f9533 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -44,7 +44,7 @@ Explanations and examples of HOCs and their uses - **ReactCasts: Higher Order Components** - https://youtu.be/LTunyI2Oyzw + https://youtu.be/LTunyI2Oyzw A screencast that walks through the idea and usage of Higher Order Components - **Annotations about React Higher-Order Components** @@ -107,6 +107,12 @@ https://medium.com/@caseymorrisus/react-composing-higher-order-components-hocs-3a5288e78f55 Gives examples of common use cases for HOCs, shows some example implementations, and demonstrates how to compose HOcs together. +- **Use Default HOcs for Component Logic** + http://arianv.com/post/use-default-hocs-for-component-logic/ + Demonstrates how default behavior and logic can be put into a HOC to simplify code and enable reuse. + + + #### Render Props/Function As Child @@ -198,6 +204,15 @@ https://hackernoon.com/curry-away-in-react-7c4ed110c65a Examples of using currying to create reusable callback functions that can be passed to child components. +- **Killing Switch Statements in React with the Strategy Pattern** + https://glcheetham.name/2016/05/20/killing-switch-statements-in-react-with-the-strategy-pattern/ + Describes why the author dislikes switch statements for determining which component to render, and gives an alternative using functions that return the right component type. + +- **Functional Approach to Higher Order Components and Recompose** + https://codebrahma.com/functional-approach-higher-order-components-recompose/ + Discusses approaches for composing components using functions + + #### Comparing Composition Approaches @@ -244,4 +259,8 @@ - **How "Controllable" React components maximize reusability** https://medium.com/myheritage-engineering/how-controllable-react-components-maximize-reusability-86e3d233fa8e - Gives examples of uncontrolled, controlled, and controllable components, looks at pros and cons of those approaches, and describes how controllable components improve reusability. \ No newline at end of file + Gives examples of uncontrolled, controlled, and controllable components, looks at pros and cons of those approaches, and describes how controllable components improve reusability. + +- **Composing Reusable Components in React** + https://medium.com/@adamrackis/composing-reusable-components-in-react-de44d862fe5a + Walks through the implementation of a reusable accordion component that supports several modes of operation, and demonstrates several useful techniques for composition. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 7ea3f31..ca05e65 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -148,6 +148,10 @@ http://dylanpaulus.com/reactjs/2017/09/08/tips-on-creating-reusable-components.1/ Examples of using `children` and other props to make components more composable and reusable. +- **How to auto bind props using React elements** + http://www.albertgao.xyz/2017/10/28/how-to-auto-bind-props-by-using-react-element/ + Examples of using the `React.Children` API to add additional props to child components + #### React Component Lifecycle @@ -220,7 +224,7 @@ - **ReactCasts #4-5: Context (Parts 1 and 2)** https://www.youtube.com/watch?v=lxq938kqIss - https://www.youtube.com/watch?v=mwYHDXS6uSc + https://www.youtube.com/watch?v=mwYHDXS6uSc A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it. - **React Context and Component Coupling** diff --git a/react-deployment.md b/react-deployment.md index 2824d3f..86ed9c7 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -1,5 +1,7 @@ ### React Deployment +#### Applications + - **Understanding React deployment** https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd An excellent overview of the basic steps needed to deploy a React app, including solutions for common problems such as routing producing 404s and changes not showing up properly. @@ -47,4 +49,19 @@ - **How to deploy a React application: an in depth overview of various options to deploy** https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/ - A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app. \ No newline at end of file + A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app. + + +#### Libraries + +- **Creating react-editables: How to build a set of reusable React components** + 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. + +- **Adventures in creating a React component library with Create React App and TypeScript** + https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87 + Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library. + +- **A guide to building a React component for NPM** + https://medium.com/@markus.s.englund/a-guide-to-building-a-react-component-for-npm-68f03b314753 + A high-level overview of things to consider when publishing a React-based component library, including accessibility, documentation, naming, and marketing \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 016f314..552f10d 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -182,6 +182,8 @@ - **Understanding the React Source Code** https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1 + https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-ii-79e7e8bed56c + https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-iii-69c2711c5f33 Walks through the critical path of React's source code, tracing how a simple component gets rendered. #### React Fiber diff --git a/react-native.md b/react-native.md index c49caf8..b40aca8 100644 --- a/react-native.md +++ b/react-native.md @@ -71,7 +71,8 @@ A number of informative lessons learned building an app using RN and Redux, including components, performance, workflow, and use of Redux. - **Understanding React Native flexbox layout** - https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4 A helpful visual guide to how Flexbox works, both in general and specific to React Native + https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4 + A helpful visual guide to how Flexbox works, both in general and specific to React Native - **How to Create An Authentication System and a Persistent User Session with React Native** http://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/ @@ -120,4 +121,8 @@ - **React Native Events in Gory Details: What Happens on the Way to Listeners** https://levelup.gitconnected.com/react-native-events-in-gory-details-what-happens-on-the-way-to-listeners-2cee6c55940c - A deep dive into the internnal behavior and implementation of React Native's event system. \ No newline at end of file + A deep dive into the internnal behavior and implementation of React Native's event system. + +- **Simplifying react-native navigation with a Redux router** + https://medium.com/@ericacooksey/simplifying-react-native-navigation-with-a-redux-wrapper-8d5d530af8fc + Examples of how to implement a Redux-based approach for handling navigation in conjunction with react-native-navigation \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 0a1f2bc..310f05c 100644 --- a/react-performance.md +++ b/react-performance.md @@ -106,7 +106,8 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) Tips on using the new browser devtools integration capability in React 15.4 to track component performance. - **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 + 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 @@ -194,6 +195,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/@donavon/demystifying-memory-usage-using-es6-react-classes-d9d904bc4557 A quick look at the memory usage differences between calling `Function.bind` and using the Class Properties syntax, and the readability tradeoffs involved. +- **How does React decide to re-render a component?** + http://lucybain.com/blog/2017/react-js-when-to-rerender/ + An easy-to-read overview of when and why a component will re-render. + #### Code Splitting and Progressive Apps @@ -264,7 +269,7 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) Good comments from an HN thread discussing a React vs Vue benchmark. A Discord developer talks about several lessons learned, including pros and cons of using Immutable.js, and only rendering elements that are visible. - **Immutable.js: worth the cost?** - https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4 + https://medium.com/@AlexFaunt/immutablejs-worth-the-price-66391b8742d4 Looks at several pros and cons of using Immutable.js, such as enforced immutability (pro), and major performance problems from calling `toJS()` frequently (con). - **React + Redux performance optimization with shouldComponentUpdate** diff --git a/react-redux-testing.md b/react-redux-testing.md index f61b324..62a5cd4 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -90,7 +90,7 @@ An in-depth look at how to set up and use Jest for testing - **React UI Testing with Storybook** - https://storybooks.js.org/docs/react-storybook/testing/react-ui-testing + https://storybooks.js.org/docs/react-storybook/testing/react-ui-testing Looks at using the React Storybook component editor to do UI testing - **Testing React Components with mocha-webpack** @@ -161,6 +161,17 @@ https://javascriptplayground.com/blog/2017/12/introduction-to-react-tests-enzyme/ Introduces the Enzyme library for testing components, and shows a short TDD approach for writing a component +- **Unit test code that uses CSS Modules** + https://medium.com/@a_eife/unit-test-code-that-uses-css-modules-ef5b49efc707 + Provides several solutions for handling imports of CSS Modules when running unit tests + +- **Testing React components using render props** + https://dev.to/kentcdodds/testing--components-using-render-props-1f00 + Kent C Dodds gives several examples and suggestions of approaches for testing components that make use of render props. + +- **Lessons learned testing React & Redux apps with Jest and Enzyme** + https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b + Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested. #### Redux @@ -320,6 +331,12 @@ https://codeburst.io/how-i-test-redux-saga-fcc425cda018 Short examples of a typical saga and a test for that saga, with some thoughts on a couple tricks for testing sagas. +- **Testing strategies for Redux apps** + https://www.codesai.com/2017/04/test-driving-react-redux + https://www.codesai.com/2017/04/testing-strategies + https://www.codesai.com/2017/06/testing-hacks-react-redux + A series of posts describing several strategies for testing Redux apps, including larger integration tests with mock APIs, handling of async logic, routing, and scroll events. + #### General Testing, Tools, and Setup @@ -413,4 +430,8 @@ - **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 + 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. + +- **Testing UI** + https://charlespeters.net/writing/testing-ui/ + Thoughts on the benefits of different types of testing, including code coverage, unit tests for React components, snapshot tests, and integration tests. \ No newline at end of file diff --git a/react-routing.md b/react-routing.md index 31fab74..41bb6ac 100644 --- a/react-routing.md +++ b/react-routing.md @@ -71,6 +71,18 @@ http://coding4real.com/2017/12/19/using-react-router-dom/ An introduction that shows how to add React-Router to a basic React app, and describes the basic API. +- **React Router v4: The Complete Guide** + https://www.sitepoint.com/react-router-v4-complete-guide/ + A detailed tutorial that covers the React Router v4 API and concepts, with many examples + +- **React Router v4: Philosophy and Introduction** + https://tylermcginnis.com/react-router-philosophy-introduction/ + A deep look at the history of React Router, and how v4 works as "just components". + +- **Server Rendering, Code Splitting, and Lazy Loading with React Router v4** + https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70 + Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel. + #### Routing with Redux @@ -118,6 +130,10 @@ https://www.dailydrip.com/topics/react/drips/redux-first-router-first-impressions A short tutorial that shows how to add redux-first-router to a CRA project and configure it. +- **React Router to Redux First Router** + https://medium.com/@jonsamp/react-router-to-redux-first-router-2fea05c4c2b7 + Describes some of the problems the Codecademy team had using React-Router in conjunction with Redux, and why they switched to Redux-First-Router instead. + #### Authentication diff --git a/react-server-rendering.md b/react-server-rendering.md index 322484d..c73d2cb 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -103,4 +103,12 @@ - **The simple guide to server-side rendering React with styled-components** https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf - A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling \ No newline at end of file + A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling + +- **How I spent my Christmas enabling SSR** + https://medium.com/@tabu_craig/how-i-spent-my-christmas-enabling-ssr-5bacfc686032 + A recap of how a team set up SSR for their existing React+Redux+Redux-Saga application, with the major changes they implemented + +- **"Server-Side Rendering - Not Worth It?"** + https://www.reddit.com/r/reactjs/comments/7o6oj6/serverside_rendering_not_worth_it/ + An extended Reddit discussion on the pros, cons, and techniques for SSR with React \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index 225edac..aa3b69e 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -19,7 +19,7 @@ Describes different categories of state: data, communication, control, session, and location - **"M" and "C" in "MVC"** - https://www.youtube.com/watch?v=fUpkYixd03k + https://www.youtube.com/watch?v=fUpkYixd03k https://github.com/jamesknelson/m-and-c-in-mvc-talk James K. Nelson's talk at ReactNext, talking about the multiple categories of state and how controller components can manage them. diff --git a/react-styling.md b/react-styling.md index 47ae7d5..8ed4fb1 100644 --- a/react-styling.md +++ b/react-styling.md @@ -204,11 +204,20 @@ https://blog.elpassion.com/styled-components-nitty-gritty-2d74b8690ef8 An introduction to how to use the styled-components library, the problems that it solves, and how it works internally +- **A Field Guide to CSS-in-JS** + https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7 + Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more. + +- **CSS-in-JS Roundup: Styling React Components** + https://alligator.io/react/css-in-js-roundup-styling-react-components/ + A high-level comparison of 15 different CSS-in-JS libraries + #### Techniques and Examples - **How to build animated microinteractions in React** - https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8 Examples of various ways to create small animations to give feedback as the user interacts with components + https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8 + Examples of various ways to create small animations to give feedback as the user interacts with components - **Create That Component** https://medium.com/taitounited/create-that-component-1-7a2267bc2833 diff --git a/react-techniques.md b/react-techniques.md index bc7e5ab..9b15ecb 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -31,18 +31,10 @@ https://gather.engineering/react-ui-frameworks-compared-dd631eb5c982 A list of available React UI frameworks, with reviews and comparisons on breadth of components, quality, project health, and more. Includes Ant Design, PrimeReact, Office UI Fabric, Blueprint, React UI, Semantic UI React, ExtReact, and Kendo React UI. -- **Creating react-editables: How to build a set of reusable React components** - 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. -- **Adventures in creating a React component library with Create React App and TypeScript** - https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87 - Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library. - - **The Complete Firebase in React Authentication Tutorial** https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/ A comprehensive article that covers setting up a React app that uses React Router for handling routes, and Firebase for authentication and user management. @@ -55,6 +47,10 @@ http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/ An example of extending the standard approach for looking up component types at runtime, by allowing the lookup table to be modified. +- **Getting Started with Web Accessibility** + https://medium.com/@emilymears/getting-started-with-web-accessibility-in-react-9e591fdb0d52 + An excellent look at ways to handle accessibility in React, including use of refs for focus, ARIA attributes, helpful tools, and more. + #### Security @@ -78,7 +74,7 @@ Describes how to add React to an existing page with no build tools, and a couple approaches to writing render functions that don't use JSX. - **Integrating React and Redux Into an Existing Backbone App** - http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ + http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ A look at ways to show React components inside of Backbone views, and some discussion of how to simplify React rendering when JSX isn't available by using libraries like `react-hyperscript-helpers`. - **How I learned to stop worrying and love the JSX** diff --git a/react-tutorials.md b/react-tutorials.md index 2522e77..389c5ea 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -18,7 +18,7 @@ - **Learn React From Your Browser: Introducing React** https://reactarmory.com/guides/learn-react-by-itself - https://reactarmory.com/examples/hello-world/jsx-hello-world + 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** @@ -26,7 +26,7 @@ A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. - **React Fundamentals** - https://tylermcginnis.com/courses/react-fundamentals/ + https://tylermcginnis.com/courses/react-fundamentals/ 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** @@ -156,6 +156,10 @@ https://egghead.io/courses/the-beginner-s-guide-to-reactjs A free video series from Kent C Dodds that teaches React fundamentals. Each lesson's sample code is a simple index.html file so you can focus on learning React, without distractions from other tools. +- **Learning React** + https://withouttheloop.com/articles/2018-01-03-react-1/ + A multi-part series that tries to bridge the gap between a "Hello World" example and a production-ready app, by showing how a React app is built up from first principles and explaining why each new piece is necessary. Covers topics like basic components, Redux, React-Router, AJAX, and more. + #### React Concept Overviews @@ -301,7 +305,7 @@ Demonstrates building a small app that displays info on a Google map - **React Daily UI** - http://codepen.io/collection/DoLZRm/ + http://codepen.io/collection/DoLZRm/ https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/ https://www.fullstackreact.com/react-daily-ui/002-checkout/ https://www.fullstackreact.com/react-daily-ui/003-landing-page/ @@ -352,7 +356,8 @@ Demonstrates building a small app that handles payment information using the Stripe service - **Let's Learn: Higher Order Components and Websockets** - https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events. + https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 + Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events. - **Make Your Own Charts in React Without a Charting Library** https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library-part-1/ diff --git a/redux-architecture.md b/redux-architecture.md index ba387cc..d817098 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -115,6 +115,18 @@ https://decembersoft.com/posts/turning-requirements-into-react-redux-code/ Looks at a typical description of desired behavior for a loading/container component, then walks through breaking the description into requirements and shows how to implement those in React and Redux. +- **Scaling React/Redux in Yahoo Finance** + https://medium.com/@longho/scaling-react-redux-in-yahoo-finance-88ef9e89b55c + The Yahoo Finance team describes how they've structured their React+Redux architecture, including data layers, action and state structures, use of API and analytics middleware, routing, rendering, and server-side garbage collection. + +- **How We're Sharing Code Between React and React Native** + https://blog.smartive.ch/how-were-sharing-code-between-react-and-react-native-607cdd1f5247 + A look at how Redux-based code can be shared between multiple platforms in a framework-agnostic way, with discussion on which types of code are most sharable. + +- **How We React at Microsoft To-Do** + https://www.youtube.com/watch?v=CWxc3AYja1I + A 10-minute presentation from a Microsoft engineer for how they approach connecting all of their components to Redux. + #### Redux Best Practices @@ -425,6 +437,15 @@ - **Fractal Architecture** http://antontelesh.github.io/architecture/2016/03/16/fractal-architecture.html Discesses some rules of fractal architecture, looks at how those apply to React, Elm, and Cycle, and then describes ways to apply those rules to Redux code to enforce modularity. + +- **Restate - the store of Redux Tree** + https://medium.com/@antonkorzunov/restate-the-story-of-redux-tree-27d8c5d1040a + https://medium.com/@antonkorzunov/the-state-of-the-state-of-the-state-f93c8bdc6b1b + Describes a library that can wrap up React components so they only see a portion of a Redux store + +- **Dependency Injection in Redux** + https://www.codesai.com/2017/04/dependency-injection-react-redux + Examples of using component factories to generate connected components and allow easier testing #### Variations on Redux Architectures @@ -524,6 +545,14 @@ https://medium.com/@mike.es6.programmer/reslice-yet-another-way-of-managing-scale-in-react-and-redux-223971139d6b Discusses the Reslice toolkit, how it wraps up Redux+Reselect+React-Redux, and how it differs from a standard React+Redux architecture. -- **"How to deal with dumb REdux views that import containers?"** +- **"How to deal with dumb Redux views that import containers?"** https://www.reddit.com/r/javascript/comments/7eavyx/how_to_deal_with_dumb_redux_views_that_import/ - Interesting discussion on ways to organize nested Redux-connected components for reusability. \ No newline at end of file + Interesting discussion on ways to organize nested Redux-connected components for reusability. + +- **Introducing Redux Box** + https://medium.com/@anish000kumar/introducing-redux-box-99e3d2134ab6 + Discussion of a library for generating Redux application modules. + +- **Redux for Chrome Extensions** + https://robots.thoughtbot.com/redux-for-chrome-extensions + A detailed look at how Redux can fit into the Chrome extension architecture \ No newline at end of file diff --git a/redux-middleware.md b/redux-middleware.md index dac2d50..7011a3f 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -104,4 +104,8 @@ - **Redux analytics, without middleware** http://web.archive.org/web/20170617100422/http://blog.reactandbethankful.com/posts/2016/09/27/redux-analytics-without-middleware/ - Discusses pros and cons of using middleware for analytics, and shows how to create a store enhancer that wraps `subscribe` to allow providing selectors and callbacks. \ No newline at end of file + Discusses pros and cons of using middleware for analytics, and shows how to create a store enhancer that wraps `subscribe` to allow providing selectors and callbacks. + +- **How to use Redux middleware to decouple AJAX call?** + http://www.albertgao.xyz/2017/12/07/how-to-use-redux-middleware-to-decouple-ajax-call/ + Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request \ No newline at end of file diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 1ec31f5..5f4cf6f 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -78,6 +78,10 @@ - **Code splitting Redux reducers** https://medium.com/front-end-hacking/code-splitting-redux-reducers-4073db30c72e Comprehensive instructions on how to properly code-split reducers for dynamic loading at runtime. + +- **Dynamic Redux Reducers** + https://tylergaw.com/articles/dynamic-redux-reducers/ + Demonstrates setting up the "async reducers" approach described by Dan Abramov, and adding reducers based on routes using HOCs to abstract the process. #### Selectors diff --git a/redux-side-effects.md b/redux-side-effects.md index 3ba291a..1b014f8 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -297,6 +297,10 @@ https://objectpartners.com/2017/11/20/taming-redux-with-sagas/ A good overview of Redux-Saga, including info on generator functions, use cases for sagas, using sagas to deal with promises, and testing sagas. +- **Learning Redux Saga: Event Channels with Web Midi** + https://medium.com/@joeltbond/learning-redux-saga-event-channels-29dee438fd7b + Demonstrates using sagas to interact with the Web MIDI API + #### Observables @@ -324,6 +328,10 @@ https://ivanjov.com/reactive-redux-state-with-rxjs/ Describes the concept of "Reactive PRogramming" and the RxJS library, and shows how to use redux-observable to fetch data, along with examples of testing. +- **Creating and Testing a D3/React Game with Redux-Observable** + https://medium.com/@eric.hulburd.af/creating-and-testing-a-d3-react-game-with-redux-observable-d97f2155421c + A detailed look at the concepts and usage of redux-observable. Implements an example game that's built to demonstrate usage in a more meaningful application, and shows how to test epics. + diff --git a/redux-techniques.md b/redux-techniques.md index ff7d750..7a7804f 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -59,6 +59,10 @@ - **A user encounters a JavaScript error. You'll never guess what happens next!** https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490 A walkthrough for how to capture user page interactions and dispatched Redux actions into a "journey" object that can be sent to the server if an error is detected, allowing a developer to play back the user's behavior for debugging. + +- **Getting the most out of Redux + Sentry** + https://blog.lingoapp.com/getting-the-most-out-of-redux-sentry-ecd8c737410d + Describes how to use Sentry to monitor behavior of Redux apps in production #### Other @@ -165,7 +169,8 @@ - **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. + 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. - **Redux Action Creator Creators** https://hackernoon.com/redux-action-creator-creators-6684b051d4c6 @@ -184,7 +189,8 @@ 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. + 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. - **Abstracting Vuex/Redux Action Patterns** https://medium.com/coding-stones/abstracting-vuex-redux-action-patterns-8df36b0e2fcc diff --git a/redux-tutorials.md b/redux-tutorials.md index c955f84..e13e980 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -65,7 +65,7 @@ A variety of user-provided diagrams illustrating how the pieces of Redux fit together. - **How I Learned to Stop Worrying and Love Redux** - https://medium.com/@shopsifter/how-i-learned-to-stop-worrying-and-love-redux-9b50e505e802 + https://medium.com/@shopsifter/how-i-learned-to-stop-worrying-and-love-redux-9b50e505e802 A new Redux user describes how she was able to overcome initial problems learning Redux. - **Introduction to Redux and React-Redux** diff --git a/redux-ui-management.md b/redux-ui-management.md index 4723dde..95dac1a 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -77,6 +77,10 @@ https://medium.com/front-end-hacking/react-redux-no-need-to-component-state-for-modals-73871157b52e Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals. +- **Handling Keyboard Commands with Redux** + https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff + Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox + #### Redux and Forms diff --git a/static-typing.md b/static-typing.md index 2c2eb9e..71b9c99 100644 --- a/static-typing.md +++ b/static-typing.md @@ -5,7 +5,8 @@ - **The Shocking Secret about Static Types / You Might Not Need Typescript (or Static Types)** https://medium.com/javascript-scene/the-shocking-secret-about-static-types-514d39bf30a3 - https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b Eric Elliott argues against use of static types in Javascript, on the grounds that the tradeoffs aren't worth it and that TDD and code review provide more benefit in reducing bugs. + https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b + Eric Elliott argues against use of static types in Javascript, on the grounds that the tradeoffs aren't worth it and that TDD and code review provide more benefit in reducing bugs. - **Why use static types in Javascript?** https://dev.to/iampeekay/why-use-static-types-in-javascript-part-1 @@ -202,7 +203,8 @@ Describes how to use the new features in TS 2.4, such as string enums, to simplify defining types for Redux actions. - **Best Practices for Flow Typing React Components** - https://building.coursera.org/blog/2017/06/01/best-practices-for-flow-typing-react-components/ Several useful suggestions and examples for using Flow types with React components. + https://building.coursera.org/blog/2017/06/01/best-practices-for-flow-typing-react-components/ + Several useful suggestions and examples for using Flow types with React components. - **React Higher-Order Components using TypeScript** https://www.triplet.fi/blog/react-higher-order-components-hoc-using-typescript/ diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index b1d0b95..53ac394 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -102,13 +102,14 @@ 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. - - - - **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. +- **How we improved Webpack build performance by 95%** + https://blog.box.com/blog/how-we-improved-webpack-build-performance-95/ + Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel. + #### Code Splitting and Chunking @@ -198,6 +199,10 @@ https://blog.cloudboost.io/webpack-3-dynamic-imports-code-splitting-and-long-term-caching-made-easy-1892981e0ae7 Describes how to configure Webpack and use React-Loadable to set up code-splitting, as well as set up consistent module hash IDs. +- **Two Tips to Improve Performance by 30% with React and Webpack** + http://engineering.teacherspayteachers.com/2017/08/16/two-tips-to-improve-performance-by-30-with-react-and-webpack.html + Looks at ways the Teachers Pay Teachers team used async bundle loading and bundle size optimization to improve their load time. + #### Bundle Sizes and Visualization @@ -275,6 +280,10 @@ http://engineering.teacherspayteachers.com/2017/12/20/reducing-bundle-sizes-with-webpack-bundle-analyzer.html Tips for using the Webpack Bundle Analyzer tool to track down large dependencies. +- **Webpack Bundle Analysis - A necessary step for all React / Angular / Vue developers!** + https://hackernoon.com/webpack-bundle-analysis-a-necessary-step-for-all-react-angular-vue-application-developers-fe6564fa62ca + Walks through the process of analyzing an Angular bundle and improving build steps to cut down on bundle size. + #### Hot Module Replacement diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 5226c38..113ce29 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -164,11 +164,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack - From Apprentice to Journeyman** - http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/ + http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/ A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack. - **Webpack - From Journeyman to Master** - https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/ + https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/ A follow-up presentation, digging into advanced Webpack concepts, configuration, and internals - **webpack By Example** From 5bf6efca46488dd629bafe03e2b597ea5c070c5e Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 21 Jan 2018 15:58:59 -0500 Subject: [PATCH 02/59] Updates, 2018-01-21 --- framework-comparisons.md | 14 +++++++++++++- git-resources.md | 4 ++++ immutable-data.md | 6 +++++- react-implementation.md | 13 ++++++++++++- react-performance.md | 4 ++++ react-redux-testing.md | 9 +++++++++ react-routing.md | 8 ++++++++ react-server-rendering.md | 6 +++++- react-state-management.md | 4 ++++ react-styling.md | 13 +++++++++++++ react-tutorials.md | 31 ++++++++++++++++--------------- redux-architecture.md | 4 ++++ redux-side-effects.md | 14 ++++++++++++++ redux-techniques.md | 2 +- redux-tutorials.md | 8 ++++++++ redux-without-react.md | 8 +++++++- static-typing.md | 22 +++++++++++++++++++++- webpack-advanced-techniques.md | 4 ++++ webpack-tutorials.md | 9 +++++++++ 19 files changed, 161 insertions(+), 22 deletions(-) diff --git a/framework-comparisons.md b/framework-comparisons.md index 72cf8a6..1153abe 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -34,6 +34,10 @@ - **Unopinionated comparison of Glimmer and React** https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react A well-written comparison of small React and Glimmer components that implement the same functionality. + +- **The Ultimate Guide to JavaScript Frameworks** + https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/ + A high-level overview of both major and minor JS frameworks in 2018, Groups them into "the big three", "historically significant", "notable", and "the rest of the pack". Provides short descriptions and links to additional resources for each, as well as pros and cons for the better-known frameworks. #### React and Flux vs Backbone @@ -75,4 +79,12 @@ - **A Chip off the Monolith** https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 - The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. \ No newline at end of file + The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. + +- **7 Tips for migration from Backbone to React & Redux** + https://medium.com/@denisraslov/7-tips-for-migration-from-backbone-to-react-redux-a006a927c39e + Excellent practical advice for adding React and Redux into a Backbone app, including rendering React components inside Backbone views, syncing Backbone and Redux, and planning the migration timing. + +- **Transitioning Your Marionette App to React** + https://medium.com/@michaelsholty/transitioning-your-marionette-app-to-react-4b94ddefafd1 + Examples of interop between React components and Marionette views \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 73e2071..db2fe93 100644 --- a/git-resources.md +++ b/git-resources.md @@ -154,6 +154,10 @@ https://blog.tratif.com/2018/01/04/undoing-in-git/ A summary of the most common ways for undoing things in Git, including bringing back removed commits. +- **Beginner's Guide to Interactive Rebasing** + https://hackernoon.com/beginners-guide-to-interactive-rebasing-346a3f9c3a6d + An excellent walkthrough of how to use interactive rebasing for rewriting commit history by editing, deleting, and combining commits + #### E-Books diff --git a/immutable-data.md b/immutable-data.md index 184f440..a31a2ec 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -161,4 +161,8 @@ - **You're missing out on ImmutableJS Records** https://medium.com/@ahmadbamieh/immutablejs-records-bd369137da06 - An introduction to the Immutable.js Record type, and how it can be used to define data types \ No newline at end of file + An introduction to the Immutable.js Record type, and how it can be used to define data types + +- **Immutability through Mutability - Immer & Redux** + https://medium.com/@Tetheta/immutability-through-mutability-immer-redux-3e14246c6506 + A look at Michel Weststrate's Immer library, which uses ES6 proxies to produce immutable updates using normal mutative code. Shows how this can simplify nested state updates in Redux reducers. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 552f10d..a9a7129 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -86,6 +86,10 @@ https://github.com/nitin42/Making-a-custom-React-renderer A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document +- **Extending React** + https://www.javascriptjanuary.com/blog/extending-react + Walks through building a very simplified mini React clone, including `createElement`, rendering to the DOM, and `setState` updates + #### Implementation and Internals @@ -184,7 +188,10 @@ https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1 https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-ii-79e7e8bed56c https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-iii-69c2711c5f33 - Walks through the critical path of React's source code, tracing how a simple component gets rendered. + https://hackernoon.com/understanding-the-react-source-code-iv-e3c4b66da12c + https://hackernoon.com/understanding-the-react-source-code-v-812d69a79fb9 + Walks through the critical path of React 15's source code, tracing how a simple component gets rendered. + #### React Fiber @@ -220,6 +227,10 @@ https://www.robinwieruch.de/what-is-new-in-react-16/ A very useful look at the new user-facing features in React 16, with code examples. +- **Rethinking with React 16** + https://www.javascriptjanuary.com/blog/rethinking-with-react-16 + An informative overview of the major changes in React 16, including the goals of the "React Fiber" rewrite, Fragments, Error Boundaries, server-side rendering improvements, and more. + - **React Fiber Architecture** https://github.com/acdlite/react-fiber-architecture A description of React's new core algorithm, React Fiber diff --git a/react-performance.md b/react-performance.md index 310f05c..a4e4656 100644 --- a/react-performance.md +++ b/react-performance.md @@ -199,6 +199,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) http://lucybain.com/blog/2017/react-js-when-to-rerender/ An easy-to-read overview of when and why a component will re-render. +- **Dragging React performance forward** + https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33 + A detailed look at how the react-beautiful-dnd library implemented performance improvements with drastically better results, including avoiding unnecessary renders and DOM reads, applying style updates, virtualizing movement, and using lookup tables. + #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index 62a5cd4..b320bd1 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -337,6 +337,15 @@ https://www.codesai.com/2017/06/testing-hacks-react-redux A series of posts describing several strategies for testing Redux apps, including larger integration tests with mock APIs, handling of async logic, routing, and scroll events. +- **Evaluating Redux Saga Test Libraries** + http://blog.scottlogic.com/2018/01/16/evaluating-redux-saga-test-libraries.html + Looks at several ways to approach testing sagas, and how specific saga test helper libraries use those approaches. Includes a helpful table listing which approaches each helper library supports. + +- **Testing mapState, mapDispatch, and connected components** + http://jsramblings.com/2018/01/15/3-ways-to-test-mapStateToProps-and-mapDispatchToProps.html + http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html + A pair of articles that discuss ways to handle testing the various pieces of connected components. + #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index 41bb6ac..6270379 100644 --- a/react-routing.md +++ b/react-routing.md @@ -83,6 +83,14 @@ https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70 Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel. +- **URL Parameters with React Router** + https://tylermcginnis.com/react-router-url-parameters/ + Tyler McGinnis gives a short example of how to use parameters from the current URL in a component with React-Router v4 + +- **Using React Router v4 with create-react-app** + https://codingblast.com/react-router-create-react-app/ + Explains key concepts of React-Router v4, and gives examples of using it in a CRA project + #### Routing with Redux diff --git a/react-server-rendering.md b/react-server-rendering.md index c73d2cb..91b29c0 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -111,4 +111,8 @@ - **"Server-Side Rendering - Not Worth It?"** https://www.reddit.com/r/reactjs/comments/7o6oj6/serverside_rendering_not_worth_it/ - An extended Reddit discussion on the pros, cons, and techniques for SSR with React \ No newline at end of file + An extended Reddit discussion on the pros, cons, and techniques for SSR with React + +- **Upgrading a create-react-app project to a SSR + code splitting setup** + https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a + Walks through the process of setting up server-side rendering with Express, adding code splitting with the react-loadable library, and naming chunks with Webpack. \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index aa3b69e..fcaad50 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -74,6 +74,10 @@ - **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. + +- **Three approaches to distribute the state across components in React** + https://engineering.hexacta.com/three-approaches-to-distribute-the-state-across-components-in-react-da4db5a389e0 + Looks at three ways to handle state that needs to apply to sibling components: controlling the state in the parent, synchronizing the states, and forcing a different component instance via the `key` prop #### Using `setState` diff --git a/react-styling.md b/react-styling.md index 8ed4fb1..97fd3d5 100644 --- a/react-styling.md +++ b/react-styling.md @@ -149,6 +149,15 @@ https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4 The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work. +- **CSS-in-JS** + https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31 + First in a series of posts from Sunil Pai, author of the Glamor library. Explains the basic concepts of handling CSS values as JS objects and arrays. + + +- **Things to consider when choosing a React styling framework** + http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html + Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support + #### Style Libraries @@ -212,6 +221,10 @@ https://alligator.io/react/css-in-js-roundup-styling-react-components/ A high-level comparison of 15 different CSS-in-JS libraries +- **Migrating to styled-components cheatsheet** + http://jsramblings.com/2017/10/29/migrating-to-styled-components-cheatsheet.html + Some helpful tips for moving a project from vanilla CSS to the styled-components library + #### Techniques and Examples diff --git a/react-tutorials.md b/react-tutorials.md index 389c5ea..cddde62 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -12,6 +12,10 @@ 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. +- **The Beginner's Guide to ReactJS** + https://egghead.io/courses/the-beginner-s-guide-to-reactjs + A free video course with short lessons that explain key React concepts, including using `React.createElement` and JSX, conditional rendering, forms, styling, lists, HTTP requests, and deploying a React app. + - **30 Days of React** https://www.fullstackreact.com/30-days-of-react/ A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment. @@ -115,25 +119,10 @@ - **React by Example** https://medium.com/front-end-hacking/react-by-example-part-1-76d3e2137cf4 - https://medium.com/front-end-hacking/react-by-example-part-2-340582c6f552 - https://medium.com/@johntucker_48673/react-by-example-part-3-f825444bc1d8 - https://medium.com/@johntucker_48673/react-by-example-part-4-5d32168db362 - https://medium.com/@johntucker_48673/react-by-example-part-5-e1716e69dacc - https://medium.com/@johntucker_48673/react-by-example-part-6-8c71dda057ac - https://medium.com/@johntucker_48673/react-by-example-part-7-8dc97b57f668 A multi-part series that illustrates core React concepts via a series of small example repos, with explanations of the source and concepts in the articles. - **React.js for the Visual Learner** https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-1-what-is-this-all-about-a0d28cfd33c6 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-2-what-is-react-and-why-is-it-cool-d1f9bac69a63 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-3-building-our-houses-295c43304b18 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-4-our-first-village-8b44427d4762 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-5-additions-to-our-houses-7e67ed97b62b - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-6-building-our-first-project-5429f1afde98 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-7-building-our-first-user-interface-c61e9a22be2f - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-8-implementing-react-router-6109671db576 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-9-chat-bot-demo-using-firebase-637445703c74 - https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-10-reacting-to-what-weve-learned-633ac18469ba A 10-part series that explains React (and many web dev concepts) from the ground up, with simple terms and lots of metaphors. Aimed at absolute beginners. - **Intro to React** @@ -203,6 +192,14 @@ https://react.christmas/ A series of short posts that look at specific aspects of using React, including using Create-React-App, testing code, using Fragments, component composition, and much more. +- **6 React Development Tips for Beginners** + https://www.codementor.io/canberkmorelli/i-wish-i-knew-these-before-diving-into-react-fvionauhk Several useful tips for understanding how React works, including behavior of `setState` and component lifecycle methods. + +- **React - Common Questions** + https://academind.com/learn/react/react-q-a/ + An article and accompanying video that explain answers to common questions about React, including whether a complex project setup is necessary, different ways to define components, ways to style React apps, immutability, using React with various backends, and more. + + #### Project-Based Tutorials @@ -411,6 +408,10 @@ https://sabe.io/tutorials/getting-started-with-react A tutorial that demonstrates how to build a simple real-time display of cryptocurrency prices. +- **Creating your first MERN stack application** + https://blog.cloudboost.io/creating-your-first-mern-stack-application-b6604d12e4d3 + Shows how to build an expense manager application, using create-react-app as the basis for the front end. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index d817098..0eb94ea 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -34,6 +34,10 @@ https://medium.com/@fastphrase/when-to-use-redux-f0aa70b5b1e2 Some helpful thoughts on when you should use Redux: same app state needed in multiple components, global components that need to be accessed anywhere, too much prop passing, and more. +- **When (and when not) to use Redux** + https://blog.logrocket.com/when-and-when-not-to-use-redux-41807f29a7fb + A useful summary of the problems Redux can help solve in React apps, the major benefits of using Redux, reasons why you might not need Redux, and the basic concepts of Redux. + #### Redux Architecture diff --git a/redux-side-effects.md b/redux-side-effects.md index 1b014f8..7ad6e7e 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -301,6 +301,10 @@ https://medium.com/@joeltbond/learning-redux-saga-event-channels-29dee438fd7b Demonstrates using sagas to interact with the Web MIDI API +- **May Cause Side Effects: How to Implement Redux Sagas as Middlewares** + https://www.javascriptjanuary.com/blog/may-cause-side-effects-how-to-implement-redux-sagas-as-middleware + An extensive article that first implements async functionality with thunks, then walks through how sagas work and refactors the logic to use sagas instead. + #### Observables @@ -332,7 +336,17 @@ https://medium.com/@eric.hulburd.af/creating-and-testing-a-d3-react-game-with-redux-observable-d97f2155421c A detailed look at the concepts and usage of redux-observable. Implements an example game that's built to demonstrate usage in a more meaningful application, and shows how to test epics. +- **Timing of reducing Actions with Redux-Observable** + https://www.bleathem.ca/blog/timing-of-reducing-actions-with-redux-observable/ + Breaks down the sequence of behavior when actions are dispatched, how Redux-Observable interacts with that sequence, and gives examples of epics dispatching actions synchronously and asynchronously. + +- **Streaming Redux state as an Observable with RxJS** + https://dev.to/fahad19/streaming-redux-state-as-an-observable-with-rxjs-5f48 + Examples of how to construct an Observable stream that subscribes to the Redux store state +- **You Aren't Using Redux with Observables Enough** + https://medium.com/@jacobp100/you-arent-using-redux-with-observables-enough-b59329c5a3af + Shows how to use the Redux store as the source for an observable stream, and gives examples of RxJS observable streams that toggle music player behavior and handle async requests that need to be canceled. #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index 7a7804f..ded68a1 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -153,7 +153,7 @@ - **Redux Dead Drop** https://medium.com/@erikras/redux-dead-drop-1b9573705bec Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node - + #### Reducing Boilerplate diff --git a/redux-tutorials.md b/redux-tutorials.md index e13e980..72da027 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -31,6 +31,10 @@ - **Redux and React: An Introduction** http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/ A great introduction to Redux's core concepts, with explanations of how to use the React-Redux package to use Redux with React. + +- **React Redux Tutorial for Beginners: Learning Redux in 2018** + https://dev.to/valentinogagliardi/react-redux-tutorial-for-beginners-learning-redux-in-2018-13hj + An excellent tutorial that covers a variety of Redux fundamentals, including a look at the problems Redux helps solve, when you should learn and use Redux, actions and reducers, the Redux store, and how to connect React components to Redux. - **Single State Tree + Flux** http://merrickchristensen.com/articles/single-state-tree.html @@ -424,6 +428,10 @@ - **Finally understand Redux by building your own Store** https://toddmotto.com/redux-typescript-store Teaches Redux concepts by going under the hood and building a Redux-equivalent Store class from scratch + +- **redux-class** + https://github.com/GKhalsa/redux-class + A miniature Redux and React-Redux implementation built for learning purposes #### Paid Courses and Books diff --git a/redux-without-react.md b/redux-without-react.md index b65d064..c1fd49e 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -167,4 +167,10 @@ - **A blockchain-backed Redux clone in 105 lines of code** https://swizec.com/blog/blockchain-backed-redux-clone-105-lines-code/swizec/7980 - An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. \ No newline at end of file + An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. + +- **How to use Redux with Polymer** + https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 + https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a + https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005 + A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 71b9c99..ec66529 100644 --- a/static-typing.md +++ b/static-typing.md @@ -250,6 +250,10 @@ https://decembersoft.com/posts/error-ts2532-optional-react-component-props-in-typescript/ Describes a specific TS error message that can result from trying to use default props, and and shows how to solve it. +- **3 Tricks for Using Redux and Immutable.js with TypeScript** + http://blog.mgechev.com/2018/01/18/react-typescript-redux-immutable/ + Examples of statically typing Immutable.js Records, action creators, and class-based actions + #### Advancing Typing Techniques @@ -278,6 +282,10 @@ https://codemix.com/opaque-types-in-javascript/ Describes how to use Flow's "opaque types" feature to make otherwise compatible types separate, such as an account number and a balance. +- **Flavoring: Flexible Nominal Typing for TypeScript** + https://spin.atomicobject.com/2018/01/15/typescript-flexible-nominal-typing/#.Wly5RmUfXDk.hackernews + Looks at an approach for "branding" similar types to make them distinct, some of the problems with branding, and a second approach called "flavoring" that works better with implicit conversions. + #### Tool Comparisons @@ -335,4 +343,16 @@ - **Strict Types :Typescript, Flow, Javascript** https://codeburst.io/strict-types-typescript-flow-javascript-to-be-or-not-to-be-959d2d20c007 - Looks at the rise of static typing in dynamic languages, gives some thoughts on the tradeoffs and benefits of TS and Flow, and tradeoffs for static typing usage as a whole. \ No newline at end of file + Looks at the rise of static typing in dynamic languages, gives some thoughts on the tradeoffs and benefits of TS and Flow, and tradeoffs for static typing usage as a whole. + +- **Inference engines: 5 examples with TypeScript, Flow, and Reason** + https://codeburst.io/inference-engines-5-examples-with-typescript-flow-and-reason-edef2f4cf2d3 + Compares the behavior of three type systems with several specific examples to show how they differ. + +- **Type checking in JavaScript: is it worth it?** + https://ropig.com/blog/type-checking-javascript-worth/ + Some short, high-level thoughts on the pros and cons of using static typing with JS, and tips for leveraging static typing in your project + +- **"Convert React JavaScript Code to TypeScript with Proper Typing"** + https://news.ycombinator.com/item?id=16159389 + A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 53ac394..4520a4c 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -110,6 +110,10 @@ https://blog.box.com/blog/how-we-improved-webpack-build-performance-95/ Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel. +- **Keep Webpack Fast: A Field Guide for Better Build Performance** + https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1 + An excellent article from Slack's frontend team, listing ways to improve Webpack build speed. Gives overviews of profiling, parallelization tools, reducing workloads, and caching, with plenty of mentions for specific tools and techniques. + #### Code Splitting and Chunking diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 113ce29..85bf067 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -16,6 +16,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **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 + +- **"Having a hard time understanding Webpack"** + https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsoq9p3/ + https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsphcmb/ + A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together". - **Egghead.io - Intro to Webpack (Playlist)** https://egghead.io/playlists/intro-to-webpack-4ca2d994 @@ -201,6 +206,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack 3 quickstarter: Configure Webpack from scratch** https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a A walkthrough for Webpack setup that covers basic entry and output definition, webpack-dev-server setup, and adding loaders and plugins. + +- **Setting up Webpack for any project** + https://scotch.io/tutorials/setting-up-webpack-for-any-project + Walks through the setup of a basic Webpack config, and common features such as loaders for Babel and SASS, plugins for extracting CSS, inserting defined constants, and tools for different development environments. #### Configuration Terms and Concepts From 6bc4e2e875d5b04a96403480ef2f1f5392f58e14 Mon Sep 17 00:00:00 2001 From: Valentino Gagliardi Date: Wed, 24 Jan 2018 11:34:23 +0100 Subject: [PATCH 03/59] Link to the original url --- redux-tutorials.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redux-tutorials.md b/redux-tutorials.md index 72da027..fb72d8b 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -33,7 +33,7 @@ A great introduction to Redux's core concepts, with explanations of how to use the React-Redux package to use Redux with React. - **React Redux Tutorial for Beginners: Learning Redux in 2018** - https://dev.to/valentinogagliardi/react-redux-tutorial-for-beginners-learning-redux-in-2018-13hj + https://www.valentinog.com/blog/react-redux-tutorial-beginners/ An excellent tutorial that covers a variety of Redux fundamentals, including a look at the problems Redux helps solve, when you should learn and use Redux, actions and reducers, the Redux store, and how to connect React components to Redux. - **Single State Tree + Flux** From 41b9003914a6c4544604b47a65dab5946c8b2508 Mon Sep 17 00:00:00 2001 From: Eric Hartline Date: Sun, 11 Feb 2018 20:51:14 -0600 Subject: [PATCH 04/59] Fix broken link --- react-tutorials.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-tutorials.md b/react-tutorials.md index cddde62..63295d3 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -385,7 +385,7 @@ An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes. - **Microservices with Docker, Flask, and React** - https://testdriven.io/part-one-intro/ + https://testdriven.io/part-one-intro A large multi-part tutorial covers setting up a dev environment using Docker containers, building a REST API server with the Python Flask framework, building a UI with React, and deploying it all to Amazon EC2. - **Create a Spreadsheet using React** From 02bfb44223e1a0d8c0e31ca69fe184154793684b Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 25 Feb 2018 16:01:57 -0500 Subject: [PATCH 05/59] Updates, 2018-02-25 --- basic-concepts.md | 29 ++++++++++++++++++++++++++++- framework-comparisons.md | 4 ++++ react-architecture.md | 4 ++++ react-component-patterns.md | 8 ++++++++ react-implementation.md | 8 ++------ react-redux-testing.md | 10 ++++++++-- react-styling.md | 4 ++++ redux-reducers-selectors.md | 4 ++++ redux-side-effects.md | 6 +++++- redux-techniques.md | 5 +++++ redux-tutorials.md | 15 ++++++--------- redux-ui-management.md | 4 ++++ redux-without-react.md | 6 +++++- static-typing.md | 10 +++++++++- 14 files changed, 96 insertions(+), 21 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index e8705b2..0a2692e 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -186,4 +186,31 @@ - **Keeping Up With the JavaScript World** https://daveceddia.com/keeping-up-with-javascript/ - Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things. \ No newline at end of file + Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things. + + +#### Learning Project Ideas + +- **5 Projects to Help You Learn React** + https://daveceddia.com/react-practice-projects/ + A list of 5 sample project ideas that aren't todo lists, ranging from basic card components to a Github issues page. + +- **The secret to being a top developer is building things! Here's a list of fun apps to build** + https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c + A list of 8 good-sized project ideas, including a Trello clone, cryptocurrency tracker, and a native messenger clone + +- **10 React Start Project Ideas to Get You Coding** + https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831 + A list of 10 options besides todo lists, including a quiz builder, a music player, and a forum app. + +- **Every time you build a todo list, a puppy dies** + https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d + A list of 28 app ideas that aren't todo lists. Suggests using a Ruby on Rails backend, but the ideas are sufficiently generic. Ideas include a calendar, a book reading club, a Twitter client, and more. + +- **What to do after the React/Redux tutorials** + http://blog.jakoblind.no/react-redux-tutorials/ + Suggests 8 APIs you could use to help build an application after working your way through basic tutorials. + +- **7 GUIs** + http://eugenkiss.github.io/7guis/tasks/ + A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more. \ No newline at end of file diff --git a/framework-comparisons.md b/framework-comparisons.md index 1153abe..00826d1 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -38,6 +38,10 @@ - **The Ultimate Guide to JavaScript Frameworks** https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/ A high-level overview of both major and minor JS frameworks in 2018, Groups them into "the big three", "historically significant", "notable", and "the rest of the pack". Provides short descriptions and links to additional resources for each, as well as pros and cons for the better-known frameworks. + +- **Why I'm switching from Angular to React and Redux** + https://hackernoon.com/why-im-switching-from-angular-to-react-and-redux-in-2018-cb48be00fda7 + One person's opinions on why they decided to work with React and Redux instead of Angular, including flexibility of libraries over the "one way" of a framework, simpler state management with Redux vs services and injected event emitters, and more. #### React and Flux vs Backbone diff --git a/react-architecture.md b/react-architecture.md index 8412b15..26a1e99 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -268,6 +268,10 @@ 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 Confessions** + https://benmccormick.org/2018/02/07/react-confessions/ + A great article by Ben McCormick, looking back at mistakes he's made in structuring React applications, why he made those choices, and what he should have done instead. + #### React Architecture diff --git a/react-component-patterns.md b/react-component-patterns.md index ca05e65..54be341 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -260,6 +260,10 @@ http://reactboston.surge.sh/#/ Slides from Ken Wheeler's ReactBoston talk on React's `context` feature. Covers what context is, why you might want to use it, and when/ how to use it/ +- **React's new Context API** + https://dev.to/kentcdodds/reacts--new-context-api-dpi + Kent C Dodds digs into the new `context` API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using `context`. + #### Component Categories @@ -428,6 +432,10 @@ https://medium.com/netflix-techblog/integrating-imperative-apis-into-a-react-application-1257e1b45ac6 A higher-level discussion of how to design declarative React components that encapsulate imperative APIs. +- **Bringing Together React, D3, and Their Ecosystem** + https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/ + An extensive article that looks at common D3 wrapper patterns and libraries, approaches for using D3 inside of React, and React-specific D3 libraries, and gives some suggestions for how to decide which approach and library to use for your project. + #### Modal Dialogs diff --git a/react-implementation.md b/react-implementation.md index a9a7129..f17c19c 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -185,12 +185,8 @@ Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system. - **Understanding the React Source Code** - https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1 - https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-ii-79e7e8bed56c - https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-iii-69c2711c5f33 - https://hackernoon.com/understanding-the-react-source-code-iv-e3c4b66da12c - https://hackernoon.com/understanding-the-react-source-code-v-812d69a79fb9 - Walks through the critical path of React 15's source code, tracing how a simple component gets rendered. + https://holmeshe.me/categories/Understanding-The-React-Source-Code/ + A multi-part series of posts that walks through the critical path of React 15's source code, tracing how a simple component gets rendered. #### React Fiber diff --git a/react-redux-testing.md b/react-redux-testing.md index b320bd1..c63318c 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -172,6 +172,11 @@ - **Lessons learned testing React & Redux apps with Jest and Enzyme** https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested. + +- **Integration Testing React and Redux with Mocha and Enzyme** + https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/ + Tips on dealing with larger-scale integration tests of React apps under Mocha. Discusses handling async API calls, using `mocha-steps` for multi-step tests, and working with React-Router. + #### Redux @@ -346,12 +351,13 @@ http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html A pair of articles that discuss ways to handle testing the various pieces of connected components. + #### General Testing, Tools, and Setup -- **An Overview of JavaScript Testing in 2017** - https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a +- **An Overview of JavaScript Testing in 2018** + https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3 A detailed guide to the terms, tools, and concepts used in testing Javascript. - **Javascript Testing: Unit vs Functional vs Integration** diff --git a/react-styling.md b/react-styling.md index 97fd3d5..c6a884c 100644 --- a/react-styling.md +++ b/react-styling.md @@ -158,6 +158,10 @@ http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support +- **Substyle: Build Styling Agnostic Components for React** + https://survivejs.com/blog/substyle-interview/ + An interview with the author of Substyle, a utility that allows component library authors to enable customization of components via several different style-related props. + #### Style Libraries diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 5f4cf6f..fc5adf2 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -138,6 +138,10 @@ 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 +- **Selectors in Redux are a MUST** + https://hackernoon.com/selectors-in-redux-are-a-must-d6b0637c79b7 + Examples of how nested Redux state can be difficult to work with, how to separate and structure domain data and UI data, and how and why to write selectors that extract and reshape the data as needed for different parts of the application. + #### Normalization diff --git a/redux-side-effects.md b/redux-side-effects.md index 7ad6e7e..e86e5fc 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -381,4 +381,8 @@ - **Reacting to ProgressEvents with Redux** https://medium.com/@andersonmcook/reacting-to-progressevents-with-redux-355ba021d336 - Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents \ No newline at end of file + Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents + +- **Redux-loop: A better solution for managing asynchronous operations in Redux** + https://lorefnon.tech/2018/02/04/redux-loop-a-better-solution-for-managing-asynchronous-operations-in-redux/ + Gives an overview of how Redux-Loop works for handling side effects, and argues that it provides a better approach than sagas or thunks. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index ded68a1..7979583 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -227,6 +227,11 @@ https://blog.cloudboost.io/the-elegance-of-decorated-redux-b0bd7e2de16a Looks at using `connect` as a decorator, extracting `connect` definitions for reuse with multiple components, and combining multiple connections together to apply to a single component. +- **Redux: Let's Code a Higher-Order "Duck"** + https://medium.com/@yazeedb/redux-lets-code-a-higher-order-duck-a045415bef0f + https://medium.com/@yazeedb/redux-lets-refactor-our-higher-order-duck-e44b0110befc + A neat example of how to write reusable logic in Redux. Walks through writing generic CRUD logic for managing the contents of a list, and shows how to organize it using the "ducks" structure and make it reusable for different types of data. The second article shows how to refactor some of the logic using the `createReducer` approach from the Redux docs. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index 72da027..ff7d30f 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -285,18 +285,9 @@ https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2 A two-part tutorial that builds an image and video display and preview app -- **Practical Redux** - http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/ - http://blog.isquaredsoftware.com/series/practical-redux/ - An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample application, based on the MekHQ application for managing Battletech campaigns. Written by Redux co-maintainer Mark Erikson. - - **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. - **A comprehensive React-Redux tutorial** https://spapas.github.io/2016/03/02/react-redux-tutorial/ @@ -349,6 +340,12 @@ - **CRUD with Redux** https://www.youtube.com/playlist?list=PLuNEz8XtB51KfnHc99GwscPy1UbLJyXHW A video screencast tutorial series that demonstrates how to build a CRUD app with React, Redux, React-Router, and MongoDB. + +- **Developing Games with React, Redux, and SVG** + https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/ + https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/ + https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/ + A 3-part series that shows how to build a Space Invaders-style action game using React for the UI layer, SVG for the display, and Redux for the data flow, as well as socket.io for a real-time leaderboard and Auth0 for authentication. #### Redux Implementation Walkthroughs diff --git a/redux-ui-management.md b/redux-ui-management.md index 95dac1a..c110dd8 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -81,6 +81,10 @@ https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox +- **Modular, fast, small: how we built a server-rendered IDE** + https://repl.it/site/blog/ide + The repl.it team describes how they built a Redux-based plugin architecture that handles window management and layout, with plugins able to interact via Redux actions. + #### Redux and Forms diff --git a/redux-without-react.md b/redux-without-react.md index c1fd49e..7f9c26f 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -173,4 +173,8 @@ https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005 - A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. \ No newline at end of file + A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. + +- **Building an F# Redux Store for C# Xamarin Apps** + https://thomasbandt.com/fsharp-redux-store-for-xamarin-apps + Discusses why Redux's predictability is beneficial for applications in general, desired behavior for a .NET implementation of Redux, why C# is a poor choice for an implementation, and how to implement Redux using F#. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index ec66529..123e3d8 100644 --- a/static-typing.md +++ b/static-typing.md @@ -254,6 +254,10 @@ http://blog.mgechev.com/2018/01/18/react-typescript-redux-immutable/ Examples of statically typing Immutable.js Records, action creators, and class-based actions +- **Improved Redux type safety with TypeScript 2.8** + https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575 + Looks at the new "conditional types" feature in TS2.8, and how that can be used to simplify adding types to Redux logic. + #### Advancing Typing Techniques @@ -355,4 +359,8 @@ - **"Convert React JavaScript Code to TypeScript with Proper Typing"** https://news.ycombinator.com/item?id=16159389 - A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow \ No newline at end of file + A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow + +- **"Why isn't Typescript used more in the React community?"** + https://www.reddit.com/r/reactjs/comments/7yxecm/why_isnt_typescript_used_more_in_the_react/ + An excellent discussion thread on the history and merits of TS and Flow, and their suitability for use with React. In particular, read the comments by Francois Ward of Hubspot (/u/phoenixmatrix), who offers extensive thoughts on why they're switching to TS in the near future. \ No newline at end of file From 4bc13a2c836a6133332e39c117be191bc7a85282 Mon Sep 17 00:00:00 2001 From: resool Date: Tue, 6 Mar 2018 16:52:51 +0100 Subject: [PATCH 06/59] Fix broken links from redux official docs --- README.md | 6 +++--- immutable-data.md | 2 +- redux-reducers-selectors.md | 2 +- redux-tutorials.md | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 61ef95f..6b5c0a5 100644 --- a/README.md +++ b/README.md @@ -207,7 +207,7 @@ If you are new to React, try reading these articles in order. Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts. - [Javascript and Immutability](http://t4d.io/javascript-and-immutability/) A description of how to properly immutably update objects and arrays using functions like assign and slice - - [Redux Docs: Structuring Reducers - Immutable Update Patterns](http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html) + - [Redux Docs: Structuring Reducers - Immutable Update Patterns](https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns) Useful examples for doing proper immutable updates, including common mistakes, proper updates of nested data, updates for arrays, and more. (Helpful for Redux, but not Redux-specific.) ### Functional Programming @@ -234,7 +234,7 @@ If you are new to React, try reading these articles in order. ## Redux ### Getting Started - - [Redux Docs](http://redux.js.org/index.html) + - [Redux Docs](https://redux.js.org/) The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information. - [Getting Started with Redux - Video Series](https://egghead.io/series/getting-started-with-redux) [Getting Started with Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_redux_course_notes) @@ -271,7 +271,7 @@ If you are new to React, try reading these articles in order. Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging. ### Writing Reducers - - [Redux Docs: Structuring Reducers](http://redux.js.org/docs/recipes/StructuringReducers.html) + - [Redux Docs: Structuring Reducers](https://redux.js.org/recipes/structuring-reducers) Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. - [Taking Advantage of `combineReducers`](http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/) Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. diff --git a/immutable-data.md b/immutable-data.md index a31a2ec..56be396 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -48,7 +48,7 @@ An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each. - **Redux Docs: Immutable Update Patterns** - http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html + https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific. - **Immutably setting a value in a JS array (or how an array is also an object)** diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index fc5adf2..42b47e3 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -4,7 +4,7 @@ #### Reducers - **Redux Docs: Structuring Reducers** - http://redux.js.org/docs/recipes/StructuringReducers.html + https://redux.js.org/recipes/structuring-reducers Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. - **"Reducer composition without slicing state"** diff --git a/redux-tutorials.md b/redux-tutorials.md index c8682c6..a00ca61 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -3,7 +3,7 @@ #### Basic Introductions - **Redux Docs** - http://redux.js.org/index.html + https://redux.js.org/ The official Redux documentation. FANTASTIC writing - not just "here's the API", but "here's what you want to do and how we came up with this" - **Getting Started with Redux - Video Series** From 712c80fddd28f4c38fc5a883091cbb6253e1eb27 Mon Sep 17 00:00:00 2001 From: Victor Rosell Date: Fri, 23 Mar 2018 21:01:20 +0100 Subject: [PATCH 07/59] spelling fix --- react-component-patterns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-component-patterns.md b/react-component-patterns.md index 54be341..3b54fe8 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -29,7 +29,7 @@ - **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 placee. + A look at stateless functional components in React, and why they might be useful or should be considered in the first place. - **Building User Interfaces with Pure Functions and Function Composition in React** https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/ From daf8721fa8cf9c30808ecce1d278ca9ee6720b39 Mon Sep 17 00:00:00 2001 From: Eugene Bakin Date: Sun, 25 Mar 2018 12:26:24 +0500 Subject: [PATCH 08/59] Removes dead links Those links are still available on web.archive, but with no pictures. I'm not sure if web.archive version is worth keeping here. --- react-performance.md | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/react-performance.md b/react-performance.md index a4e4656..e1aff1f 100644 --- a/react-performance.md +++ b/react-performance.md @@ -24,11 +24,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) http://kelle.co/react-perf-slides/ A slideshow that walks through the core concepts of managing good React performance. -- **Optimizing React Performance using keys, component lifecycle, and performance tools** - http://jaero.space/blog/react-performance-1 - http://jaero.space/blog/react-performance-2 - Another pretty good in-depth look at performance, with a number of useful illustrations. Only downside is that some of the examples follow bad practice by directly mutating state, but the performance information is solid. - - **shouldComponentUpdate Will Short-Circuit an Entire Subtree of Components in React** http://www.bennadel.com/blog/2904-shouldcomponentupdate-will-short-circuit-an-entire-subtree-of-components-in-reactjs.htm A reminder that SCU skips a component's children as well as that component, with a demo. @@ -390,4 +385,4 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **Redux's Connect function and areStatesEqual Option** https://medium.com/@ryansperzel/reduxs-connect-function-and-arestatesequal-option-adc97e00ee0 - Looks at one of `connect`'s options that can be used to customize comparisons and skip unnecessary `mapState` calls. \ No newline at end of file + Looks at one of `connect`'s options that can be used to customize comparisons and skip unnecessary `mapState` calls. From ab41b221d7edf72b79a014e883572de9fcb4f347 Mon Sep 17 00:00:00 2001 From: Eugene Bakin Date: Mon, 26 Mar 2018 15:10:34 +0500 Subject: [PATCH 09/59] Removes duplicate link React is slow, React is fast occurs 2 times in this list --- react-performance.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/react-performance.md b/react-performance.md index e1aff1f..78bda56 100644 --- a/react-performance.md +++ b/react-performance.md @@ -116,10 +116,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://hackernoon.com/react-at-60fps-4e36b8189a4c A look at several useful techniques for benchmarking and improving React application performance -- **React is Slow, React is Fast: Optimizing React Apps in Practice** - https://medium.com/@francoisz/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba - Some excellent advice on improving React performance. Covers using React's new Component Profiling capabilities, ways to optimize re-renders, use of Recompose and Reselect, gotchas with JSX and object literals, and more. - - **Optimizing the Performance of Your React Application** https://auth0.com/blog/optimizing-react/ Covers several ways to improve perf, including profiling with the React Perf Addons, using correct keys for lists, and use of `shouldComponentUpdate` and `PureComponent`. From bf4ec2a4e569999516df08ed6f9fa01e29523e61 Mon Sep 17 00:00:00 2001 From: Eugene Bakin Date: Mon, 26 Mar 2018 15:24:12 +0500 Subject: [PATCH 10/59] Removes dead link to blog.vexlet.com https://blog.vixlet.com/react-at-light-speed-78cd172a6411 Nothing on web.archive --- react-performance.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/react-performance.md b/react-performance.md index e1aff1f..c9a0e4f 100644 --- a/react-performance.md +++ b/react-performance.md @@ -152,11 +152,7 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) - **Infinite List and React** http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html - A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component - -- **React at Light Speed** - https://blog.vixlet.com/react-at-light-speed-78cd172a6411 - The Vixlet team discusses perf optimizations they've applied to their app. Includes a lot of the common advice like use of `shouldComponentUpdate`, but also has advice on use of literal values and issues with performance traps with JS timer functions. + A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component - **React Performance Anti-Pattern: Creating Functions in `render()`** https://medium.com/@erikras/react-performance-anti-pattern-creating-functions-in-render-ddeb5ebd2933 From d0f7af92b2bdf05f772e4bd690dcb46a43f7627c Mon Sep 17 00:00:00 2001 From: tinkerX3 Date: Sat, 19 May 2018 10:10:17 +0200 Subject: [PATCH 11/59] Remove broken link --- react-routing.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/react-routing.md b/react-routing.md index 6270379..2ce8248 100644 --- a/react-routing.md +++ b/react-routing.md @@ -165,10 +165,6 @@ https://medium.com/@nesbtesh/dealing-with-authentication-in-react-cadb679fbc0f Some short examples of saving an authentication token, writing queries to use and update that token, and checking the token when rendering components. -- **Role based routing with React and Redux** - http://crazysigma.com/blogs/2017/04/16/role-based-routing-react-redux/ - A description of a fairly simple approach for defining role-based handling of routes, with sample code. - - **Preact Authentication Tutorial** https://auth0.com/blog/preact-authentication-tutorial/ A tutorial that demonstrates how to build an app with Preact, including authentication, and makes some comparisons to doing so in React. @@ -184,4 +180,4 @@ - **Securing a React Web App with Authorization Rules** https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca - A tutorial that shows how to add authorization and authentication to a Todo app \ No newline at end of file + A tutorial that shows how to add authorization and authentication to a Todo app From d84560f453abfcf8e4a24bb0d1e237b26e87348e Mon Sep 17 00:00:00 2001 From: Thibault Miranda de Oliveira Date: Sat, 26 May 2018 21:13:59 +0100 Subject: [PATCH 12/59] Remove duplicate entry in react-forms --- react-forms.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/react-forms.md b/react-forms.md index 1aa79e3..8e06703 100644 --- a/react-forms.md +++ b/react-forms.md @@ -97,10 +97,6 @@ https://blog.risingstack.com/handling-react-forms-with-mobx-observables/ Some examples of working with forms in React, using MobX for the data management. -- **Forms in React and Redux** - http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ - A good example of how to set up form handling in conjunction with a Redux store. - - **Radio Buttons and Checkboxes in React** http://react.tips/radio-buttons-in-reactjs/ http://react.tips/checkboxes-in-react/ From c216a35d8bc31064014125b738d92fdba9326def Mon Sep 17 00:00:00 2001 From: Thibault Miranda de Oliveira Date: Sat, 26 May 2018 21:15:06 +0100 Subject: [PATCH 13/59] Change 'react-forms/Forms in React and Redux' link --- react-forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-forms.md b/react-forms.md index 8e06703..e4be11e 100644 --- a/react-forms.md +++ b/react-forms.md @@ -82,7 +82,7 @@ Covers the basics of implementing form rendering, updates, and validation, in plain JS - **Forms in React and Redux** - http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ + https://x-team.com/blog/tutorial-forms-in-react-and-redux/ Demonstrates building a simple set of wrapper components to manage forms using React and Redux - **Not-so-simple Forms with React** From 9bb572c4aec2b759545a9a99a18314a88f48efa3 Mon Sep 17 00:00:00 2001 From: mijankarim Date: Wed, 11 Jul 2018 17:33:00 +0600 Subject: [PATCH 14/59] Link fixed http://rainsoft.io to https://dmitripavlutin.com --- javascript-resources.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/javascript-resources.md b/javascript-resources.md index 65513f0..9d9808d 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -133,7 +133,7 @@ While this list is primarily focused on learning React and Redux, and generally MDN's usual excellent documentation, explaining how `this` works in Javascript - **Gentle Explanation of `this` keyword in Javascript** - http://rainsoft.io/gentle-explanation-of-this-in-javascript/ + https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/ https://www.reddit.com/r/javascript/comments/4o1546/gentle_explanation_of_this_keyword_in_javascript/ Another long and in-depth explanation, plus some good discussion in the Reddit comments. @@ -151,7 +151,7 @@ While this list is primarily focused on learning React and Redux, and generally An excellent explanation of how function calls and the `this` keyword work - **When 'not' to use arrow functions** - http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ + https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/ An in-depth look at when you should stick with standard JS functions instead of arrow functions - **Do ES6 Arrow Functions Really Solve "this" in Javascript?** @@ -193,4 +193,4 @@ While this list is primarily focused on learning React and Redux, and generally https://www.udemy.com/understand-javascript/?couponCode=YOUTUBE19 https://www.youtube.com/watch?v=Bv_5Zv5c-Ts http://joanmira.com/javascript-understanding-the-weird-parts/ - A widely recommended course on Javascript by Tony Alicea. The first 3.5-hour video is free on Youtube, with a discount link for the course. The last link is notes from the course. \ No newline at end of file + A widely recommended course on Javascript by Tony Alicea. The first 3.5-hour video is free on Youtube, with a discount link for the course. The last link is notes from the course. From 622efe96acd7a14bb56fc6b4fda06593ae66a286 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Tue, 31 Jul 2018 14:17:39 -0400 Subject: [PATCH 15/59] Update "Why use Webpack?" link --- webpack-tutorials.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 85bf067..10613be 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -17,10 +17,9 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://www.youtube.com/watch?v=WQue1AN93YU A screencast video explaining what Webpack is and why you would want to use it -- **"Having a hard time understanding Webpack"** - https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsoq9p3/ - https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsphcmb/ - A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together". +- **Why Would I Use a Webpack?** + http://tinselcity.net/whys/packers + A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together". (Originally written as a Reddit comment that was removed - [see the resulting comments](https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsoq9p3/).) - **Egghead.io - Intro to Webpack (Playlist)** https://egghead.io/playlists/intro-to-webpack-4ca2d994 @@ -170,7 +169,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack - From Apprentice to Journeyman** http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/ - A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack. + A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack. - **Webpack - From Journeyman to Master** https://presentations.survivejs.com/webpack-from-journeyman-to-master/#/ @@ -303,8 +302,8 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **webpack-blocks** https://github.com/andywer/webpack-blocks - Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement), … + Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement), Â… - **webpack-flow** https://github.com/webpack-flow/webpack-flow - A set of utilities to manage sharable webpack configs and make them reusable. \ No newline at end of file + A set of utilities to manage sharable webpack configs and make them reusable. From 3bcc98b564431b22094161d80e17166f38bd634f Mon Sep 17 00:00:00 2001 From: Joe Cortopassi Date: Sun, 16 Sep 2018 18:50:52 -0500 Subject: [PATCH 16/59] Added link for "Component Communication" section --- react-component-patterns.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/react-component-patterns.md b/react-component-patterns.md index 3b54fe8..3d99d3e 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -264,6 +264,11 @@ https://dev.to/kentcdodds/reacts--new-context-api-dpi Kent C Dodds digs into the new `context` API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using `context`. +- **Understanding the React Context API** + http://joecortopassi.com/articles/react-context-api/ + Simple breakdown of how to use the React Context API, with code samples and diagrams. + + #### Component Categories From d605753ca242058b0f42b051f24c2ea832c87ce8 Mon Sep 17 00:00:00 2001 From: Joe Cortopassi Date: Sun, 16 Sep 2018 18:53:07 -0500 Subject: [PATCH 17/59] Update react-component-patterns.md --- react-component-patterns.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-component-patterns.md b/react-component-patterns.md index 3d99d3e..f460a70 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -265,8 +265,8 @@ Kent C Dodds digs into the new `context` API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using `context`. - **Understanding the React Context API** - http://joecortopassi.com/articles/react-context-api/ - Simple breakdown of how to use the React Context API, with code samples and diagrams. + http://joecortopassi.com/articles/react-context-api/ + Simple breakdown of how to use the React Context API, with code samples and diagrams. From fc208b90dd24f1e86d5ab0942efe2dfea2b7c5e3 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 12 Nov 2018 00:06:40 -0500 Subject: [PATCH 18/59] Updates, 2018-11-12 --- mobx-tutorials.md | 4 ++++ react-architecture.md | 4 ++++ react-component-composition.md | 8 ++++++++ react-component-patterns.md | 25 +++++++++++++++++++++++-- react-deployment.md | 4 ++++ react-forms.md | 6 +++++- react-redux-testing.md | 14 ++++++++++++++ react-routing.md | 6 +++++- react-tutorials.md | 11 ++++++++--- redux-middleware.md | 6 +++++- redux-reducers-selectors.md | 8 ++++++++ redux-techniques.md | 18 +++++++++++++++++- static-typing.md | 8 ++++++++ webpack-tutorials.md | 9 ++++++--- 14 files changed, 119 insertions(+), 12 deletions(-) diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 48458a5..32e5c08 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -86,6 +86,10 @@ https://www.robinwieruch.de/create-react-app-mobx-decorators/ Covers how to use MobX in a CRA project, with and without decorators. +- **React Performance and MobX** + https://medium.com/workday-engineering/react-performance-and-mobx-b038085ecb72 + An informative look at how React's rendering process normally occurs, and how use of MobX-React affects React performance. + #### MobX and Redux Comparisons diff --git a/react-architecture.md b/react-architecture.md index 26a1e99..094d1f5 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -118,6 +118,10 @@ - **Making website building fun** https://www.gatsbyjs.org/blog/2017-10-16-making-website-building-fun/ The author of the Gatsby static site generator discusses how creating the right building blocks can make development simpler and more fun, and gives examples of how specific React components can be those kinds of building blocks. + +- **React, Redux, and JavaScript Architecture** + https://jrsinclair.com/articles/2018/react-redux-javascript-architecture/ + An excellent article that walks you through a progression of refactors for implementing a slide toggle component from jQuery to React + Redux, and explains along the way why you would want to use them and how to "think in React and Redux" in the process. #### React Best Practices diff --git a/react-component-composition.md b/react-component-composition.md index 11f9533..069b47b 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -111,6 +111,10 @@ http://arianv.com/post/use-default-hocs-for-component-logic/ Demonstrates how default behavior and logic can be put into a HOC to simplify code and enable reuse. +- **Higher-Order Components: The Ultimate Guide** + https://medium.freecodecamp.org/higher-order-components-the-ultimate-guide-b453a68bb851 + An extensive look at how HOCs can be used to create composable single-purpose components that encapsulate logic like filtering and sorting. + @@ -153,6 +157,10 @@ 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. +- **Achieving modifiability with your React Components** + https://medium.com/@josclovisramrezdelarosa/achieving-modifiability-with-your-react-components-2d99373fae74 + Looks at a use case for a customizable reporting component, and how render props can be used to enable disabling or overriding parts of the standard report UI. + diff --git a/react-component-patterns.md b/react-component-patterns.md index 54be341..4f4fb86 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -152,13 +152,22 @@ http://www.albertgao.xyz/2017/10/28/how-to-auto-bind-props-by-using-react-element/ Examples of using the `React.Children` API to add additional props to child components +- **React sub-components** + https://itnext.io/react-sub-components-513f6679abed + Demonstrates defining "sub-components" like `Article.Title`, and using `React.Children` to ensure they're composed correctly. + #### React Component Lifecycle - **React Docs: Component Specs and Lifecycle** - https://facebook.github.io/react/docs/component-specs.html + https://reactjs.org/docs/react-component.html The official React docs page on component lifecycle +- **React 16.3+ Interactive Lifecycle Methods Diagram** + http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ + https://twitter.com/dan_abramov/status/981712092611989509 + An excellent interactive diagram that shows the sequence of lifecycle methods in React 16.3+, and how they relate to React's "render" and "commit" update phases. Based on a diagram by Dan Abramov. + - **Understanding the React Component Lifecycle** http://busypeoples.github.io/post/react-component-lifecycle/ A good look at which lifecycle methods run in which situations, as well as the signatures of each method. @@ -262,7 +271,19 @@ - **React's new Context API** https://dev.to/kentcdodds/reacts--new-context-api-dpi - Kent C Dodds digs into the new `context` API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using `context`. + Kent C Dodds digs into the new context API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using context. + +- **Bitmasks and the new React Context API** + https://hph.is/coding/bitmasks-react-context + An explanation of how the new version of context works, and how change updates can be optimized using a bitmasking approach. + +- **Exploring the React Context API with Provider and Consumer** + https://www.robinwieruch.de/react-context-api/ + Explains the use cases for the new context API, and demonstrates how to use it both by itself and wrapped in a higher-order component. + +- **React's new Context API and Actions** + https://dev.to/washingtonsteven/reacts-new-context-api-and-actions-446o + Shows how to update values being passed through context, and particularly how to pass down functions that can be used to update the values. #### Component Categories diff --git a/react-deployment.md b/react-deployment.md index 86ed9c7..11cbc15 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -51,6 +51,10 @@ https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/ A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app. +- **So you want to host your Single Page React App on Github Pages?** + https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48 + Solutions for common problems encountered when trying to deploy a React app on Github Pages, especially around routing. + #### Libraries diff --git a/react-forms.md b/react-forms.md index 1aa79e3..55fa138 100644 --- a/react-forms.md +++ b/react-forms.md @@ -8,7 +8,7 @@ - [Redux Techniques: Redux and Forms](redux-techniques.md#redux-and-forms) -#### "Controlled" and "Uncontrolled Inputs +#### "Controlled" and "Uncontrolled" Inputs - **React Docs: Forms** https://facebook.github.io/react/docs/forms.html @@ -142,6 +142,10 @@ https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app. +- **An imperative guide to forms in React** + https://blog.logrocket.com/an-imperative-guide-to-forms-in-react-927d9670170a + A useful overview of how to work with forms. Includes several runnable examples, and also looks at how the Formik library can simplify form handling. + #### Form Validation diff --git a/react-redux-testing.md b/react-redux-testing.md index c63318c..470cf98 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -177,6 +177,18 @@ https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/ Tips on dealing with larger-scale integration tests of React apps under Mocha. Discusses handling async API calls, using `mocha-steps` for multi-step tests, and working with React-Router. +- **How to write clean React unit tests with Enzyme** + http://www.bradleycbuchanan.com/b/clean-react-enzyme/ + Several tips for writing simpler React component tests with Enzyme, including focusing on the logic, testing as shallow as possible, and writing assertions using JSX. + +- **Acceptance Test Driven Development with React/Redux** + https://itnext.io/acceptance-test-driven-test-with-react-redux-part-1-7ae8cb4fab00 + A multi-part tutorial series that walks through creating and refactoring a React/Redux application using an Acceptance Test Driven Development approach. + +- **React Testing Tutorial: Test Frameworks & Component Tests** + https://www.robinwieruch.de/react-component-tests-tutorial/ + An excellent in-depth guide that walks through writing unit, integration, and end-to-end tests using common React test frameworks and tools like Mocha, Enzyme, Sinon, Jest, Coveralls, and Cypress.io. + #### Redux @@ -351,6 +363,8 @@ http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html A pair of articles that discuss ways to handle testing the various pieces of connected components. + + #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index 6270379..8cee6d2 100644 --- a/react-routing.md +++ b/react-routing.md @@ -184,4 +184,8 @@ - **Securing a React Web App with Authorization Rules** https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca - A tutorial that shows how to add authorization and authentication to a Todo app \ No newline at end of file + A tutorial that shows how to add authorization and authentication to a Todo app + +- **Composing authorizing into React apps** + https://medium.com/@sarat1669/composing-authorization-into-react-apps-180fa3c18d1 + Examples of generic auth management at the component level, using a package called react-identity. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 63295d3..1df4ac6 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -16,6 +16,10 @@ https://egghead.io/courses/the-beginner-s-guide-to-reactjs A free video course with short lessons that explain key React concepts, including using `React.createElement` and JSX, conditional rendering, forms, styling, lists, HTTP requests, and deploying a React app. +- **A Comprehensive Guide to Building Apps with React** + https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/ + An excellent introduction to the core concepts, terms, syntax, and usage of React. Includes several interactive examples, and has been updated to cover React 16.3. + - **30 Days of React** https://www.fullstackreact.com/30-days-of-react/ A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment. @@ -199,13 +203,14 @@ https://academind.com/learn/react/react-q-a/ An article and accompanying video that explain answers to common questions about React, including whether a complex project setup is necessary, different ways to define components, ways to style React apps, immutability, using React with various backends, and more. +- **React Cheatsheet** + https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/react.js + A useful single-file summary of React's APIs and concepts #### Project-Based Tutorials -- **A Comprehensive Guide to Building Apps with React** - http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/ - Walks through the major concepts and API functions in React + - **Hacking with React** http://www.hackingwithreact.com/ diff --git a/redux-middleware.md b/redux-middleware.md index 7011a3f..8c3fb44 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -108,4 +108,8 @@ - **How to use Redux middleware to decouple AJAX call?** http://www.albertgao.xyz/2017/12/07/how-to-use-redux-middleware-to-decouple-ajax-call/ - Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request \ No newline at end of file + Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request + +- **Custom Form Validation in React with Redux Middleware** + http://tech.tunecore.com/redux-form-validation-middleware + A detailed example of how middleware can be used to implement some complex form validation logic in a centralized way. \ No newline at end of file diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index fc5adf2..89cad75 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -142,6 +142,14 @@ https://hackernoon.com/selectors-in-redux-are-a-must-d6b0637c79b7 Examples of how nested Redux state can be difficult to work with, how to separate and structure domain data and UI data, and how and why to write selectors that extract and reshape the data as needed for different parts of the application. +- **Be Selective With Your State** + https://medium.com/riipen-engineering/be-selective-with-your-state-8f1be76cb9f4 + A helpful overview of when and why to use selectors and Reselect with Redux, some issues with using selectors in multiple components, and using `re-reselect` to create "cached" selectors. + +- **Scaling data selection on the client** + https://medium.com/@skovy/scaling-data-selection-on-the-client-5e4411de6984 + Describes several reasons to use selector functions, and gives examples of writing selectors to handle normalized state. + #### Normalization diff --git a/redux-techniques.md b/redux-techniques.md index 7979583..1c6269b 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -153,6 +153,10 @@ - **Redux Dead Drop** https://medium.com/@erikras/redux-dead-drop-1b9573705bec Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node + +- **The Definitive Guide to Redux-Persist v5** + https://blog.reactnativecoach.com/the-definitive-guide-to-redux-persist-84738167975 + An informative guide that covers setting up Redux-Persist, customizing what's persisted, and merging persisted data into the store. @@ -232,6 +236,14 @@ https://medium.com/@yazeedb/redux-lets-refactor-our-higher-order-duck-e44b0110befc A neat example of how to write reusable logic in Redux. Walks through writing generic CRUD logic for managing the contents of a list, and shows how to organize it using the "ducks" structure and make it reusable for different types of data. The second article shows how to refactor some of the logic using the `createReducer` approach from the Redux docs. +- **DRY Redux at Scale: The Basics** + https://medium.com/@gaforres/dry-redux-at-scale-the-basics-d1dac63f5a53 + Walks through a series of approaches for reducing boilerplate and abstracting generation of action creators and reducers, and discusses the pros and cons of adding additional abstraction layers. + +- **Reducing boilerplate in Redux Apps with Arc** + https://hackernoon.com/reducing-boilerplate-in-redux-apps-with-arc-d9550434470e + The author of the redux-arc library describes how it can help simplify your Redux code by generating action creators and reducers for CRUD logic. + #### Network Management @@ -272,4 +284,8 @@ - **Remote Reducers and Predictive Reduction** https://medium.com/@seveibar/remote-reducers-and-predictive-reduction-572ab5054211 - Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order. \ No newline at end of file + Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order. + +- **React/Redux Tips: Better Way to Handle Loading Flags in Your Reducers** + https://medium.com/stashaway-engineering/react-redux-tips-better-way-to-handle-loading-flags-in-your-reducers-afda42a804c6 + A quick suggestion to store loading state in its own slice reducer, rather than spread across the app state. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 123e3d8..9aac13a 100644 --- a/static-typing.md +++ b/static-typing.md @@ -258,6 +258,14 @@ https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575 Looks at the new "conditional types" feature in TS2.8, and how that can be used to simplify adding types to Redux logic. +- **The Redux Type Flow** + https://medium.com/@zhirzh/the-redux-type-flow-93aada6964e5 + Looks at some advanced approaches for automatically extracting types for Redux actions with Flow and applying them to reducers. + +- **Ultimate React Component Patterns with Typescript** + https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935 + An extensive set of examples for using TypeScript with common React component patterns, including functional / class components, default props, render callbacks, and much more. + #### Advancing Typing Techniques diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 85bf067..705b2d3 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -17,9 +17,8 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://www.youtube.com/watch?v=WQue1AN93YU A screencast video explaining what Webpack is and why you would want to use it -- **"Having a hard time understanding Webpack"** - https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsoq9p3/ - https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsphcmb/ +- **"Why use packers/bundlers?"** + http://tinselcity.net/whys/packers A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together". - **Egghead.io - Intro to Webpack (Playlist)** @@ -278,6 +277,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://engineering.tripping.com/lets-talk-about-our-webpack-config-files-89a6ac0e0cf9 The Tripping.com team shows off the contents of their Webpack production config file, explains the capabilities they want to have, and how each piece of the config file implements those capabilities. +- **Upgrade to Webpack 4** + https://dev.to/flexdinesh/upgrade-to-webpack-4---5bc5 + Some quick tips for upgrading a Webpack config from v3 to v4 + #### Webpack Configuration Utilities From 256071e402d8cccd53d16bdd53813801b2e670bc Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 12 Nov 2018 00:06:50 -0500 Subject: [PATCH 19/59] Add React hooks page --- react-hooks.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 react-hooks.md diff --git a/react-hooks.md b/react-hooks.md new file mode 100644 index 0000000..88acb4a --- /dev/null +++ b/react-hooks.md @@ -0,0 +1,49 @@ +### React Hooks + +> **Note**: Hooks are still an **experimental proposal, available in an alpha release**. The API will likely change. Keep that in mind as you try them out. + + +#### Official Resources + +- **React Docs: Hooks (Proposal)** + https://reactjs.org/docs/hooks-intro.html + The main resource for learning hooks. Includes an intro with motivation, tutorials on `useState` and `useEffect`, discussion of custom hooks, the full hooks API reference, and an in-depth FAQ. **Read the hooks docs first before looking at anything else!** + +- **ReactConf 2018: React Today and Tomorrow** + https://www.youtube.com/watch?v=dpw9EHDh2bM + Sophie Alpert and Dan Abramov's talk unveiling hooks, live at ReactConf 2018. + +- **Making Sense of React Hooks** + https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib + Dan Abramov provides a lot of additional context around the hooks proposal, including potential benefits like co-locating related logic, examples of how to use hooks, whether they are "magic", and more. **Also a must-read.** + + +#### Hooks Tutorials + +- **A Simple Intro to React Hooks** + https://daveceddia.com/intro-to-hooks/ + Dave Ceddia continues his excellent easy-to-read React tutorials with a friendly intro to the basics of the `useState` hook. Also see [the other articles in his hooks intro series](https://daveceddia.com/archives/) as well. + +- **What are React Hooks?** + https://www.robinwieruch.de/react-hooks/ + An excellent article by Robin Wieruch. Includes examples of problems that hooks can help solve, discussion of how the changes affect React overall, and multiple examples for the `useState` and `useEffect` hooks. + +- **Everything you need to know about React Hooks** + https://dev.to/vcarl/everything-you-need-to-know-about-react-hooks-doh + A thorough post from Carl Vitullo that digs into the potential use cases of all of the built-in hooks. Definitely worth reading once you've gotten your head around the basic ideas. + + + +#### Understanding Hooks Internals + +- **React Hooks Demystified** + https://dev.to/kayis/react-hooks-demystified-2af6 + Implements a tiny fake version of React, then illustrates how hooks are "just" implemented with some global variables, like an array to track which hooks were used in the current function component. + +- **React hooks: not magic, just arrays** + https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e + Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented. + +- **React RFC #68: React Hooks** + https://github.com/reactjs/rfcs/pull/68 + The official RFC announcing hooks. There's hundreds of comments from the community debating various pros and cons of the API design. Probably not worth reading the entire thread, but some interesting thoughts in there. \ No newline at end of file From c08cbcadda2d405e4db3f00a270918005fe81a53 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 12 Nov 2018 00:25:48 -0500 Subject: [PATCH 20/59] Updates, 2018-11-12 --- react-hooks.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/react-hooks.md b/react-hooks.md index 88acb4a..9dd65e9 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -32,6 +32,9 @@ https://dev.to/vcarl/everything-you-need-to-know-about-react-hooks-doh A thorough post from Carl Vitullo that digs into the potential use cases of all of the built-in hooks. Definitely worth reading once you've gotten your head around the basic ideas. +- **An Introduction to Hooks in React** + https://www.fullstackreact.com/articles/an-introduction-to-hooks-in-react/#community-reaction-to-hooks + An extensive article with numerous examples of `useState`, `useEffect`, and `useContext`. Also covers `useRef`, custom hooks, writing tests for hooks, and some community reactions. #### Understanding Hooks Internals From 069f3fbe18ab89273d5b9a362610515a7c2c6091 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 2 Dec 2018 15:34:25 -0500 Subject: [PATCH 21/59] Add links to React-Redux docs. --- redux-tutorials.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/redux-tutorials.md b/redux-tutorials.md index a00ca61..c38e53e 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -5,6 +5,10 @@ - **Redux Docs** https://redux.js.org/ The official Redux documentation. FANTASTIC writing - not just "here's the API", but "here's what you want to do and how we came up with this" + +- **React-Redux Docs** + https://react-redux.js.org + The official React-Redux documentation. Explains how to correctly use the React-Redux API, including details on writing `mapState` functions and dispatching actions. - **Getting Started with Redux - Video Series** https://egghead.io/series/getting-started-with-redux From d82682883d4984f4f4e6d8966d04c6f450e5345f Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 2 Dec 2018 15:34:38 -0500 Subject: [PATCH 22/59] Fix formatting --- redux-tutorials.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redux-tutorials.md b/redux-tutorials.md index c38e53e..d562a1a 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -6,8 +6,8 @@ https://redux.js.org/ The official Redux documentation. FANTASTIC writing - not just "here's the API", but "here's what you want to do and how we came up with this" -- **React-Redux Docs** - https://react-redux.js.org +- **React-Redux Docs** + https://react-redux.js.org The official React-Redux documentation. Explains how to correctly use the React-Redux API, including details on writing `mapState` functions and dispatching actions. - **Getting Started with Redux - Video Series** From 74b12d25c170470ec906f123ec751f41d520b224 Mon Sep 17 00:00:00 2001 From: Christopher Duncan Date: Fri, 7 Dec 2018 07:40:17 -0500 Subject: [PATCH 23/59] Repair dead link to blog.reactandbethankful.com --- react-architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-architecture.md b/react-architecture.md index 094d1f5..c7cf3fe 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -40,7 +40,7 @@ Examples of how to think about and model data and UI state - **Understanding the Functional Revolution in Front-End Applications** - http://blog.reactandbethankful.com/posts/2015/09/15/understanding-the-functional-revolution/ + https://web.archive.org/web/20171020192305/http://blog.reactandbethankful.com/posts/2015/09/15/understanding-the-functional-revolution/ Higher-level tutorial describing functional programming and how it relates to Javascript, UI, and client-side applications - **Functional UI and Components as Higher Order Functions** From f7870e41c0037de3b80ffd3472cea373eb1815e5 Mon Sep 17 00:00:00 2001 From: Kulshekhar Kabra Date: Mon, 24 Dec 2018 23:10:04 +0530 Subject: [PATCH 24/59] Fix dead link --- redux-reducers-selectors.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 3e9cb2d..0c56255 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -4,7 +4,7 @@ #### Reducers - **Redux Docs: Structuring Reducers** - https://redux.js.org/recipes/structuring-reducers + https://redux.js.org/recipes/structuring-reducers/structuring-reducers Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. - **"Reducer composition without slicing state"** @@ -242,4 +242,4 @@ - **Normalizing Data into Relational Redux State with Normalizr** https://medium.com/@onoufriosm/organising-redux-state-4b4c2b99eece - Tips on using Normalizr to normalize data, including defining schemas and overriding Normalizr's default processing and merging strategies. \ No newline at end of file + Tips on using Normalizr to normalize data, including defining schemas and overriding Normalizr's default processing and merging strategies. From baba802b0ee81216216d9267832b0b02b370d667 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Fri, 18 Jan 2019 11:52:25 -0500 Subject: [PATCH 25/59] Update redux-architecture.md --- redux-architecture.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/redux-architecture.md b/redux-architecture.md index 0eb94ea..661971e 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -384,7 +384,8 @@ http://randycoulman.com/blog/2016/09/20/redux-reducer-selector-asymmetry/ http://randycoulman.com/blog/2016/09/27/modular-reducers-and-selectors/ http://randycoulman.com/blog/2016/11/29/globalizing-redux-selectors - A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches + http://randycoulman.com/blog/2018/06/12/solving-circular-dependencies-in-modular-redux/ + A blog series discussing approaches to encapsulating Redux data using selectors and other related approaches. The last post is a follow-up to the earlier posts in the series, looking at a different approach that he feels works out better. - **Redux State Keys - A predictable yet dynamic substate** http://www.robinwieruch.de/redux-state-keys/ @@ -559,4 +560,4 @@ - **Redux for Chrome Extensions** https://robots.thoughtbot.com/redux-for-chrome-extensions - A detailed look at how Redux can fit into the Chrome extension architecture \ No newline at end of file + A detailed look at how Redux can fit into the Chrome extension architecture From 4780aefc77a6d5454b716c958c6c2e10c18e4b3f Mon Sep 17 00:00:00 2001 From: kuponik <45619686+kuponik@users.noreply.github.com> Date: Wed, 30 Jan 2019 09:28:19 +0100 Subject: [PATCH 26/59] Fix url of "Toast notification system in a React/Redux application" article --- redux-ui-management.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redux-ui-management.md b/redux-ui-management.md index c110dd8..ae61ae7 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -61,7 +61,7 @@ A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation. - **Toast notification system in a React/Redux application** - https://atech.blog/natterly/toast-notification-system-in-a-react-redux-application + https://www.deployhq.com/blog/toast-notification-system-in-a-react-redux-application The Natterly team walks through how they built a Redux-connected toast notification implementation. - **A Functional Canvas Approach with Redux** @@ -135,4 +135,4 @@ - **Redux Form Validation Tutorial Example From Scratch** https://appdividend.com/2017/11/05/redux-form-validation-tutorial-example/ - A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form. \ No newline at end of file + A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form. From 79a8505d14289215e86d257e76f64650d7b24eab Mon Sep 17 00:00:00 2001 From: vu nguyen Date: Fri, 1 Feb 2019 10:44:05 -0800 Subject: [PATCH 27/59] Replace broken link for structuring reducers --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b5c0a5..b750f1b 100644 --- a/README.md +++ b/README.md @@ -271,7 +271,7 @@ If you are new to React, try reading these articles in order. Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging. ### Writing Reducers - - [Redux Docs: Structuring Reducers](https://redux.js.org/recipes/structuring-reducers) + - [Redux Docs: Structuring Reducers](https://redux.js.org/recipes/structuring-reducers/structuring-reducers) Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. - [Taking Advantage of `combineReducers`](http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/) Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. From 608ec50642bd97e39a78e61900c81aa714fa1313 Mon Sep 17 00:00:00 2001 From: Joe Graham Date: Sun, 10 Feb 2019 12:34:12 -0500 Subject: [PATCH 28/59] Add Dan Abramov's React as a UI Runtime article Deep dive into the React programming model from first principles from React's lead developer (aka *Gold*) --- react-implementation.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/react-implementation.md b/react-implementation.md index f17c19c..846b47a 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -92,6 +92,9 @@ #### Implementation and Internals +- **React as a UI Runtime by Dan Abramov** + https://overreacted.io/react-as-a-ui-runtime + A deep dive into the React programming model from first principles - **React.js Reconciliation** https://www.infoq.com/presentations/react-reconciliation @@ -245,4 +248,4 @@ - **What is React Fiber?** https://giamir.com/what-is-react-fiber - An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible. \ No newline at end of file + An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible. From c1c637ccce8af72206675ff5acae0d8cef6945bb Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 10 Feb 2019 11:32:47 -0800 Subject: [PATCH 29/59] Update react-implementation.md --- react-implementation.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/react-implementation.md b/react-implementation.md index 846b47a..e1a619f 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -92,8 +92,9 @@ #### Implementation and Internals -- **React as a UI Runtime by Dan Abramov** - https://overreacted.io/react-as-a-ui-runtime + +- **React as a UI Runtime by Dan Abramov** + https://overreacted.io/react-as-a-ui-runtime A deep dive into the React programming model from first principles - **React.js Reconciliation** From 39894b241877fb072450ca17279e40b5264a60b1 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Tue, 26 Feb 2019 17:36:24 -0500 Subject: [PATCH 30/59] Update react-hooks.md --- react-hooks.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/react-hooks.md b/react-hooks.md index 9dd65e9..69a2b2d 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -47,6 +47,10 @@ https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented. +- **Under the Hood of React's hooks system** + https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba + A well-written explanation of how hooks work internally, with some useful diagrams and snippets of the relevant React implementation code. + - **React RFC #68: React Hooks** https://github.com/reactjs/rfcs/pull/68 - The official RFC announcing hooks. There's hundreds of comments from the community debating various pros and cons of the API design. Probably not worth reading the entire thread, but some interesting thoughts in there. \ No newline at end of file + The official RFC announcing hooks. There's hundreds of comments from the community debating various pros and cons of the API design. Probably not worth reading the entire thread, but some interesting thoughts in there. From a31a04c7fb5c6e38f9529541c8ad8e8f10fe151d Mon Sep 17 00:00:00 2001 From: Jakob Lind Date: Thu, 2 May 2019 10:11:02 +0200 Subject: [PATCH 31/59] added link to webpack configuration utility --- webpack-tutorials.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 842168f..31f6c9b 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -311,3 +311,8 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **webpack-flow** https://github.com/webpack-flow/webpack-flow A set of utilities to manage sharable webpack configs and make them reusable. + +- **createapp.dev** + https://createapp.dev/webpack + Online tool for creating your own webpack config by selecting the features you need. It's a visual way of learning webpack, and you can download your project as a zip file when you're done! + From cdbe453f4bdf10922a39cdecc22140b5a60972c2 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Wed, 8 May 2019 13:32:55 -0700 Subject: [PATCH 32/59] Update react-hooks.md --- react-hooks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-hooks.md b/react-hooks.md index 69a2b2d..4dd0901 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -5,7 +5,7 @@ #### Official Resources -- **React Docs: Hooks (Proposal)** +- **React Docs: Hook** https://reactjs.org/docs/hooks-intro.html The main resource for learning hooks. Includes an intro with motivation, tutorials on `useState` and `useEffect`, discussion of custom hooks, the full hooks API reference, and an in-depth FAQ. **Read the hooks docs first before looking at anything else!** From af6c44738cf8ca535e949c659267a7bc3b2a8d36 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Thu, 18 Jul 2019 00:38:11 -0400 Subject: [PATCH 33/59] Updates, 2019-07-18 --- basic-concepts.md | 2 +- boilerplates-and-starter-kits.md | 2 +- react-ajax.md | 4 ++-- react-architecture.md | 2 +- react-component-patterns.md | 2 +- react-deployment.md | 2 +- react-hooks.md | 15 ++++++++++++--- react-styling.md | 4 ++-- webpack-advanced-techniques.md | 8 ++++---- webpack-tutorials.md | 2 +- 10 files changed, 26 insertions(+), 17 deletions(-) diff --git a/basic-concepts.md b/basic-concepts.md index 0a2692e..7e08fcf 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -140,7 +140,7 @@ #### General Suggestions for Learning - **Learn the Javascript Ecosystem one package at a time** - http://andrewhfarmer.com/npm-sandboxing/ + https://www.javascriptstuff.com/npm-sandboxing Some tips for how to approach learning the JS ecosystem without being overwhelmed. - **On being overwhelmed with our fast paced industry** diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index 9a99b6f..5cf25c0 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -76,7 +76,7 @@ #### Other - **React Starter Project Search Tool** - http://andrewhfarmer.com/starter-project/ + https://www.javascriptstuff.com/react-starter-projects/ Search for starter kits with/without specific libraries and sort by GitHub stars, number of dependencies, or recently updated. - **Awesome React Boilerplates** diff --git a/react-ajax.md b/react-ajax.md index 353c712..ee935ec 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -23,11 +23,11 @@ An excellent look at several key aspects of fetching in data in React apps, including what components should containg the fetching and display logic, what lifecycle methods to use for API calls, and how to abstract out the fetching process into its own component. - **React AJAX Best Practices** - http://andrewhfarmer.com/react-ajax-best-practices/ + https://www.javascriptstuff.com/react-ajax-best-practices Covers four ways to approach managing queries and data fetching. - **AJAX/HTTP Library Comparison** - http://andrewhfarmer.com/ajax-libraries/ + https://www.javascriptstuff.com/ajax-libraries A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. - **Loading data from APIs in React** diff --git a/react-architecture.md b/react-architecture.md index 094d1f5..f1abc16 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -288,7 +288,7 @@ - **Three Example React Stacks** - http://andrewhfarmer.com/three-example-react-stacks/ + https://www.javascriptstuff.com/three-example-react-stacks Descriptions of three different application/deployment scenarios, and example React library+tool stacks that would be appropriate for each. - **Reusable Web Application Strategies: three patterns for running the same app in multiple spots** diff --git a/react-component-patterns.md b/react-component-patterns.md index db824e3..3c150f3 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -208,7 +208,7 @@ #### Component Communication - **8 no-Flux strategies for React component communication** - http://andrewhfarmer.com/component-communication/ + https://www.javascriptstuff.com/component-communication Very helpful list of ways to have React components communicate back and forth - **How to communicate between React components** diff --git a/react-deployment.md b/react-deployment.md index 11cbc15..5d16c65 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -32,7 +32,7 @@ Walks through the basics of configuring a Create-React-App-based Electron app and building it for production. - **React with Any Backend** - http://andrewhfarmer.com/react-with-any-backend/ + https://www.javascriptstuff.com/react-with-any-backend Some short discussion and suggestions for project structure and deployment steps when building a React app that talks to a non-Javascript backend server. - **Building a Full-Stack App with Serverless and React** diff --git a/react-hooks.md b/react-hooks.md index 9dd65e9..5a550d2 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -22,11 +22,16 @@ - **A Simple Intro to React Hooks** https://daveceddia.com/intro-to-hooks/ - Dave Ceddia continues his excellent easy-to-read React tutorials with a friendly intro to the basics of the `useState` hook. Also see [the other articles in his hooks intro series](https://daveceddia.com/archives/) as well. + https://daveceddia.com/usestate-hook-examples/ + https://daveceddia.com/usereducer-hook-examples/ + https://daveceddia.com/useeffect-hook-examples/ + https://daveceddia.com/usecontext-hook/ + Dave Ceddia continues his excellent easy-to-read React tutorials with a friendly intro to the basics of several hooks. - **What are React Hooks?** https://www.robinwieruch.de/react-hooks/ - An excellent article by Robin Wieruch. Includes examples of problems that hooks can help solve, discussion of how the changes affect React overall, and multiple examples for the `useState` and `useEffect` hooks. + https://www.robinwieruch.de/react-hooks-fetch-data/ + An excellent article by Robin Wieruch. Includes examples of problems that hooks can help solve, discussion of how the changes affect React overall, and multiple examples for the `useState` and `useEffect` hooks. A follow-up post discusses how to handle data fetching. - **Everything you need to know about React Hooks** https://dev.to/vcarl/everything-you-need-to-know-about-react-hooks-doh @@ -37,7 +42,7 @@ An extensive article with numerous examples of `useState`, `useEffect`, and `useContext`. Also covers `useRef`, custom hooks, writing tests for hooks, and some community reactions. -#### Understanding Hooks Internals +#### Understanding Hooks Concepts - **React Hooks Demystified** https://dev.to/kayis/react-hooks-demystified-2af6 @@ -47,6 +52,10 @@ https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented. +- **Why React Hooks, and how did we even get here?** + https://medium.freecodecamp.org/why-react-hooks-and-how-did-we-even-get-here-aa5ed5dc96af + A look back at earlier common patterns for reusing React logic (mixins, higher-order components, and render props), some of their strengths and weaknesses, and how hooks improve on those patterns. + - **React RFC #68: React Hooks** https://github.com/reactjs/rfcs/pull/68 The official RFC announcing hooks. There's hundreds of comments from the community debating various pros and cons of the API design. Probably not worth reading the entire thread, but some interesting thoughts in there. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index c6a884c..56f2071 100644 --- a/react-styling.md +++ b/react-styling.md @@ -7,7 +7,7 @@ An introduction to using React's built-in inline styling abilities - **How To Style React** - http://andrewhfarmer.com/how-to-style-react/ + https://www.javascriptstuff.com/how-to-style-react An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use. - **Understand the React Styling Paradigms** @@ -87,7 +87,7 @@ #### CSS-Based Approaches - **CSS Modules by Example** - http://andrewhfarmer.com/css-modules-by-example/ + https://www.javascriptstuff.com/css-modules-by-example/ A set of 7 examples demonstrating ways to use CSS modules. - **Elephants, The Three Code Ilities, & Two Months With CSS Modules** diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 4520a4c..745596b 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -304,10 +304,10 @@ Dan Abramov walks through the history of his React Hot Loader and React Transform tools, describes their implementation, flaws, and weaknesses, and looks at a potential solution (later implemented in React Hot Loader 3.0). - **HMR Tutorial Series** - http://andrewhfarmer.com/why-use-hmr/ - http://andrewhfarmer.com/understanding-hmr/ - http://andrewhfarmer.com/3-ways-webpack-hmr/ - http://andrewhfarmer.com/webpack-hmr-tutorial/ + https://javascriptstuff.com/why-use-hmr/ + https://javascriptstuff.com/understanding-hmr/ + https://javascriptstuff.com/3-ways-webpack-hmr/ + https://www.javascriptstuff.com/webpack-hmr-tutorial/ A very readable and informative series of articles on using HMR. - **Blogged Answers: Webpack HMR vs React-Hot-Loader** diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 842168f..37053ec 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -234,7 +234,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac A goofy but informative look at many of the concepts and pieces that make up Webpack - **Webpack Loader Variations** - http://andrewhfarmer.com/webpack-loader-variations/ + https://javascriptstuff.com/webpack-loader-variations/ Examples of the different ways to define a loader in a Webpack config - **Remix's Software Stack: Webpack** From 7bcc775e82d7df1ae05cee61806400a1b942688a Mon Sep 17 00:00:00 2001 From: Brady Pascoe <18705892+bpas247@users.noreply.github.com> Date: Sun, 21 Jul 2019 21:01:21 -0700 Subject: [PATCH 34/59] fix: Remove experimental proposal warning from React Hooks section The React Hooks API was officially released in v16.8, therefore the warning is no longer relevant :) Fixes #118 --- react-hooks.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/react-hooks.md b/react-hooks.md index 526489d..52d4af5 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -1,7 +1,5 @@ ### React Hooks -> **Note**: Hooks are still an **experimental proposal, available in an alpha release**. The API will likely change. Keep that in mind as you try them out. - #### Official Resources From dca2f72539c813886d908a30a4eb89aa77b73107 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 7 Sep 2019 23:47:22 -0400 Subject: [PATCH 35/59] Update react-hooks.md --- react-hooks.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/react-hooks.md b/react-hooks.md index 52d4af5..663216d 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -3,7 +3,7 @@ #### Official Resources -- **React Docs: Hook** +- **React Docs: Hooks** https://reactjs.org/docs/hooks-intro.html The main resource for learning hooks. Includes an intro with motivation, tutorials on `useState` and `useEffect`, discussion of custom hooks, the full hooks API reference, and an in-depth FAQ. **Read the hooks docs first before looking at anything else!** @@ -18,6 +18,10 @@ #### Hooks Tutorials +- **Why React Hooks?** + https://tylermcginnis.com/why-react-hooks/ + A great introduction to hooks by Tyler McGinnis, with a focus on "why do these exist, and what problems do they solve?". + - **A Simple Intro to React Hooks** https://daveceddia.com/intro-to-hooks/ https://daveceddia.com/usestate-hook-examples/ From 3693734ab5632f917e77972776405a81132b52f2 Mon Sep 17 00:00:00 2001 From: Silviya Boteva Date: Mon, 18 Nov 2019 09:34:20 +0200 Subject: [PATCH 36/59] Add Developer Productivity Tips article in Basic concepts --- basic-concepts.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/basic-concepts.md b/basic-concepts.md index 7e08fcf..8dc6e04 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -136,6 +136,10 @@ https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework A large list of categorized resources for dozens of web development-related topics. +- **Developer Productivity Tips from the React Experts** + https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/?utm_medium=referral&utm_source=github&utm_campaign=kendo-ui-react-blog-expert-productivity-tips-react-redux-links + The KendoReact team curated the top productivity tips of 20+ React experts, ranging from smart ways to get started to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. + #### General Suggestions for Learning @@ -213,4 +217,4 @@ - **7 GUIs** http://eugenkiss.github.io/7guis/tasks/ - A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more. \ No newline at end of file + A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more. From 7a82928dd82e957a88511f30aec7186b98da7273 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 18 Nov 2019 11:28:16 -0500 Subject: [PATCH 37/59] Update basic-concepts.md --- basic-concepts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/basic-concepts.md b/basic-concepts.md index 8dc6e04..c042cf5 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -137,7 +137,7 @@ A large list of categorized resources for dozens of web development-related topics. - **Developer Productivity Tips from the React Experts** - https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/?utm_medium=referral&utm_source=github&utm_campaign=kendo-ui-react-blog-expert-productivity-tips-react-redux-links + https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/ The KendoReact team curated the top productivity tips of 20+ React experts, ranging from smart ways to get started to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. From b8f5d214d234e5e3bcc9cac91f158a03afad4d04 Mon Sep 17 00:00:00 2001 From: abrown945 Date: Sun, 8 Dec 2019 11:49:37 -0500 Subject: [PATCH 38/59] Remove dead link to Planet React --- community-resources.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/community-resources.md b/community-resources.md index 9e00273..e03c7ef 100644 --- a/community-resources.md +++ b/community-resources.md @@ -51,10 +51,6 @@ https://github.com/tuchk4/awesome-create-react-app A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool. -- **Planet React** - https://www.planet-react.org/ - A blog aggregator that collects posts from dozens of blogs written by members of the React community. An excellent resource. - - **Awesome CSS-in-JS** https://github.com/tuchk4/awesome-css-in-js A collection of awesome things regarding CSS in JS approaches From d310d28934c04eeea61c8c74c7425495a7f67595 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 21 Mar 2020 21:15:40 -0400 Subject: [PATCH 39/59] Add "Getting Closure on Hooks" --- react-hooks.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/react-hooks.md b/react-hooks.md index 663216d..4b24123 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -54,6 +54,10 @@ https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented. +- **Getting Closure on Hooks** + https://www.swyx.io/speaking/react-hooks/ + Shawn Wang's excellent talk that shows how hooks work by building a mini-React with hooks in just a few lines of code + - **Why React Hooks, and how did we even get here?** https://medium.freecodecamp.org/why-react-hooks-and-how-did-we-even-get-here-aa5ed5dc96af A look back at earlier common patterns for reusing React logic (mixins, higher-order components, and render props), some of their strengths and weaknesses, and how hooks improve on those patterns. From 5d07bcbe985452aea6164f99d0c9a7b19a52aff8 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Tue, 29 Sep 2020 22:36:43 -0400 Subject: [PATCH 40/59] Update redux-middleware.md --- redux-middleware.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redux-middleware.md b/redux-middleware.md index 8c3fb44..dc01bd1 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -23,7 +23,7 @@ A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them. - **Redux Middleware Tutorial** - http://www.pshrmn.com/tutorials/react/redux-middleware/ + https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md An overview of what middleware is, how `applyMiddleware` works, and how to write middleware. - **Redux Middleware: Behind the Scenes** @@ -112,4 +112,4 @@ - **Custom Form Validation in React with Redux Middleware** http://tech.tunecore.com/redux-form-validation-middleware - A detailed example of how middleware can be used to implement some complex form validation logic in a centralized way. \ No newline at end of file + A detailed example of how middleware can be used to implement some complex form validation logic in a centralized way. From 04cacfd4db61156672e5c33fe6cbf724ef12b561 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 19 Oct 2020 23:25:17 -0400 Subject: [PATCH 41/59] Update react-hooks.md --- react-hooks.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/react-hooks.md b/react-hooks.md index 4b24123..6cc0d0a 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -55,8 +55,9 @@ Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented. - **Getting Closure on Hooks** - https://www.swyx.io/speaking/react-hooks/ - Shawn Wang's excellent talk that shows how hooks work by building a mini-React with hooks in just a few lines of code + https://www.youtube.com/watch?v=KJP1E-Y-xyo + https://www.swyx.io/getting-closure-on-hooks/ + Shawn Wang's excellent talk and post that shows how hooks work by building a mini-React with hooks in just a few lines of code - **Why React Hooks, and how did we even get here?** https://medium.freecodecamp.org/why-react-hooks-and-how-did-we-even-get-here-aa5ed5dc96af From e61781d44def87a06f44aadef128eee67fe34e71 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 7 Dec 2020 09:36:40 -0500 Subject: [PATCH 42/59] Update react-hooks.md --- react-hooks.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/react-hooks.md b/react-hooks.md index 6cc0d0a..ecbd245 100644 --- a/react-hooks.md +++ b/react-hooks.md @@ -10,6 +10,10 @@ - **ReactConf 2018: React Today and Tomorrow** https://www.youtube.com/watch?v=dpw9EHDh2bM Sophie Alpert and Dan Abramov's talk unveiling hooks, live at ReactConf 2018. + +- **A Complete Guide to `useEffect`** + https://overreacted.io/a-complete-guide-to-useeffect/ + An incredibly detailed deep dive by Dan Abramov into the mindset of using hooks correctly. Covers the relationship between class lifecycles and hooks, how to work with the dependencies array, dealing with closures and stale data, and much much more. This is required reading for anyone using hooks. - **Making Sense of React Hooks** https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib From e229a47d584049dd1982a7071f74f336e786d649 Mon Sep 17 00:00:00 2001 From: Arshad Riyaz <61007604+arshadrr@users.noreply.github.com> Date: Thu, 22 Jul 2021 20:53:21 +0800 Subject: [PATCH 43/59] fix broken link on styling in react Visiting the most recent copy of the original link on the wayback machine, it's [this](http://web.archive.org/web/20190111132559/http://andrewhfarmer.com/how-to-style-react) which redirects to [here](http://web.archive.org/web/20180429195243/https://www.javascriptstuff.com/how-to-style-react/). The website it redirects to is still online and doesn't need the wayback maching to view, this commit uses the new link. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b750f1b..1169a05 100644 --- a/README.md +++ b/README.md @@ -227,7 +227,7 @@ If you are new to React, try reading these articles in order. ### Styles - [Styling in React](https://www.kirupa.com/react/styling_in_react.htm) An introduction to using React's built-in inline styling abilities - - [How To Style React](http://andrewhfarmer.com/how-to-style-react/) + - [How To Style React](https://www.javascriptstuff.com/how-to-style-react/) An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use. From 87114d3bfa03aaf4dd9ea5861c6447d1a69d6e3d Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Mon, 27 Sep 2021 20:08:12 -0400 Subject: [PATCH 44/59] Added workflow to check links --- .github/workflows/action.yml | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .github/workflows/action.yml diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml new file mode 100644 index 0000000..7e5898d --- /dev/null +++ b/.github/workflows/action.yml @@ -0,0 +1,8 @@ +name: Check URLs for dead links +on: push +jobs: + markdown-link-check: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - uses: gaurav-nelson/github-action-markdown-link-check@v1 From 3ffe58455f352a7a9ad536fb36f50d7fbc49ea67 Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Mon, 27 Sep 2021 21:46:38 -0400 Subject: [PATCH 45/59] Removed dead links --- README.md | 19 -- basic-concepts.md | 8 - boilerplates-and-starter-kits.md | 19 +- community-resources.md | 18 +- es6-features.md | 163 +++++++---------- flux-tutorials.md | 8 - framework-comparisons.md | 18 +- functional-programming.md | 40 +---- git-resources.md | 26 +-- immutable-data.md | 43 +---- javascript-resources.md | 25 +-- mobx-tutorials.md | 22 +-- node-js-and-npm.md | 4 - project-structure.md | 9 - pros-cons-discussion.md | 28 +-- react-ajax.md | 24 +-- react-architecture.md | 17 +- react-component-composition.md | 14 +- react-component-patterns.md | 298 +++++++++++++------------------ react-deployment.md | 4 - react-forms.md | 16 +- react-implementation.md | 10 +- react-native.md | 6 +- react-performance.md | 23 +-- react-redux-testing.md | 72 +------- react-routing.md | 14 +- react-server-rendering.md | 13 +- react-styling.md | 20 +-- react-techniques.md | 14 -- react-tutorials.md | 67 +------ redux-architecture.md | 26 +-- redux-middleware.md | 9 - redux-reducers-selectors.md | 10 +- redux-side-effects.md | 35 +--- redux-techniques.md | 41 +---- redux-tutorials.md | 69 +------ redux-ui-management.md | 73 +++----- redux-without-react.md | 41 +---- static-typing.md | 16 +- webpack-advanced-techniques.md | 53 +----- webpack-tutorials.md | 48 +---- 41 files changed, 312 insertions(+), 1171 deletions(-) diff --git a/README.md b/README.md index 1169a05..7a601a1 100644 --- a/README.md +++ b/README.md @@ -94,8 +94,6 @@ All of the links in this collection are worth reading, but there's obviously a L - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) [How to Learn React](https://daveceddia.com/how-to-learn-react/) Another high-level suggested timeline for how to approach learning React and related technologies. - - [React Roadmap](https://github.com/ericdouglas/react-roadmap) - A curated list of free resources to master React Development, in suggested learning order - [Tips to learn React + Redux](https://www.robinwieruch.de/tips-to-learn-react-redux/) An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, unit testing, and much more. @@ -172,8 +170,6 @@ If you are new to React, try reading these articles in order. An excellent list of common patterns for structuring React components, with examples - [The React Component Lifecycle](https://www.kirupa.com/react/component_lifecycle.htm) A useful description of the order and purpose of React’s component lifecycle methods. - - [8 no-Flux strategies for React component communication](http://andrewhfarmer.com/component-communication/) - Very helpful list of ways to have React components communicate back and forth - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React. - [Mixins Considered Harmful](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html) @@ -197,16 +193,12 @@ If you are new to React, try reading these articles in order. Dan Abramov from the React team gives his thoughts on how to handle method binding. ### AJAX requests and Data Fetching - - [React AJAX Best Practices](http://andrewhfarmer.com/react-ajax-best-practices/) - Covers four ways to approach managing queries and data fetching. - [AJAX Requests in React: How and Where to Fetch Data](https://daveceddia.com/ajax-requests-in-react/) An overview of where AJAX requests fit into React usage. ### Immutable Data - [Pros and Cons of Using Immutability With React](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/) Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts. - - [Javascript and Immutability](http://t4d.io/javascript-and-immutability/) - A description of how to properly immutably update objects and arrays using functions like assign and slice - [Redux Docs: Structuring Reducers - Immutable Update Patterns](https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns) Useful examples for doing proper immutable updates, including common mistakes, proper updates of nested data, updates for arrays, and more. (Helpful for Redux, but not Redux-specific.) @@ -236,14 +228,10 @@ If you are new to React, try reading these articles in order. ### Getting Started - [Redux Docs](https://redux.js.org/) The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information. - - [Getting Started with Redux - Video Series](https://egghead.io/series/getting-started-with-redux) [Getting Started with Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_redux_course_notes) Dan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos. - - [Building React Applications with Idiomatic Redux - Video Series](https://egghead.io/series/building-react-applications-with-idiomatic-redux) [Building React Applications with Idiomatic Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes) Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos. - - [A Cartoon Guide to Redux](https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6) - A nifty introduction to Redux’s concepts using cartoon explanations - [Redux: From Twitter Hype to Production](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/) An extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture. - [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/) @@ -265,8 +253,6 @@ If you are new to React, try reading these articles in order. Understanding middlewares through a series of small experiments ### Debugging - - [Hot reloading and time travel debugging: what are they?](https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35) - A short but informative article describing these concepts and why they're useful, with cartoon illustrations - [Time Travel in React Redux apps using the Redux DevTools](https://onsen.io/blog/react-redux-devtools-with-time-travel/) Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging. @@ -313,10 +299,5 @@ If you are new to React, try reading these articles in order. Formidable Labs describes their preferred approaches for configuring Webpack, including optimization approaches. ### Hot Module Reloading - - [HMR Tutorial: Why Use HMR?](http://andrewhfarmer.com/why-use-hmr/) - [HMR Tutorial: Understanding HMR](http://andrewhfarmer.com/understanding-hmr/) - [HMR Tutorial: 3 Ways to use HMR with Webpack](http://andrewhfarmer.com/3-ways-webpack-hmr/) - [HMR Tutorial: HMR Ideas and Setup](http://andrewhfarmer.com/webpack-hmr-tutorial/) - A very readable and informative series of articles that explains what HMR is, what benefits it gives, and how to use it. - [Webpack Hot Reloading and React](https://ctheu.com/2015/12/29/webpack-hot-reloading-and-react-how/) An explanation of how Hot Reloading works, and how the various pieces fit together. diff --git a/basic-concepts.md b/basic-concepts.md index c042cf5..7a816f0 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -100,10 +100,6 @@ https://daveceddia.com/how-to-learn-react/ Another high-level suggested timeline for how to approach learning React and related technologies. -- **React Roadmap** - https://github.com/ericdouglas/react-roadmap - A curated list of free resources to master React Development, in suggested learning order - - **React FAQ** https://github.com/timarney/react-faq A collection of links to help answer your questions about React, including how to get started @@ -172,10 +168,6 @@ http://goshakkk.name/redux-vs-mobx-vs-flux-etoomanychoices/ Advice on avoiding choice overload when learning a toolset like React, by simplifying and just focusing on one new thing at a time. -- **How to avoid Javascript fatigue and sleep well at night** - https://www.javascriptfatigue.club/blog/2016/11/29/how-to-avoid-javascript-fatigue-and-sleep-well-at-night - A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve - - **How to Manage Javascript Fatigue** https://auth0.com/blog/how-to-manage-javascript-fatigue/ A description of what "JS fatigue" means in practice, and advice for managing it, including "picking battles", "make something interesting", and "be aware of common concepts". diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index 5cf25c0..f6cb3b2 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -83,12 +83,6 @@ http://habd.as/awesome-react-boilerplates/ Another good curated list of boilerplates for both React and React Native -- **React Community: Starter Kit** - https://reactjs.org/community/starter-kits.html - A list of starter kits that are officially recommended by the React team, as well as other kits from the community. - - - #### React Project Setup - **Simple React Development in 2018** @@ -130,18 +124,7 @@ - **Setup a React Environment using Webpack and Babel** https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel A tutorial that teaches how to set up a basic Webpack 2 + Babel config from scratch. - -- **Setting up a Front-End Project** - https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14 - https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15 - https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b - https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5 - An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript. - + - **Setting up Webpack, Babel, and React from scratch in 2017** https://stanko.github.io/webpack-babel-react-revisited/ A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch. - -- **How to set up React, Webpack 3, and Babel, in 2017** - https://www.valentinog.com/blog/react-webpack-babel/ - A clear explanation of how to create a basic Webpack+Babel setup for a React app, with descriptions of why each step is necessary. \ No newline at end of file diff --git a/community-resources.md b/community-resources.md index e03c7ef..6cde911 100644 --- a/community-resources.md +++ b/community-resources.md @@ -23,10 +23,6 @@ https://github.com/d3viant0ne/awesome-webpack A curated list of awesome Webpack resources, libraries and tools -- **React Roadmap** - https://github.com/ericdouglas/react-roadmap - A curated list of free resources to master React Development - - **React FAQ** https://github.com/timarney/react-faq A collection of links to help answer your questions about React.js @@ -116,10 +112,6 @@ #### Newsletters -- **Full Stack React** - http://newsletter.fullstackreact.com/ - Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends. - - **React.js Newsletter** http://reactjsnewsletter.com/ The free, weekly newsletter of the best React.js news, articles, projects, and more - brought to you by React.js Program @@ -127,11 +119,7 @@ - **React Digest** http://reactdigest.net/ A free, weekly newsletter about the latest news in React Javascript community. The only news source you need targeted on (but not limited to) React, Javascript, Flux and functional programming. - -- **Curated React** - http://curatedreact.com/ - Curated React is a weekly curated publication full of interesting, relevant links geared towards ReactJS and React Native. - + - **React Statuscode** http://react.statuscode.com/ A free, once-weekly e-mail newsletter on React from the authors of JavaScript Weekly. @@ -144,10 +132,6 @@ https://ponyfoo.com/weekly A single email every thursday, discussing front-end web development and related technologies. -- **Deterministic** - https://deterministic.curated.co - A weekly digest of interesting news and articles covering functional programming for the web, especially on the front end. - - **ES.next News** http://esnextnews.com/ 5 ECMAScript.next links every week, in your inbox. Curated by Dr. Axel Rauschmayer and Johannes Weber. diff --git a/es6-features.md b/es6-features.md index 31c350d..b0a7fff 100644 --- a/es6-features.md +++ b/es6-features.md @@ -1,7 +1,5 @@ - ### Javascript ES6 Features and Examples - #### Overviews - **ES6 Features Overview** @@ -10,11 +8,11 @@ - **ES6 Features Comparison** http://es6-features.org/ - Code snippets comparing ES6 features with their ES5 equivalents + Code snippets comparing ES6 features with their ES5 equivalents - **ES6 Overview in 350 Bullet Points** https://ponyfoo.com/articles/es6 - Quick samples and descriptions of all the various ES6 capabilities + Quick samples and descriptions of all the various ES6 capabilities - **Javascript Features** http://jsfeatures.in/#ES6 @@ -22,150 +20,134 @@ - **ES6 - The Bits You'll Actually Use** http://jamesknelson.com/es6-the-bits-youll-actually-use/ - A quick tour through some of the more useful features in ES6 - + A quick tour through some of the more useful features in ES6 + - **ES6 Succinctly** http://kamranahmed.info/blog/2016/04/04/es6-in-depth/ A very readable overview of the features in ES6, why you would want to use them, and examples showing what they look like. - + - **How to Learn ES6** https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620 A set of resources for learning ES6 - + - **ES6 for Humans** https://github.com/metagrover/ES6-for-humans A kickstarter guide to writing ES6. - + - **Start Using ES6 Today** 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 - + - **ES6 New Features Tutorials** https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBhgcpA8eTYYWg7im72LgLt A set of video tutorials explaining the new features in ES6 - + - **ES6 Cheatsheet** https://es6cheatsheet.com/ - An interactive cheatsheet with editable and runnable examples to help explain the new syntax and features in ES6. Offered as a "Pay What You Want" model, so $0 is a valid choice, but payments are requested. - + An interactive cheatsheet with editable and runnable examples to help explain the new syntax and features in ES6. Offered as a "Pay What You Want" model, so $0 is a valid choice, but payments are requested. + - **A Rundown of Javascript 2015 Features** https://auth0.com/blog/a-rundown-of-es6-features/ An overview of the features in ES6 and how they can be used. - + - **ES6 Summary** https://github.com/zsolt-nagy/es6-summary A list of ES6 features and their ES5 equivalents - + - **Introduction to commonly used ES6 features** https://zellwk.com/blog/es6/ A great look at how several of the most useful ES6 features work, such as block scoping, arrow functions, and destructuring. - + - **ES6 Katas: Learn ES6 by doing it** http://es6katas.org/ Sets of exercises to help you learn ES6 features and syntax. - + - **Tiny ES6 Notebook** https://github.com/mattharrison/Tiny-ES6-Notebook A large list of notes, examples, and discussion on how to use the features in ES6 - -- **ECMASyntax** - https://ecmasyntax.io - A reference site listing the syntax of features in ES6, and comparing them with earlier ES behavior. - + - **Laracasts: ES2015 Crash Course** https://laracasts.com/series/es6-cliffsnotes A video screencast series that covers the new features and syntax in ES6/ES2015. - #### In-Depth Details - **ES6 In Depth** https://ponyfoo.com/articles/tagged/es6-in-depth Many articles covering each feature in greater detail - + - **Exploring ES6** http://exploringjs.com/es6/index.html - A full online book covering every aspect of ES6 in fine detail - + A full online book covering every aspect of ES6 in fine detail + - **Understanding ES6** https://leanpub.com/understandinges6/read An online book that covers all the changes and features involved in ES6 - + - **Javascript Alonge: The "Six" Edition** https://leanpub.com/javascriptallongesix/read A book that teaches Javascript and ES6 from a functional programming perspective - -- **Why Do ES6 Classes Exist, and Why Now?** - http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/ - Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them - + - **How ES6 classes really work, and how to build your own** https://medium.com/@robertgrosse/how-es6-classes-really-work-and-how-to-build-your-own-fd6085eb326a A deep dive into Javascript's object model, prototypal inheritance, and how ES6 classes are implemented in relation to prototypes. - - #### Specific Features - + - **Metaprogramming in ES6: Symbols, Reflection, and Proxies** https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/ https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-2-reflect/ https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies/ A deep dive into three new features of ES6 that enable different ways of metaprogramming. - -- **Detailed overview of well-known Symbols** - https://rainsoft.io/detailed-overview-of-well-known-symbols/ - An in-depth look at the predefined Symbols in ES6 and what they are used for. - + - **Learning ES6: New Collections** https://www.eventbrite.com/engineering/learning-es6-new-collections/ Details the new Map, Set, WeakMap & WeakSet collection types in ES6. - + - **Learning ES6: Iterators and Iterables** https://www.eventbrite.com/engineering/learning-es6-iterators-iterables/ Covers the new iteration-related features in ES6 - + - **The Most In-Depth Yet Understandable ES6 Destructuring Tutorial** 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. - + - **Advanced ES6 Destructuring Techniques** http://untangled.io/advanced-es6-destructuring-techniques/ Examples of advanced ways to use ES6's destructuring capabilities - + - **ES6 Proxies in Practice** http://www.zsoltnagy.eu/es6-proxies-in-practice/ An overview of how to use ES6 proxies for advanced use cases, with examples - + - **ES6 Features - 10 Use Cases for Proxy** http://dealwithjs.io/es6-features-10-use-cases-for-proxy/ Lists a variety of ways that ES6 proxies can be used, with links to examples - + - **Stop JavaScripting Like It's 1999** https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999 A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment. - + - **Spreading the Spread and Rest Love: Javascript's Spread Syntax** https://spin.atomicobject.com/2018/01/09/javascript-spread-syntax/ Examples of the new array spread and object rest/spread syntaxes, and how to use them - - + #### Generators - **Javascript Generators** @@ -179,20 +161,18 @@ - **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 - + - **A Practical Introduction to ES6 Generator Functions** http://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html Some practical examples discussing what generator functions are, how they work, and what they can be used for. - + - **3 cases where JavaScript generators rock (+ understanding them)** 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 @@ -203,19 +183,19 @@ - **Javascript Promises... in Wicked Detail** http://www.mattgreer.org/articles/promises-in-wicked-detail/ Explains what promises are and how they work by building a promise implementation from scratch - + - **Javascript Promises: an Introduction** https://developers.google.com/web/fundamentals/getting-started/primers/promises An explanation of what promises are, what they're useful for, terms, and related APIs - + - **ES6 Promises in Depth** https://ponyfoo.com/articles/es6-promises-in-depth A detailed description of promises, what they are, and how to use them - + - **Awesome Promises** https://github.com/wbinnssmith/awesome-promises Links to tutorials, articles, and other resources on promises - + - **We have a problem with promises** https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html Describes some common mistakes while using promises, and how to avoid them @@ -227,46 +207,40 @@ - **Broken Promises** https://mockbrian.com/blog/2016/12/29/broken-promises/ Some useful tips for dealing with promises. - + - **JS: Promises/A+, jQuery Deferreds, and errors** http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/ A comparison of the two most common Promise definitions, and how they differ in behavior - -- **Practical Promises** - http://trycatchfail.com/blog/?tag=/promises - An excellent series of articles describing the basics of promises, and listing a variety of useful techniques for using promises to solve problems. - + - **Escape from Callback Mountain: the "Functional River" pattern** https://github.com/justsml/escape-from-callback-mountain/ An opinionated suggested approach for writing promise callbacks to form a pipeline - + - **ES6 Promises: Patterns and Anti-Patterns** 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. - + - **await vs return vs return await** https://jakearchibald.com/2017/await-vs-return-vs-return-await/ An informative look at the differences in behavior between various uses of the async/await syntax in relation to promises - - + #### Techniques - **"Real" Mixins with Javascript Classes"** http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/ An explanation of what mixins are, and how to implement them using ES6 classes - + - **Functional Mixins in ECMAScript 2015** http://raganwald.com/2015/06/17/functional-mixins.html Another approach at combining mixins and classes - + - **Selective transpilation for modern Javascript environments** https://medium.com/@adamrackis/selective-transpilation-for-modern-javascript-environments-15bde6b75cfd An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support. - #### Javascript Module Formats @@ -274,60 +248,51 @@ https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306 A two-part article discussing the various ways to define a module in Javascript, and common tools used to bundle modules together - + - **Understanding ES6 Modules via Their History** https://www.sitepoint.com/understanding-es6-modules-via-their-history/ A recap of how the various Javascript module formats evolved over time, and how that's lead to ES6 modules - + - **Javascript Module Systems Showndown: CommonJS vs AMD vs ES2015** https://auth0.com/blog/javascript-module-systems-showdown/ A look at the history and reasons for each module format's creation - + - **History and Background of Javascript Module Loaders** https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/ An overview of the various tools that have been used to load different module formats over time - + - **Understanding Javascript Modules: Bundling and Transpiling** https://www.sitepoint.com/javascript-modules-bundling-transpiling/ An overview of tools commonly used to bundle and transpile various module formats - + - **How Javascript Modules Work - from Past to Present** http://www.penta-code.com/how-javascript-modules-work-from-past-to-present/ An overview of the different approaches that have been used to load Javascript modules over time. - + - **Understanding the State of Javascript Modules** http://georgemauer.net/2016/11/25/how-js-modules-work.html A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why. - -- **Native ECMAScript Modules: Overview and New Features** - https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview - https://blog.hospodarets.com/native-ecmascript-modules-new-features - An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack - -- **Native ECMAScript Modules: dynamic import()** - https://blog.hospodarets.com/native-ecmascript-modules-dynamic-import - Details on how the in-progress `import()` operator will allow dynamic loading of modules. - + - **A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers** http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/ A useful introduction to the various module formats and module tools - + - **History of Javascript: Evolution of JS Modularity** https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity A well-researched article that recounts the history and development of Javascript module definition approaches - + - **The State of Javascript Modules** https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358 An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors. - + - **Reify: Meteor's evolving Javascript module compiler** https://blog.meteor.com/reify-meteors-evolving-javascript-module-compiler-70425fa45d81 A detailed look at the subtleties of ES6 module syntax, and how Meteor's Reify compiler and Babel's module transform plugin deal with those restrictions in different ways. - + - **ES6 Modules in Node Today** https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b - John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. - + John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. + - **State of Modules in JavaScript** https://www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/ - Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more. \ No newline at end of file + Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more. diff --git a/flux-tutorials.md b/flux-tutorials.md index de3e931..0991497 100644 --- a/flux-tutorials.md +++ b/flux-tutorials.md @@ -21,14 +21,6 @@ https://github.com/MIJOTHY/FOR_FLUX_SAKE A Flux tutorial and description, with a sample project -- **Thinking in Flux** - http://www.actioniq.co/blog/thinking-in-flux/ - An example of writing a component that works in a Flux data flow - -- **A Cartoon Guide to Flux** - https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207 - A high-level description of Flux concepts, with cartoons - - **React/Flux Tutorial Part 2: Flux** http://spapas.github.io/2015/07/02/comprehensive-react-flux-tutorial-2/ Reworks the app from part 1 to use Flux diff --git a/framework-comparisons.md b/framework-comparisons.md index 00826d1..18fadf6 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -26,19 +26,11 @@ - **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. - -- **How is React different from Vue?** - https://javascriptreport.com/how-is-react-different-from-vue/ - A higher-level overview of some of the similarities and differences between React and Vue, including quotes from Dan Abramov and Evan You. - + - **Unopinionated comparison of Glimmer and React** https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react A well-written comparison of small React and Glimmer components that implement the same functionality. - -- **The Ultimate Guide to JavaScript Frameworks** - https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/ - A high-level overview of both major and minor JS frameworks in 2018, Groups them into "the big three", "historically significant", "notable", and "the rest of the pack". Provides short descriptions and links to additional resources for each, as well as pros and cons for the better-known frameworks. - + - **Why I'm switching from Angular to React and Redux** https://hackernoon.com/why-im-switching-from-angular-to-react-and-redux-in-2018-cb48be00fda7 One person's opinions on why they decided to work with React and Redux instead of Angular, including flexibility of libraries over the "one way" of a framework, simpler state management with Redux vs services and injected event emitters, and more. @@ -76,11 +68,7 @@ - **AngularJS migration to React/Redux** https://hashnode.com/post/angularjs-migration-to-reactredux-cj7t0m67x012ehowugcvjn1xj Examples of how to approach migrating an Angular 1 app by first switching some components to use React, then adding state management to use Redux. - -- **Migrating complex Javascript applications** - https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/ - Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. - + - **A Chip off the Monolith** https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. diff --git a/functional-programming.md b/functional-programming.md index c67053f..84a4090 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -25,15 +25,6 @@ - **Functors, Applicatives, and Monads in Pictures** http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html A long article that tries to describe several FP terms using lots of cartoons. - -- **Introduction to Immutable.js and Functional Programming Concepts** - https://auth0.com/blog/2016/03/23/intro-to-immutable-js/ - Covers the benefits of using immutable data, pure functions, and other FP concepts, and how those related to Immutable.js. - -- **Practical Intro to Monads in Javascript** - http://tech.evojam.com/2016/02/22/practical-intro-to-monads-in-javascript/ - http://tech.evojam.com/2016/03/21/practical-intro-to-monads-in-javascript-either/ - An attempt to describe monads aimed at developers and engineers. - **A Gentle Introduction to Functional Javascript** http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/ @@ -42,10 +33,6 @@ http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-style/ Goes through a number of FP-related aspects in Javascript. -- **Professor Frisby's Mostly Adequate Guide to Functional Programming** - https://drboolean.gitbooks.io/mostly-adequate-guide/content/ - A long (and still growing) online book covering functional topics. Starts fairly simple, definitely gets more complex in later chapters. - - **Functional Thinking** http://nealford.com/functionalthinking.html An extended series of articles collected together. Aimed at Java/JVM programmers, and makes a number of comparisons of OOP vs FP. @@ -58,10 +45,6 @@ http://fsharpforfunandprofit.com/series/thinking-functionally.html A series of lessons teaching functional concepts using F#. Very well written, clear and easy to understand. Examples use F#, but concepts are widely applicable. -- **Imperative to Functional Programming Succinctly** - https://www.syncfusion.com/resources/techportal/details/ebooks/imperative - A short ebook covering many functional concepts. - - **Functional Programming in Javascript** https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84 A web series by a quirky programmer showing you high level functional concepts in Javascript @@ -95,11 +78,7 @@ https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-part-2-f45228c49eed https://medium.com/@collardeau/part-3-an-intro-to-functional-programming-concepts-in-javascript-febf9368ffe6 A multi-part series covering a number of FP concepts, how to use them in Javascript, and use of the Ramda FP utility library - -- **JavaScript and Functional Programming** - https://bethallchurch.github.io/JavaScript-and-Functional-Programming/ - An overview of the basic principles of functional programming, and how they can be applied in Javascript. Also includes links to a variety of other articles and resources. - + - **Functional-Light JS** https://github.com/getify/Functional-Light-JS This book explores the core principles of functional programming (FP) that can be applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript. @@ -116,16 +95,10 @@ 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 - - **Functional Programming Basics in ES6** https://www.youtube.com/watch?v=HvMemAgOw6I Talk on functional programming with JavaScript and ES6 syntax. Covers basics such as purity, referential transparency, closures, immutability, currying, composition, and recursion. - -- **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 @@ -134,15 +107,10 @@ https://medium.com/@homam/composability-from-callbacks-to-categories-in-es6-f3d91e62451e Explores different solutions to "callback hell", based on various FP concepts - - **So You Want To Be a Functional Programmer** https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403 A multi-part series on functional programming concepts and learning approaches (links to previous parts in the article). -- **Imperative vs Declarative Programming** - https://medium.freecodecamp.com/imperative-vs-declarative-programming-283e96bf8aea - Metaphors, examples, and explanations for the terms "declarative" and "imperative", and how those relate to Functional Programming - - **Higher-order functions in Lodash** http://pragmatists.pl/blog/2017/05/higher-order-functions-in-lodash/ An explanation of several FP concepts like partial application and currying, and how Lodash offers utility functions to help make use of those concepts. @@ -150,11 +118,7 @@ - **How to Draw an Owl** https://glebbahmutov.com/blog/how-to-draw-an-owl/ Demonstrates refactoring some complex imperative code into a functional approach that uses concepts like pure functions, lenses, immutable data, and the Maybe monad - -- **Classes, Complexity, and Functional Programming** - https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747 - Kent C Dodds looks at pros and cons of using classes, issues with the `this` keyword in Javascript, and some ways to avoid using classes - + - **What's Functional Programming All About?** http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved. diff --git a/git-resources.md b/git-resources.md index db2fe93..155d8ea 100644 --- a/git-resources.md +++ b/git-resources.md @@ -40,11 +40,7 @@ - **Git from the Inside Out** 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. - + - **Git for Humans** https://speakerdeck.com/alicebartlett/git-for-humans A slideshow introducing Git concepts without complex terminology @@ -75,11 +71,7 @@ - **Advance Git** https://medium.com/@jstats/advance-git-dfe557bdbe59 Gives advice for good commit messages, and describes the options and usage for several advanced Git commands (`add --patch`, `rebase`, `reflog`, and more). - -- **Git Useful Tips** - http://ericdouglas.github.io/2016/04/01/Git-Useful-Tips/ - A useful reference to commands and concepts. - + - **19 Tips for Everyday Git Use** http://www.alexkras.com/19-git-tips-for-everyday-use A variety of practical commands for different scenarios. @@ -107,11 +99,7 @@ - **Life-Saving Git Tips** https://www.cuttlesoft.com/life-saving-git-tips/ A variety of useful tips, including use of cherry-picking, local pulling and testing, and use of aliases to simplify tasks - -- **Git Cheat Sheet: Useful Commands, Tips and Tricks** - https://sentheon.com/blog/git-cheat-sheet.html - A large cheat sheet / reference for a variety of Git usage topics, including workflow, configuration, .gitignore syntax, different categories of commands, and more. - + - **Git Flight Rules** https://github.com/k88hudson/git-flight-rules A guide for Git users about what to do when things go wrong. Covers topics like editing commits, staging and unstaging files, fixing branches, rebasing/merging, and much more. @@ -165,10 +153,6 @@ https://git-scm.com/book/en/v2 An in-depth online reference to all aspects of Git -- **Git Succinctly** - https://www.syncfusion.com/resources/techportal/details/ebooks/git - A free PDF that covers Git concepts and usage - - **Git Internals** https://github.com/pluralsight/git-internals-pdf A free PDF that digs deep into Git's data structures and behavior @@ -191,10 +175,6 @@ #### Cheat Sheets -- **Git CLI Cheat Sheet** - http://cheat.errtheblog.com/s/git - A list of many useful Git commands, with explanations - - **A Visual Git Reference** http://marklodato.github.io/visual-git-guide/index-en.html Describes several common Git commands, with diagrams to explain what each one does diff --git a/immutable-data.md b/immutable-data.md index 56be396..2c1aee2 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -1,15 +1,10 @@ ### Immutable Data - #### Basic Concepts - **Pros and Cons of Using Immutability With React** http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/ - Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts. - -- **Javascript and Immutability** - http://t4d.io/javascript-and-immutability/ - A description of how to properly immutably update objects and arrays using functions like assign and slice + Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts. - **Immutable Javascript using ES6 and Beyond** http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/ @@ -38,27 +33,22 @@ - **Immutable Data Structures and Javascript** http://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript In-depth article covering the value of immutable data, and two common JS libraries - - **Immutability is Not Enough** https://codewords.recurse.com/issues/six/immutability-is-not-enough A look at how using an immutable data approach doesn't magically prevent all bugs. - - **Javascript Array Methods: Mutating vs Non-Mutating** http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/ An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each. - - **Redux Docs: Immutable Update Patterns** https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns - Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific. + Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific. - **Immutably setting a value in a JS array (or how an array is also an object)** https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702 An example of how `Object.assign` can be used to immutably update an array - - **ReactCasts #9: Immutability in Javascript** https://www.youtube.com/watch?v=4LzcQyZ9JOU - A screencast discussing why immutability is important and its benefits. Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript. - + A screencast discussing why immutability is important and its benefits. Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript. - **Why Mutation Can Be Scary** http://alistapart.com/article/why-mutation-can-be-scary A detailed look at how JS objects and primitives behave in relation to mutability, how `Object.assign` works, and some alternative functions for merging objects. @@ -68,7 +58,6 @@ - **Immutability in React** http://www.sitepoint.com/immutability-react/ Covers the reasons and basic concepts of using immutable data with React - - **Why Should I Care About Immutable Data In React?** http://www.bennadel.com/blog/2903-why-should-i-care-about-immutable-data-in-reactjs.htm Describes the major benefits of using immutable data in React, with a demo @@ -80,14 +69,12 @@ - **Comparing and Modifying Objects in React** https://blog.komand.com/object-comparison-in-react-js-components Some examples of comparing objects inside of React's lifecycle methods, and how to update them properly. - - **Handling State in React: Four Immutable Approaches to Consider** https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5 A summary of four different ways to update state immutably - - **Immutability in React and Redux** https://medium.com/@nitishkr88/immutability-in-react-and-redux-7137f7b3197 - A good introduction to immutability concepts and practical usage. Covers how equality comparisons work in Javascript, reference comparisons vs deep quality checks, ways to avoid mutations, use of Immutable.js, and how to handle nested updates. + A good introduction to immutability concepts and practical usage. Covers how equality comparisons work in Javascript, reference comparisons vs deep quality checks, ways to avoid mutations, use of Immutable.js, and how to handle nested updates. #### Immutable Data Libraries @@ -98,51 +85,39 @@ - **List of immutable libraries** https://gist.github.com/jlongster/bce43d9be633da55053f A follow-up to James Longster's article, with pointers to numerous immutable data libraries - - **Redux Ecosystem Links: Immutable Data** https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md - A large list of libraries for managing immutable data in Javascript. Some of them are Redux-specific, but also includes many general-purpose immutable data libraries as well. - + A large list of libraries for managing immutable data in Javascript. Some of them are Redux-specific, but also includes many general-purpose immutable data libraries as well. - **Painless Immutability** https://guigrpa.github.io/2016/06/16/painless-immutability/ A somewhat opinionated article from the author of a new immutable data library comparing different options, but still well-written and informative about the pros and cons of each. - - **Immutable.js** http://seanamarasinghe.com/developer/immutable-js/ An introduction to the API and use cases for Immutable.js - - **How to use Immutable.js Records with React and Redux** https://medium.com/azendoo-team/immutable-record-react-redux-99f389ed676 Examples for using Immutable.js records for clarity and consistency of data management - - **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 - - **Using Ramda's `evolve` in Redux reducers to create new state** https://www.jernejsila.com/2017/02/25/using-ramda-evolve-redux-reducers-creating-new-state/ Some quick examples of how Ramda's API can be used for applying immutable data updates - - **How to Use Immutable.js in a React Redux Application** https://codebrahma.com/how-to-use-immutable-js-in-a-react-redux-application/ Answers to six common questions about why and how to use Immutable.js in a React/Redux app, including whether to keep everything as Immutable.js objects, whether to use it inside of components, and potential benefits of using Immutable.js - - **Immutable Deep State Updates in React with Ramda.js** https://vanslaars.io/post/setstate-lenses/ Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic - - **Why I Don't Use Immutable.js with Redux** https://medium.com/front-end-hacking/why-i-dont-use-immutable-js-with-redux-db05004f436 Thoughts on the pros and cons of using Immutable.js in a Redux app - - **Using Immutable.js with Redux** https://medium.com/front-end-hacking/using-immutable-js-with-redux-ba89025e45e2 - A follow-up to the previous article, with several examples of how to properly use Immutable.js with Redux - + A follow-up to the previous article, with several examples of how to properly use Immutable.js with Redux - **Should I use Immutable.js with Redux?** https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e A detailed list of pros and cons for using Immutable.js in a Redux app @@ -150,19 +125,15 @@ - **Practical Guide to using Immutable.js with Redux and React** https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2 A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux - - **Qim: Select from your Immutable JavaScript Cake and Update It Symmetrically Too** https://zapier.com/engineering/qim-immutable-javascript/ An in-depth look at a new lens-style immutable update utility called Qim, including what problems it helps solve and how to use it. - - **Lenses with Immutable.js** https://medium.com/@drboolean/lenses-with-immutable-js-9bda85674780 Discusses how "lenses" can be used to dig into data structures and update them in an immutable way, and how to define lenses that work on Immutable.js objects. - - **You're missing out on ImmutableJS Records** https://medium.com/@ahmadbamieh/immutablejs-records-bd369137da06 An introduction to the Immutable.js Record type, and how it can be used to define data types - - **Immutability through Mutability - Immer & Redux** https://medium.com/@Tetheta/immutability-through-mutability-immer-redux-3e14246c6506 - A look at Michel Weststrate's Immer library, which uses ES6 proxies to produce immutable updates using normal mutative code. Shows how this can simplify nested state updates in Redux reducers. \ No newline at end of file + A look at Michel Weststrate's Immer library, which uses ES6 proxies to produce immutable updates using normal mutative code. Shows how this can simplify nested state updates in Redux reducers. diff --git a/javascript-resources.md b/javascript-resources.md index 9d9808d..f1c5061 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -35,11 +35,7 @@ While this list is primarily focused on learning React and Redux, and generally - **Roadmap for Learning the Javascript Language** http://bytearcher.com/articles/roadmap-for-learning-javascript-language/ A suggested approach for how to learn Javascript. - -- **What Do I Need to Know to Ace a JavaScript Interview?** - https://github.com/adam-s/js-interview-review - Collected resources for studying Javascript and preparing for an interview - + - **Zero to One: How I Mastered Javascript and You Can Too** https://hashnode.com/post/zero-to-one-how-i-mastered-javascript-and-how-you-can-too-ciuwmrw9j00r50q539clhhdj7 An article describing how one person approached learning Javascript, with suggestions and advice to follow. @@ -54,12 +50,7 @@ While this list is primarily focused on learning React and Redux, and generally - **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 - -- **Front End Interview Preparation Guide** - https://github.com/Jobeir/front-end-interview-preparation-guide - A list of useful books, courses, and resources for learning JS, and links to interview questions and quizzes that would be beneficial in helping test out knowledge. - + 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 @@ -78,11 +69,7 @@ While this list is primarily focused on learning React and Redux, and generally - **The Modern Javascript Tutorial** http://javascript.info/ A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages. - -- **23 Free Javascript Books** - https://hackerlists.com/free-javascript-books/ - A list of many Javascript books available for free online. - + - **Rithm School Free Javascript Course** https://www.rithmschool.com/courses @@ -93,11 +80,7 @@ While this list is primarily focused on learning React and Redux, and generally - **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 - + - **DOM Enlightenment** http://domenlightenment.com/ A deep look at how to interact with the DOM from Javascript, without using a library or a framework. diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 32e5c08..ae0a270 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -28,10 +28,6 @@ https://www.youtube.com/watch?v=Aws40KOx90U A talk by MobX creator Michel Weststrate, describing MobX's concepts and usage -- **A MobX introduction and case study** - https://blog.wearewizards.io/a-mobx-introduction-and-case-study - An introduction to MobX, with examples showing how it works in a real app with Typescript - - **MobX First Impressions** https://benmccormick.org/2017/01/09/mobx-first-impressions/ A quick introduction to MobX's basic concepts and how it works @@ -54,10 +50,6 @@ #### Other -- **One awkward thing about MobX: Complex Models** - https://swizec.com/blog/awkward-thing-mobx-complex-models/swizec/7260 - Discussion of potential issues when handling complex models, and some possible workarounds. - - **MobX - Like React, but for Data** http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html Thoughts on MobX's core concepts, and how they relate to immutability, derived data, and observables. @@ -74,14 +66,6 @@ https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more. -- **Mobx React - Best Practices** - https://medium.com/@daniel.bischoff/mobx-react-best-practices-17e01cec4140 - Several tips for good use of MobX with React, including separating API calls from stores, injecting stores into components, using @computed, and more. - -- **The Curious Case of Mobx State Tree** - https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f - Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities. - - **MobX (with Decorators) in create-react-app** https://www.robinwieruch.de/create-react-app-mobx-decorators/ Covers how to use MobX in a CRA project, with and without decorators. @@ -109,11 +93,7 @@ https://hashnode.com/post/redux-vs-mobx-by-example-part-i-intro-and-exploring-redux-cito5m0nn0sssxi53c7zq7jpr https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228 Implementation of the same app using both Redux and MobX, and a final comparison of the approaches - -- **"How does MobX compare with Redux, and which is better for React app development?"** - 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. diff --git a/node-js-and-npm.md b/node-js-and-npm.md index 06e1c1f..1c6d338 100644 --- a/node-js-and-npm.md +++ b/node-js-and-npm.md @@ -28,10 +28,6 @@ NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slo http://www.bossable.com/1710/nodejs-package-path-for-windows/ Tips for dealing with various path problems -- **Pragmatic Modularity with Node** - http://mafintosh.com/pragmatic-modularity.html - Includes a description of Node's resolution algorithm for `require` - - **Node Hero: The Complete Node.js Tutorial** https://risingstack.com/resources/node-hero An ebook covering a variety of topics about using Node, including basic usage, NPM, Express, and building server applications. The ebook is free, but requires email registration to download. diff --git a/project-structure.md b/project-structure.md index d8fe2d8..673511f 100644 --- a/project-structure.md +++ b/project-structure.md @@ -22,10 +22,6 @@ https://twitter.com/dan_abramov/status/773912160896421889 Max Stoiber, creator of the popular "React-Boilerplate" starter kit, describes the approaches they use to lay out projects based on features. The Twitter thread has discussion on some tradeoffs, including understand that Redux actions are "global", not scoped. -- **Organizing Large React Applications** - http://engineering.kapost.com/2016/01/organizing-large-react-applications/ - Describes "File-Type First", "Feature First / Pods" approaches, as well as other related structure issues. - - **Four Strategies for Organizing Code** https://medium.com/@msandin/strategies-for-organizing-code-2c9d690b6f33 Describes "by component", "by toolbox", "by layer", and "by kind" approaches. @@ -76,11 +72,6 @@ http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/ Some useful suggestions for folder layout, folder naming, and import handling. -- **How OkCupid organizes its multi-page React App** - https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/ - https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/ - The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures. Some good follow-up discussion in the Reddit comments. - - **React Project Structure** https://daveceddia.com/react-project-structure/ An excellent article that gives practical advice for structuring the source of a React app, especially if you're a beginner or using `create-react-app`. diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index bf78c75..a2a4bc3 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -7,18 +7,10 @@ #### High-Level Comparisons and Business Cases -- **Using React is a Business Decision, Not a Technology Choice** - https://blog.formidable.com/using-react-is-a-business-decision-not-a-technology-choice-63c4641c5f7#.jsqybujyx - A higher-level, more business-case look at the pros of React - - **React: A Competitive Edge and a Business Decision** https://reactjs-tampabay-b63e2.firebaseapp.com/#/ A slideshow laying out a number of arguments for using React -- **React.js: The Good and the Bad** - http://techblog.trunkclub.com/javascript/2015/09/14/reactjs-the-good-and-the-bad.html - Some very good pros and cons based on experiences - - **One Year of React.js at Arkency** http://blog.arkency.com/2015/05/one-year-of-react-dot-js-in-arkency/ Thoughts on experience with using React @@ -55,10 +47,6 @@ http://engineering.teacherspayteachers.com/2017/08/02/why-we-chose-react-to-help-serve-millions-of-educators.html The Teachers Pay Teachers team describes why they chose React to rebuild their UI, including the small API size, size of the community, battle-tested capabilities, and more. -- **Why Redux is the Future of Angular 2 and React** - https://rangle.io/resources/why-redux-future-of-angular-react/ - A webinar video from Rangle.io, discussing the benefits of functional components and Redux for state management, and how Redux can be used with both React and Angular. - - **Justifying React to the Business** https://daveceddia.com/react-business-value/ Covers several reasons why using React is a good business decision, including ease of maintenance, long-term usefulness, and risk, with a summary of justifications. @@ -105,11 +93,7 @@ - **Use Redux before it's too late** https://medium.com/@ian.mundy/use-redux-before-its-too-late-a73d837a06aa A response to the "you may not need Redux" discussions, suggesting that it's worth using Redux because it changes how you think about your data. - -- **The Post-MVC Age** - https://news.realm.io/news/the-post-mvc-age/ - A conference talk (video and transcription) that discusses how building apps with components works, how to communicate between them, and how Flux/Redux and Reactive Programming differ from traditional MVC, - + - **Redux is the Pivotal Frontend Innovation** https://medium.com/@maxlynch/redux-is-the-pivotal-frontend-innovation-a406736552cb An opinionated article that says state management is even more important than components. @@ -128,7 +112,6 @@ - **What's So Great About Redux?** https://medium.freecodecamp.org/whats-so-great-about-redux-ac16f1cc0f8b - https://storify.com/acemarke/redux-pros-cons-and-limitations https://twitter.com/modernserf/status/886426115874717697 Deep and fascinating analysis of how Redux compares to OOP and message-passing, how typical Redux usage can devolve towards Java-like "setter" functions with more boilerplate, and something of a plea for a higher-level "blessed" abstraction on top of Redux to make it easier to work with and learn for newbies. Very worth reading. The author originally wrote a tweetstorm, which I captured in the Storify link, and wrote the blog post to expand on those thoughts. Finally, he followed up with a few more thoughts on abstract vs concrete examples in another shorter tweet thread. @@ -142,10 +125,6 @@ https://news.ycombinator.com/item?id=15158334 Comparisons between common React/Redux patterns, and how ClojureScript developers using the Reframe toolkit might solve the problems instead. Some decent discussion in the HN comments, including one comment that directly responds to the points in the original article, and discusses how React+Redux give you the power to solve the specific problems you're dealing with. -- **Why is React More Popular than Angular?** - https://javascriptreport.com/why-is-react-more-popular-than-angular/ - A look back at the announcements of React and Angular 2, thoughts on the respective paradigms, and how their popularity might change in the future. - - **Me on React: an old dog with new tricks** https://remysharp.com/2017/08/14/me-on-react-an-old-dog Remy Sharp, creator of JSBin, gives his thoughts and experiences learning React. Discusses tooling support, styled-components, server-side rendering, hot reloading, tradeoffs and abstractions, and more. @@ -252,7 +231,6 @@ similar structures in ClojureScript. - **"Why is everying in Javascript changing so fast?** https://news.ycombinator.com/item?id=11833301 - https://news.ycombinator.com/item?id=12760268 https://news.ycombinator.com/item?id=12758514 Yet another rant thread about Javascript churn, but with a couple very insightful comments about the unique complexities and challenges involved in writing applications for the web. @@ -320,10 +298,6 @@ similar structures in ClojureScript. ##### Prior Patents Discussion -- **Facebook Open Source License FAQ** - https://code.facebook.com/pages/850928938376556 - Official answers to questions about the meanings of license phrasing - - **Dan Abramov Twitter threads addressing patent concerns** https://twitter.com/dan_abramov/status/754992075087745024 https://twitter.com/dan_abramov/status/766210972776337408 diff --git a/react-ajax.md b/react-ajax.md index ee935ec..dc286b4 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -29,11 +29,7 @@ - **AJAX/HTTP Library Comparison** https://www.javascriptstuff.com/ajax-libraries A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. - -- **Loading data from APIs in React** - http://javascriptplayground.com/blog/2017/01/http-requests-reactjs/ - A 10-minute screencast that demonstrates how to create a component that fetches data from an API and renders it in a page. Covers how to use the React lifecycle to make requests, using the `fetch` API, and dealing with response successes and failures. - + - **3 Libraries and 3 Ways to handle AJAX in React Apps** https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/ Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries. @@ -44,11 +40,7 @@ #### Request Implementation Examples - -- **Implementing React Redux with GraphQL** - https://marufsarker.github.io/blog/2016/05/09/react-redux-with-graphql/ - Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions. - + - **Rendering Backend Requests with React** https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6 Describes a pattern for dealing with components that depend on loading data from a backend @@ -57,10 +49,6 @@ https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication Builds a React app that calls a remote API and authenticates users. Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable. -- **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets** - http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/ - A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI. - - **Handling AJAX In Your React Application with Agility** https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware @@ -84,14 +72,6 @@ https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. -- **Better data fetching with RemoteDataJS** - http://javascriptplayground.com/blog/2016/06/remote-data-js/ - Examples of how to use the author's RemoteDataJS library to manage request state. Helpful to see the list of states it tracks, even if you don't use the library. - -- **Dealing with APIs in React with ReactRemoteData** - http://javascriptplayground.com/blog/2017/03/remote-data-react-components/ - The author of the RemoteDataJS libraries shows a small React wrapper he created and how to use it - - **A Better Way To Handle Loading State In Redux** http://nikolay.rocks/2017-06-18-better-redux-loading Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches. Talks about Redux, but applies to React as well. \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index 85a482e..03efc71 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -170,11 +170,7 @@ - **You're Missing the Point of JSX** http://blog.andrewray.me/youre-missing-the-point-of-jsx/ Some arguments in favor of using JSX to define React UIs - -- **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. - + - **React/Redux - Best Practices and Gotchas** http://blog.getstream.io/react-redux-best-practices-gotchas Several useful tips for avoiding common pitfalls, structuring an application, and using various React-related tools @@ -182,11 +178,7 @@ - **React Best Practices** https://medium.com/@nesbtesh/react-best-practices-a76fd0fbef21 Suggestions and tips for effectively writing React and Redux - -- **5 Simple Tips for Your First React + Redux Project** - https://blog.preen.ly/5-simple-tips-for-your-first-react-redux-project-10cbb2727b9a - Good suggestions for managing state and structure, including using local component state when necessary, use of selector functions, and more. - + - **Writing a good React Component** https://medium.com/thoughts-from-travelperk/writing-a-good-react-component-59624ed40b8e Some very good best practices for writing components. @@ -282,10 +274,7 @@ - **State Architecture Patterns in React** https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6 https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89 - https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391 - https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a - A multi-part series that discusses several variations on component and state architecture in detail, with thoughts on the pros and cons of each. - + https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391 - **Three Example React Stacks** https://www.javascriptstuff.com/three-example-react-stacks diff --git a/react-component-composition.md b/react-component-composition.md index 069b47b..e86cd99 100644 --- a/react-component-composition.md +++ b/react-component-composition.md @@ -50,11 +50,7 @@ - **Annotations about React Higher-Order Components** https://blog.codeminer42.com/annotations-about-react-higher-order-components-e3561bc7c27a An explanation of what HOCs are, what they can be used for, and when to use them. - -- **Single-Prop HOCs - Better Composition in React** - 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 @@ -99,10 +95,6 @@ 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. -- **HOC in a nutshell** - http://coding4real.com/2017/12/23/hoc-nutshell-bonus-example/ - Describes how HOCs can be used to encapsulate reusable code, and demonstrates HOcs that help with route authentication and work with Redux. - - **Composing Higher-Order Components** https://medium.com/@caseymorrisus/react-composing-higher-order-components-hocs-3a5288e78f55 Gives examples of common use cases for HOCs, shows some example implementations, and demonstrates how to compose HOcs together. @@ -132,10 +124,6 @@ http://leoasis.github.io/posts/2017/03/27/react-patterns-render-callback An explanation of the "render callback" or "function as child" pattern, including concepts and example uses -- **Sharing stateful UI logic in React apps using Render Callback components** - https://trevordmiller.com/blog/react-render-callback-components - Examples of how to use the "render callback" / "function as a child" pattern to extract common logic for reuse. - - **Declarative Components in React** https://blog.echobind.com/declarative-components-in-react-b21ced9895b5 Demonstrates ways to make reusable flexible components using the "function as a child" pattern. diff --git a/react-component-patterns.md b/react-component-patterns.md index 3c150f3..44a8c7f 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -1,209 +1,196 @@ ### React Component Patterns **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](./react-implementation.md)**: Includes articles that explain the differences between "components", "elements", and "instances" - - + + - **[React Component Composition](./react-component-composition.md)**: Articles explaining ways to compose components, including Higher-Order Components, Function-as-Child / "render props", and other functional composition approaches - #### Component Terms, Concepts, and Types - **React Patterns** http://reactpatterns.com/ An excellent list of common patterns for structuring React components, with examples - + - **React Component Jargon as of August 2016** 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. - + - **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. - + - **Building User Interfaces with Pure Functions and Function Composition in React** https://tylermcginnis.com/building-user-interfaces-with-pure-functions-and-function-composition-in-react-js/ A look at the idea of composing together UIs with simple components, with comparisons to the idea of combining functions together. - + - **React Bits: React patterns, techniques, tips, and tricks** https://github.com/vasanthk/react-bits - An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource. - + An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource. + - **Simple React Patterns** http://lucasmreis.github.io/blog/simple-react-patterns/ A clearly written set of examples that showcase common React component patterns like "container/presentational", "Higher-Order Components", "Function-as-Child" / "render props", and "providers". - + - **React Component Patterns** https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82 A summary of common React component patterns with short examples. - + - **10 React mini-patterns** https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 Ten useful patterns for working with React components, including data flow, techniques for working with inputs, controlling CSS usage, switching between components, and more. - -- **React Training: Advanced React - React Patterns** - https://reacttraining.com/patterns/ - The lecture videos from React Training's "Advanced React" course. The videos themselves are now free. Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components. - + - **The Common Patterns of React** https://blog.pixelingene.com/2017/09/the-common-patterns-of-react/ A friendly visual overview of common React patterns like higher-order components, function-as-child, context, callbacks, container/presentational components, and compound components. - #### Component Definition Approach Comparisons - + - **How to use Classes and Sleep at Night** 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. - + - **React Stateless Functional Components: Nine Wins You Might Have Overlooked** https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc Thoughts on reasons why you might want to write more components using the functional syntax. - + - **7 Reasons to Outlaw React's Functional Components** - https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c - The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components. Some good discussion in the comments. - + https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c + The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components. Some good discussion in the comments. + - **How to declare React Components in 2017** https://medium.com/@npverni/how-to-declare-react-components-in-2017-2a90d9f7984c A quick overview of the three ways to declare React components, and which ones should be preferred. - + - **We Jumped the Gun Moving React Components to ES2015 Class Syntax** https://medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3 - A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments. - + A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments. #### Component Rendering Logic - **Dynamically Rendering React Components** https://wail.es/dynamically-rendering-react-components/ Examples of how to dynamically determine which React component to render - + - **Loading State Trick for Stateless Functional Components in React** http://kyleshevlin.com/loading-state-trick-for-stateless-functional-components-in-react/ An example of conditionally rendering a spinner component if a list of items is empty - + - **How to Dynamically Render React Components** http://kyleshevlin.com/how-to-dynamically-render-react-components/ A quick example of how to dynamically decide which component type to render - + - **All the Conditional Renderings in React** https://www.robinwieruch.de/conditional-rendering-react/ Examples of all the possible ways to conditionally render components - + - **"React render function organization"** https://gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3 My suggested approach for organizing render function logic for clarity and readability - + - **Simplify complex React components with generators** https://nvbn.github.io/2017/03/14/react-generators/ An interesting alternative to the usual if/else-type logic for conditionally rendering components, by using ES6 generators to yield the right pieces to render. - #### React Component Children - **Ownership and Children in React** http://ctheu.com/2015/02/10/ownership-and-children-in-reactjs/ Discusses the difference between "parent" and "owner" relationships, and what the `children` prop can look like. - + - **ReactCasts #3: React's Children API** https://www.youtube.com/watch?v=DJ53-G8EbxE A screencast demonstrating how the `children` prop to compose components together - + - **React.Children and the React Top-Level API** http://callahan.io/blog/2016/09/16/react-dot-children-and-the-react-top-level-api/ Overviews and examples of the `React.Children` APIs, and how they can be used to manipulate component children - + - **Send Props to Children in React** http://jaketrent.com/post/send-props-to-children-react/ Examples of how to pass new props to child components using `React.Children` - + - **A deep dive into children in React** http://mxstbr.blog/2017/02/react-children-deepdive/ - An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified. Includes several examples and demos. - + An in-depth look at the power and capabilities of React's `children` prop, and how children can be reused and modified. Includes several examples and demos. + - **The "Forwarded Refs" pattern** https://github.com/reactjs/react-redux/pull/270#issuecomment-175217424 An example of the "forwarded refs" pattern, where a parent component passes a callback through one or more layers of children, it's used as a `ref` callback, and the parent receives the nested DOM element reference directly. - + - **React component composition cheatsheet** https://github.com/xat/react-component-composition-cheatsheet A useful list of ways to combine components together - + - **Avoiding deeply nested component trees** https://medium.com/@RubenOostinga/avoiding-deeply-nested-component-trees-973edb632991 Examples of `children` to include arbitrary content inside of a component for more flexible handling of presentation and composition. - + - **Tips on Creating Reusable Components** http://dylanpaulus.com/reactjs/2017/09/08/tips-on-creating-reusable-components.1/ Examples of using `children` and other props to make components more composable and reusable. - + - **How to auto bind props using React elements** http://www.albertgao.xyz/2017/10/28/how-to-auto-bind-props-by-using-react-element/ Examples of using the `React.Children` API to add additional props to child components - + - **React sub-components** https://itnext.io/react-sub-components-513f6679abed Demonstrates defining "sub-components" like `Article.Title`, and using `React.Children` to ensure they're composed correctly. - #### React Component Lifecycle - **React Docs: Component Specs and Lifecycle** https://reactjs.org/docs/react-component.html The official React docs page on component lifecycle - + - **React 16.3+ Interactive Lifecycle Methods Diagram** http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ https://twitter.com/dan_abramov/status/981712092611989509 - An excellent interactive diagram that shows the sequence of lifecycle methods in React 16.3+, and how they relate to React's "render" and "commit" update phases. Based on a diagram by Dan Abramov. - + An excellent interactive diagram that shows the sequence of lifecycle methods in React 16.3+, and how they relate to React's "render" and "commit" update phases. Based on a diagram by Dan Abramov. + - **Understanding the React Component Lifecycle** http://busypeoples.github.io/post/react-component-lifecycle/ A good look at which lifecycle methods run in which situations, as well as the signatures of each method. - + - **Dissecting React Lifecycle Methods** https://medium.com/@fay_jai/dissecting-reactjs-lifecycle-methods-be4fdea11c6d Breaks the lifecycle methods down into "mount/unmount" and "update" categories, and describes the purpose and use of each. - + - **The React Component Lifecycle** https://www.kirupa.com/react/component_lifecycle.htm Another useful description of the order and purpose of the lifecycle methods. - + - **Understanding React - Component life-cycle** https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d An extensive description of the various React lifecycle methods, and how you should and shouldn't use them. - + - **Lifecycle Simulators** https://reactarmory.com/guides/lifecycle-simulators An interactive set of simulators for React components that let you step through a component's lifecycle and watch how state and props respond to actions over time. - + - **React In-Depth: The React Life Cycle** https://developmentarc.gitbooks.io/react-indepth/content/ A deep dive into the lifecycle methods, and various techniques for using them. - + - **React Lifecycle Cheatsheet** https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9 A table listing the lifecycle methods, when they're called, whether each method allows side effects or state updates, and examples uses for each method - + - **React Lifecycle Methods - how and when to use them** https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call `setState` inside. - + - **Revisiting use of React's Component Lifecycles in Anticipation of Async Rendering** https://medium.com/@awebofbrown/how-to-safely-use-reacts-life-cycles-with-fiber-s-async-rendering-fd4469ebbd8f An informative look at how async rendering in React 16+ might impact current use of lifecycle methods for behavior. - #### Component Communication @@ -214,261 +201,235 @@ - **How to communicate between React components** http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/ Another good list of component communication strategies - + - **How React Components Communicate** http://react.tips/how-reactjs-components-communicate/ A careful tutorial-based explanation of how to communicate between parent and child components. - + - **How to handle React context in a reliable way** https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc Covers what the `context` feature is, how to use it, and some concerns to be aware of. - + - **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 - + - **Context All the Things with React** https://www.youtube.com/watch?v=k9AhBMwj1w4 A talk on what `context` is, and how to use it safely - + - **ReactCasts #4-5: Context (Parts 1 and 2)** https://www.youtube.com/watch?v=lxq938kqIss https://www.youtube.com/watch?v=mwYHDXS6uSc - A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it. - + A two-part series explaining what React's `context` feature can be used for, and some potential concerns to be aware of when using it. + - **React Context and Component Coupling** https://medium.com/differential/react-context-and-component-coupling-86e535e2d599 Discussion on the pros and cons of using `context` to pass data between components, and some examples of how to do so - + - **Higher Order With Context** https://dev.to/kayis/higher-order-with-context - https://dev.to/kayis/higher-order-components-and-context-example + https://dev.to/kayis/higher-order-components-and-context-example Examples of using Higher Order Components to pass data to nested components using `context` - -- **Context in React Applications** - http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/ - An overview of what `context` is, how it works, and when you should use it for passing data - + - **Callback functions in React** https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766 Some basic explanations of how a React app uses callback functions to communicate from children to parents - + - **How to use React's Provider pattern** https://www.robinwieruch.de/react-provider-pattern-context/ Walks through the concepts and implementation of a "Provider" component that makes data available to deeply nested children, similar to the ones that come with Redux and MobX - + - **Passing Data Between React Components** https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17 Some short examples of how to pass data between parents, children, and siblings. - + - **How to structure components in React?** https://reallifeprogramming.com/how-to-structure-components-in-react-54fc43e71546 Compares multiple ways to pass data from a parent to a child, including no props, passing a value object, passing required props, passing a map of props, and using `children`. - + - **Context 101** http://reactboston.surge.sh/#/ Slides from Ken Wheeler's ReactBoston talk on React's `context` feature. Covers what context is, why you might want to use it, and when/ how to use it/ - -- **React's new Context API** - https://dev.to/kentcdodds/reacts--new-context-api-dpi - Kent C Dodds digs into the new context API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using context. - + - **Bitmasks and the new React Context API** https://hph.is/coding/bitmasks-react-context An explanation of how the new version of context works, and how change updates can be optimized using a bitmasking approach. - + - **Exploring the React Context API with Provider and Consumer** https://www.robinwieruch.de/react-context-api/ Explains the use cases for the new context API, and demonstrates how to use it both by itself and wrapped in a higher-order component. - + - **React's new Context API and Actions** https://dev.to/washingtonsteven/reacts-new-context-api-and-actions-446o Shows how to update values being passed through context, and particularly how to pass down functions that can be used to update the values. - + - **Understanding the React Context API** http://joecortopassi.com/articles/react-context-api/ - Simple breakdown of how to use the React Context API, with code samples and diagrams. - - + Simple breakdown of how to use the React Context API, with code samples and diagrams. #### Component Categories - **Presentational and Container Components** https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 - Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React. - + Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React. + - **"People are reading way too much into 'presentational' vs 'container'"** https://twitter.com/dan_abramov/status/802569801906475008 Dan Abramov follows up his article by emphasizing that "presentational" and "container" was just a pattern he had noticed, rather than an approach that _must_ be followed - + - **Leveling Up with React: Container Components** https://css-tricks.com/learning-react-container-components/ Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data. - + - **Smart and Dumb Components in React** http://jaketrent.com/post/smart-dumb-components-react/ Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts. - + - **Ramblings About React and Redux Architecture** https://medium.com/@kurtiskemple/ramblings-about-react-and-redux-architecture-c27dfff79ddf Thoughts on structuring components as "Providers", "Behavior", and "Presentational" - + - **The Anatomy of a React Redux App** 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" - + - **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. - + 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. + - **Refactoring React - Extracting Layout Components** http://erikaybar.name/refactoring-react-extracting-layout-components/ Demonstrates creating reusable components that manage some aspects of styling and layout, such as a button with multiple sizes and colors. - + - **Share Code between React and React Apps** https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665 - An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse, including reusing the same components in both React and React Native apps. - + An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse, including reusing the same components in both React and React Native apps. + - **Reusable state for React UI components** https://medium.com/@efreyreg/reusable-state-for-react-ui-components-e38c5af40be4 - An example of taking a component that has both state, logic, and presentation, and extracting the logic and presentation into separate components. Also demonstrates using a Redux-like approach to update logic without actually using Redux. - -- **Extracting Logic from React Components** - https://javascriptplayground.com/blog/2017/07/react-extracting-logic/ - Demonstrates taking a component that includes some logic for formatting a value, and refactoring it to extract out the formatting logic into separate functions. + An example of taking a component that has both state, logic, and presentation, and extracting the logic and presentation into separate components. Also demonstrates using a Redux-like approach to update logic without actually using Redux. - **Refactoring React** https://8thlight.com/blog/josh-mccormick/2017/08/21/refactoring-react.html Demonstrates extracting state and logic out of a component to separate responsibility and improve ease of testing. - + - **How do you separate React components?** https://reactarmory.com/answers/how-should-i-separate-components Describes four categories of React components ("view", "control", "controllers", and "containers"), and gives suggestions on when and how to factor out new components. - + - **Refactoring: Moving API calls to a higher-order component** https://medium.com/@guigonc/refactoring-moving-api-calls-to-a-higher-order-component-53062c086cb Shows how to progressively refactor fetching logic out of a component and move it into a parent component, then make that parent component reusable. - + - **The React + Redux Container Pattern** https://dev.to/sophiedebenedetto/the-react--redux-container-pattern-bmk An excellent explanation of what "container components" and "presentational components" are, with discussion of how they fit together and a good sample project implementing the ideas. - - - #### Wrapping Non-React Code - **React and third-party libraries** http://krasimirtsonev.com/blog/article/react-third-party-library-integration Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin - + - **Declaratively Rendering Earth in 3D, Part 2: Controlling Cesium with React** http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-2-cesium-react/ A detailed description of how to create React components that wrap up a 3D globe library, including use of lifecycle methods for controlling imperative non-React APIs. - + - **When to use Ref on a DOM Node in React** https://www.robinwieruch.de/react-ref-attribute-dom-node/ An explanation of the `ref` property, how to use it to access real DOM nodes, and when you should use it. - + - **Using React and jQuery Together** http://tech.oyster.com/using-react-and-jquery-together/ Examples of how to use jQuery inside a React component, and React inside jQuery-controlled elements - -- **Using React and PixiJS** - http://www.rinconstrategies.io/using-react-and-pixijs.html - Demonstrates how to use React's component lifecycle methods to control the imperative PixiJS API - + - **Mapping declarative React components to imperative external APIs** http://reactkungfu.com/2016/02/mapping-declarative-react-components-to-imperative-external-api/ A quick example of using `componentWillReceiveProps` to pass updates to an imperative API - + - **How to Write a Google Maps React Component** https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ Demonstrates how to wrap a third-party component that has an imperative API, lazy-loading the dependencies, and more. - + - **Building SVG Maps with React** https://blog.komand.com/building-svg-maps-with-react Demonstrates building a component that zooms and pans SVG graphics based on user input. - + - **How to Sprinkle ReactJS into an Existing Web Application** https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery. - + - **How to Use jQuery Libraries in the React Ecosystem** https://medium.com/@superKalo/how-to-use-jquery-libraries-in-the-react-ecosystem-7dfeb1aafde0 Some excellent examples of using React components to wrap up jQuery plugins: creating the plugin instance, updating the plugin from React props, and destroying the plugin on unmount. - + - **Introducing React into an Existing Application** https://medium.com/nthrive-analytics/introducing-react-into-an-existing-application-17490841796e Some examples of how to progressively add React components into an existing jQuery-based application and keep them in sync with the rest of the app. - + - **How to use D3.js in React** http://cmichel.io/how-to-use-d3js-in-react/ An overview of three ways to integrate D3 into a React app: using React to render, using D3 to render, and a hybrid approach. - + - **Renderless Components, or How Logic Doesn't Always Need a UI** http://kyleshevlin.com/renderless-components/ Shows how you can create components that return null from `render`, and use React's lifecycle methods to drive imperative logic rather than rendering UI. - + - **Getting Started with React and Leaflet** https://www.azavea.com/blog/2016/12/05/getting-started-with-react-and-leaflet/ Examples of how to create React components that interact with the Leaflet maps library. - + - **How (and why) to use D3 with React** https://hackernoon.com/how-and-why-to-use-d3-with-react-d239eb1ea274 A good overview of some of the libraries and approaches you can make use of to use D3 in a React app - + - **Integrating React with an Existing jQuery Web Application** http://www.primaryobjects.com/2017/05/08/integrating-react-with-an-existing-jquery-web-application/ Covers 3 methods for methods for integrating React and jQuery: referencing jQuery from within React, using a helper class passed to React, and using a pub-sub model passed to React. - + - **Building D3 Components with React** https://hackernoon.com/building-d3-components-with-react-7510e4743288 A detailed walk through custom integration of D3 and React without use of an additional library. - + - **PixiJS Application in a React Component** https://www.protectator.ch/post/pixijs-v4-in-a-react-component A quick example of loading PixiJS and wrapping it in a React component, showing the basics for integration. - -- **React components as jQuery plugins** - https://swizec.com/blog/using-react-in-the-real-world/swizec/6710 - Demonstrates how to wrap up a React component as a jQuery plugin for integration with non-React apps. - + - **Using D3 and React Together to Make Visualizations with TypeScript** https://spin.atomicobject.com/2017/07/20/d3-react-typescript/ Examples of some possible approaches to using D3 inside of React, including use of refs and components. - + - **Wrapping Web Components With React** https://www.sitepen.com/blog/2017/08/08/wrapping-web-components-with-react/ A detailed walkthrough of how to create React components that wrap up existing web components, including managing props, handling events, and keeping the DOM in sync. - + - **How to integrate React into an existing app?** https://reactarmory.com/answers/how-to-integrate-react-into-existing-app Looks at ways to add React to an existing page, even if there's no build step. - + - **Integrating Imperative APIs into a React application** https://medium.com/netflix-techblog/integrating-imperative-apis-into-a-react-application-1257e1b45ac6 A higher-level discussion of how to design declarative React components that encapsulate imperative APIs. - + - **Bringing Together React, D3, and Their Ecosystem** https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/ - An extensive article that looks at common D3 wrapper patterns and libraries, approaches for using D3 inside of React, and React-specific D3 libraries, and gives some suggestions for how to decide which approach and library to use for your project. - + An extensive article that looks at common D3 wrapper patterns and libraries, approaches for using D3 inside of React, and React-specific D3 libraries, and gives some suggestions for how to decide which approach and library to use for your project. #### 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. - + 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 @@ -476,83 +437,80 @@ - **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 - + - **Modal window in React from scratch** https://peteris.rocks/blog/modal-window-in-react-from-scratch/ Walks through creating a Modal component with styling and display logic - + - **React Modals** https://medium.com/@danparkk/react-modals-scalable-customizable-neat-components-f2088d60f3d3 An extended discussion of what concepts are involved in creating modals in web pages, why this can become complex, and how to implement them in a scalable way using React and Redux. - + - **Tasks and Portals in React** https://medium.com/@MoneyhubEnterpr/tasks-and-portals-in-react-1df2438cdebb Describes how MoneyHub implemented modal dialogs with wizard-like workflows that tie together multiple screens, using a combination of container components and portals. - + - **Good React Modals** https://medium.com/@elsdoerfer/good-react-modals-548cd9c2f7f4 Covers ways to handle issues with modal content not being rendered while doing animations, and side-loading data for a modal while maintaining a loading indicator. - + - **Using a React 16 Portal to do something cool** https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202 Demonstrates using React 16's `createPortal` API to control a separate browser window from the original React component tree. - - + #### Alternate Component Creation Approaches - **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. Not the common approach, but an interesting idea. - + Describes an alternate approach to writing components using factory functions to eliminate the need for the `this` keyword. Not the common approach, but an interesting idea. + - **my-react** https://github.com/mjackson/my-react A small library from Michael Jackson (co-creator of React Router) that allows defining components using a Python-style approach where functions receive the component instance as the first argument. - + - **lively** https://github.com/jlongster/lively An experimental library from James Long that tries to improve React's component API to avoid using classes - #### Other Component Patterns - **The React Controller View Pattern** http://blog.andrewray.me/the-reactjs-controller-view-pattern/ Describes using top-level components to hold state and pass it to children as props - + - **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 - + - **"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 - + - **On Privacy with React Context** https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509 Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues. - + - **Internationalizing React Apps** https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/ An extended investigation of server and client aspects needed for internationalization. - + - **Creating a cross-domain React component with xcomponent** https://medium.com/@bluepnume/creating-a-cross-domain-react-component-with-xcomponent-fbcccc4778fd A look at how to wrap a React component using the xcomponent library, so that it can be rendered and used across domains. - + - **Using React v16 to create self-destructing components** 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. - + 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. + - **You don't need to know "Dependency Injection"** https://hackernoon.com/you-dont-need-to-know-dependency-injection-2e9d2ba1978a Looks at the concept of dependency injection, and three ways that that relates to React components and props. - diff --git a/react-deployment.md b/react-deployment.md index 5d16c65..35a131a 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -43,10 +43,6 @@ https://daveceddia.com/multiple-environments-with-react/ Discusses strategies for handling deployments to dev/staging/prod-type environments, including configuration of API endpoints and feature flags. -- **Deploy a React app with SASS using Nginx** - http://zabana.me/notes/build-deploy-react-app-with-nginx.html - Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app. - - **How to deploy a React application: an in depth overview of various options to deploy** https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/ A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app. diff --git a/react-forms.md b/react-forms.md index 3673de6..e0f9a88 100644 --- a/react-forms.md +++ b/react-forms.md @@ -84,11 +84,7 @@ - **Forms in React and Redux** https://x-team.com/blog/tutorial-forms-in-react-and-redux/ Demonstrates building a simple set of wrapper components to manage forms using React and Redux - -- **Not-so-simple Forms with React** - http://www.randseay.com/articles/forms-with-react - 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 Describes how to manage data for forms using React component state and some wrapper components. @@ -152,11 +148,7 @@ - **Elegant Form Validation in React** https://spin.atomicobject.com/2016/10/05/form-validation-react/ Examples of adding validation to a form - -- **Two-Way Data Binding and Form Validation in React** - https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176 - Another demonstration of building a form with some logic and validation. - + - **Form Validation as a Higher Order Component** https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0 https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d @@ -185,10 +177,6 @@ #### Other -- **Creating new fields and widgets for Mozilla's react-jsonschema-form** - https://jeffersonheard.github.io/2016/11/creating-new-fields-and-widgets-for-mozillas-react-jsonschema-form/ - Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types - - **List or Form, why not both? Making a list with a built in editor in React** http://web.archive.org/web/20161214145219/http://thereactionary.net/list-or-form-why-not-both-making-a-list-with-a-built-in-editor-in-react/ Builds an example of a list with the ability to do inline editing of items. diff --git a/react-implementation.md b/react-implementation.md index e1a619f..ea1664d 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -100,19 +100,11 @@ - **React.js Reconciliation** https://www.infoq.com/presentations/react-reconciliation A video presentation digging into how React's reconciliation algorithm determines how to properly update nodes based on render output. - -- **React Source Code Annotations** - https://annot.io/github.com/facebook/react - Crowdsourced annotations and descriptions for files in the React codebase - **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. - -- **React Implementation Notes** - https://facebook.github.io/react/contributing/implementation-notes.html - An in-depth explanation of how React's current internal algorithms work - + - **Dive Into React Codebase: Transactions** http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/ A deep dive into the implementation of React's internal "transactions" concept diff --git a/react-native.md b/react-native.md index b40aca8..6fd1264 100644 --- a/react-native.md +++ b/react-native.md @@ -26,11 +26,7 @@ - **Build a Coffee Finder App with React Native and the Yelp API** https://appendto.com/2016/11/build-a-coffee-finder-app-with-react-native-and-the-yelp-api/ A tutorial that covers building an IOS app that fetches data, organizes views, and displays the data on a map. - -- **How to distribute React Native components backed by native code** - https://www.benwixen.com/articles/distributing-react-native-components-with-native-code/ - A project layout for redistributable components with native code, that includes unit tests and supports automatic linking. - + - **Build an Imgur Client with React Native and MobX** https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250 A tutorial that demonstrates build an RN app with MobX for state management, use of RESTful APIs, full-screen images in a ListView, and detection of device orientation diff --git a/react-performance.md b/react-performance.md index 06a139f..531b5c1 100644 --- a/react-performance.md +++ b/react-performance.md @@ -6,7 +6,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) #### React Components - **React Docs: Performance** - https://facebook.github.io/react/docs/advanced-performance.html https://facebook.github.io/react/docs/perf.html The React doc pages on performance. Describes the core concepts, including shouldComponentUpdate, using immutable data, and the Performance API for benchmarking. @@ -14,12 +13,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578 An excellent article Ryan Florence that pushes back against the "creating functions in render is slow" conventional wisdom in the React community. This article is a must-read discussion on React performance. -- **Performance Engineering with React** - http://benchling.engineering/performance-engineering-with-react/ - http://benchling.engineering/deep-dive-react-perf-debugging/ - https://news.ycombinator.com/item?id=11036007 - A 2-part series on React performance. Excellent information. Goes in-depth on use of the Perf API, shouldComponentUpdate, shallow equality, and how to properly profile components. Highly recommended. Further useful discussion in the HN comment thread. - - **Respectable React Components** http://kelle.co/react-perf-slides/ A slideshow that walks through the core concepts of managing good React performance. @@ -95,11 +88,7 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://bvaughn.github.io/forward-js-2017/#/ https://youtu.be/t4tuhg7b50I An excellent talk on performance topics from Brian Vaughn, a React core team member and author of the React-Virtualized library. Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists. - -- **React Component Profiling** - https://blog.yld.io/2016/11/25/react-component-profiling/ - Tips on using the new browser devtools integration capability in React 15.4 to track component performance. - + - **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 @@ -142,18 +131,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://flexport.engineering/ending-the-debate-on-inline-functions-in-react-8c03fabd144 Discusses several aspects of improving React rendering performance, including tips for ensuring your codebase is ready to use `PureComponent`. Has a link to further discussion on HN. Part 2 describes how they built a library called `mutation-sentinel` to detect accidental mutations, and Part 3 covers a Babel plugin for optimizing inline functions in render methods. -- **Introducing react-wastage-monitor** - https://blog.listium.com/introducing-react-wastage-monitor-404565d679b2 - Describes a number of common perf issues in React apps, and how the react-wastage-monitor library can be used to detect them - - **Infinite List and React** http://itsze.ro/blog/2017/04/09/infinite-list-and-react.html A Twitter developer describes some of the challenges they faced in building a performant infinite scrolling list component - -- **React Performance Anti-Pattern: Creating Functions in `render()`** - https://medium.com/@erikras/react-performance-anti-pattern-creating-functions-in-render-ddeb5ebd2933 - Describes why creating functions inside of `render()` is bad for perf, specifically in relation to optimization and prop reference comparisons, and offers several alternate patterns as solutions. - + - **Memoize React components** https://medium.com/@planttheidea/memoize-react-components-33377d7ebb6c Discusses the basic ideas of memoization, and shows how they can be applied to wrapping React components using the `moize` library (or other memoization libraries). diff --git a/react-redux-testing.md b/react-redux-testing.md index 470cf98..725210d 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -39,11 +39,7 @@ - **Testing React components with Jest and Enzyme** https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f Examples of how to use Jest's snapshot testing and Enzyme's component API to write component tests - -- **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 - + - **The Right Way to Test React Components** https://medium.com/@suchipi/the-right-way-to-test-react-components-548a4736ab22 Excellent advice on how to determine a component's "contract", what aspects of that are worth testing, and how to approach testing that contract. @@ -128,11 +124,7 @@ - **React and Redux Testing with Jest: How Some Jokers Learned to Take Snapshots** https://dev.bleacherreport.com/react-and-redux-testing-with-jest-how-some-jokers-learned-to-take-snapshots-c186c7e419e6 Discussion of how Jest snapshot tests can be used to replace some manually-written tests for both React components and Redux logic. - -- **A Practical Guide to Testing React Apps** - http://acco.io/a-practical-guide-to-testing-react-apps/ - An excellent, comprehensive guide to React testing, covering some of the major tools, types of tests, how to write good React tests, and more. - + - **Testing React Components** https://nerdblog.pl/post/166842840969/testing-react-components An extensive look at different ways to test React components using the Enzyme library. Discusses Enzyme's shallow and full rendering methods, methods to inspect the contents of a component, and different forms of tests like snapshots, rendering tests, and behavior tests. @@ -140,19 +132,11 @@ - **Creating a React Component using TDD** 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. - + - **Implementing basic Component tests using Jest and Enzyme** https://hackernoon.com/implementing-basic-component-tests-using-jest-and-enzyme-d1d8788d627a Describes the Jest and Enzyme tools, how they're used for testing React components, and gives examples of some simple tests. - -- **Snapshot testing React Components with Jest** - https://medium.com/@lukepierotti/snapshot-testing-react-components-with-jest-744a1e980366 - Covers the basics of snapshot testing, and how it can be used to test React components to ensure the rendering is consistent. - + - **Testing React Components** https://medium.com/@skidding/testing-react-components-30516bc6a1b3 Thoughts on good practices for testing React components, based on writing thousands of tests. Describes complexities in testing real-world components that make use of multiple HOCs or that glue different units together, and how the Cosmos tool can help simplify those tests using mocking. @@ -164,11 +148,7 @@ - **Unit test code that uses CSS Modules** https://medium.com/@a_eife/unit-test-code-that-uses-css-modules-ef5b49efc707 Provides several solutions for handling imports of CSS Modules when running unit tests - -- **Testing React components using render props** - https://dev.to/kentcdodds/testing--components-using-render-props-1f00 - Kent C Dodds gives several examples and suggestions of approaches for testing components that make use of render props. - + - **Lessons learned testing React & Redux apps with Jest and Enzyme** https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested. @@ -185,12 +165,6 @@ https://itnext.io/acceptance-test-driven-test-with-react-redux-part-1-7ae8cb4fab00 A multi-part tutorial series that walks through creating and refactoring a React/Redux application using an Acceptance Test Driven Development approach. -- **React Testing Tutorial: Test Frameworks & Component Tests** - https://www.robinwieruch.de/react-component-tests-tutorial/ - An excellent in-depth guide that walks through writing unit, integration, and end-to-end tests using common React test frameworks and tools like Mocha, Enzyme, Sinon, Jest, Coveralls, and Cypress.io. - - - #### Redux - **Simple React/Redux Testing** @@ -214,11 +188,7 @@ - **Unit Testing Redux Container Components** https://web.archive.org/web/20161105110913/http://pebblecode.com/blog/testing-redux-containers/ Demonstrates techniques for properly testing Redux-connected React components using a mock store - -- **Testing React and Redux** - http://silvenon.com/testing-react-and-redux/ - A three-part article that shows how to set up Ava and Babel, then walks through testing Redux code (action creators, reducers, selectors, thunks, and sagas), and React components. - + - **Unit Testing React Components that use Redux** http://www.thereformedprogrammer.net/unit-testing-react-components-that-use-redux/ Tips on unit testing components that render more Redux-connected components @@ -255,15 +225,7 @@ https://medium.com/@kilkelly/simplify-your-redux-unit-tests-using-tape-ad391aecf446 https://github.com/kilkelly/tape-redux-unit-testing Some quick examples of using the Tape library to test Redux reducers, with an accompanying example repo - -- **Unit Testing Redux Container Components, Part 1** - http://www.wsbrunson.com/react/redux/test/2016/05/08/testing-redux-containers.html - Some useful tips for setting up tests for Redux-connected components - -- **Code Review: SPA testing with React and Redux** - https://b3ntly.github.io/blog/code-review-spa-testing-with-react-and-redux-long/ - A variety of useful observations and suggestions for testing React+Redux code, including good practices for structuring test setup - + - **Test Your Redux Container with Enzyme** https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec Examples for using Enzyme to test Redux-connected components, including passing in a mock store, use of shallow rendering, and testing `mapDispatch`. @@ -312,10 +274,6 @@ https://hackernoon.com/how-to-snapshot-test-everything-in-your-redux-app-with-jest-fde305ebedea Detailed examples of how to test React components, Redux reducers, connected components, and selectors using Jest snapshot tests. -- **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. @@ -328,10 +286,6 @@ https://medium.com/@lukepierotti/unit-testing-redux-connected-components-692fa3c4441c Discusses testing connected components with a mock store vs testing `mapState` functions and plain components separately. -- **How to Test Your Redux App** - https://www.wix.engineering/single-post/2017/12/27/How-to-Test-Your-Redux-App - Discusses tradeoffs and examples of writing tests for "simple" functions, and how to approach writing integration tests for connected components. - - **Interview: redux-saga-test-plan** https://survivejs.com/blog/redux-saga-test-plan-interview/ An interview with the author of the redux-saga-test-plan library, discussing how it works and how it can simplify the process of testing sagas. @@ -394,11 +348,7 @@ http://randycoulman.com/blog/2016/03/22/testing-with-mocha-and-webpack/ http://randycoulman.com/blog/2016/04/05/more-on-testing-with-mocha-and-webpack/ Some excellent information on setting up a good test environment, including use of the mocha-webpack tool. - -- **Testing with Webpack 2, inject-loader, Karma, Mocha, Chai, and More** - 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 - + - **ESLint Part 1: Exploration** https://blog.scottnonnenberg.com/eslint-part-1-exploration/ A solid look at what ESLint is, how you can use it to help keep your code clean, and a number of useful linting plugins that are available. @@ -411,11 +361,7 @@ - **UI Testing at Urban Airship** https://github.com/urbanairship/technical-blog/blob/master/AirshipUITesting.md In-depth discussion of complexities and approaches for testing real-world UI code, including test runners, mocking, and more. - -- **Migrating to Jest** - https://medium.com/@kentcdodds/migrating-to-jest-881f75366e7e - Kent C. Dodds describes why and how his team at Paypal switched their test setup to use Jest instead of Ava. - + - **Testing with Jest Snapshots: First Impressions** http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/ Description of the pros and cons of using Jest's new Snapshot Testing feature diff --git a/react-routing.md b/react-routing.md index 2076377..8bb3c50 100644 --- a/react-routing.md +++ b/react-routing.md @@ -66,19 +66,11 @@ - **Introduction to React Router** https://dev.to/aurelkurtula/introduction-to-react-router-ha A quick look at the basics of React-Router v4. - -- **React Router DOM, plain and simple** - http://coding4real.com/2017/12/19/using-react-router-dom/ - An introduction that shows how to add React-Router to a basic React app, and describes the basic API. - + - **React Router v4: The Complete Guide** https://www.sitepoint.com/react-router-v4-complete-guide/ A detailed tutorial that covers the React Router v4 API and concepts, with many examples -- **React Router v4: Philosophy and Introduction** - https://tylermcginnis.com/react-router-philosophy-introduction/ - A deep look at the history of React Router, and how v4 works as "just components". - - **Server Rendering, Code Splitting, and Lazy Loading with React Router v4** https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70 Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel. @@ -153,10 +145,6 @@ 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. -- **Role-based authorization using React-Router** - http://frontendinsights.com/role-based-authorization-using-react-router/ - A look at some ways to control component routes based on user roles - - **Role based authorization in React** https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4 Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering diff --git a/react-server-rendering.md b/react-server-rendering.md index 91b29c0..9f89452 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -62,11 +62,6 @@ https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/ Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive. - -- **Simple declarative Redux state with React Router 4 server side rendering** - https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d - Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. - - **Server-side rendering with create-react-app** https://medium.com/@cereallarceny/server-side-rendering-with-create-react-app-fiber-react-router-v4-helmet-redux-and-thunk-275cb25ca972 Demonstrates how to set up server-side-rendering with a standard CRA project to allow proper meta tags to be added without having to eject. Includes sample code for creating an Express app that does the work. @@ -82,13 +77,7 @@ - **Scaling React Server-Side Rendering** http://arkwright.github.io/scaling-react-server-side-rendering.html A long, detailed look at how a team implemented React+Redux SSR on top of an existing monolithic application. Includes discussion of many real-world issues experienced, such as load balancing and component caching. - -- **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 - 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. diff --git a/react-styling.md b/react-styling.md index 56f2071..71f1958 100644 --- a/react-styling.md +++ b/react-styling.md @@ -62,11 +62,7 @@ - **Component Based Style Reuse** https://www.youtube.com/watch?v=_70Yp8KPXH8 Pete Hunt talks about various approaches to defining styles for components in plain CSS and in React - -- **Patterns for Style Composition in React** - http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/ - Some great suggestions for defining reusable React components that can have variations in styling - + - **Functional CSS From A Pure UI Perspective** https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc Thoughts on various ways to compose classes and styles together. @@ -90,10 +86,6 @@ https://www.javascriptstuff.com/css-modules-by-example/ A set of 7 examples demonstrating ways to use CSS modules. -- **Elephants, The Three Code Ilities, & Two Months With CSS Modules** - http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/ - A look at how Lystable used CSS Modules to scale their codebase. - - **Functional CSS - The Good, The Bad, and Some Protips for React.js Users** https://github.com/chibicode/react-functional-css-protips An essay describing the "functional CSS" approach, pros and cons of using it, and tips for using that approach with React. @@ -208,15 +200,7 @@ - **The performance of styled React components** http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/ Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries. - -- **Structuring our Styled Components** - https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28 - Discusses applying the Block-Element-Modifier styling structure approach to use of the styled-components library, with examples. - -- **Styled-Components Nitty-Gritty** - https://blog.elpassion.com/styled-components-nitty-gritty-2d74b8690ef8 - An introduction to how to use the styled-components library, the problems that it solves, and how it works internally - + - **A Field Guide to CSS-in-JS** https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7 Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more. diff --git a/react-techniques.md b/react-techniques.md index 9b15ecb..9242b66 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -8,12 +8,6 @@ - **Adding Drag and Drop to React** https://www.dailydrip.com/blog/adding-drag-and-drop-to-react.html An example of using react-dnd to add drag-and-drop behavior, in conjunction with Redux. - -- **Climbing Up the React Component Tree** - https://www.ynonperek.com/2017/08/05/react-parent-hirearchy/ - https://www.reddit.com/r/reactjs/comments/6s4czp/traversing_react_tree_in_the_opposite_direction/ - Gives examples for calculating an array describing a component's parents, including using a HOC and using context. Not a recommended thing to try, but the exploration of the idea is interesting. - The Reddit comments have a bit more useful discussion. - **SVG Patterns in React - Build a Twitter Wall** https://www.robinwieruch.de/react-svg-patterns/ @@ -27,10 +21,6 @@ https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6 An excellent post from the Discord team recapping how they migrated an older React codebase to work with React 16, including use of codemods, replacing private API usage, upgrading dependencies, and other issues they ran into. -- **React UI Frameworks, Compared** - https://gather.engineering/react-ui-frameworks-compared-dd631eb5c982 - A list of available React UI frameworks, with reviews and comparisons on breadth of components, quality, project health, and more. Includes Ant Design, PrimeReact, Office UI Fabric, Blueprint, React UI, Semantic UI React, ExtReact, and Kendo React UI. - - **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. @@ -105,10 +95,6 @@ https://www.youtube.com/watch?v=dRo_egw7tBc A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React -- **Using React Fragments for the first time** - https://javascriptplayground.com/blog/2017/12/react-fragments/ - Describes the Fragment "component" and syntax introduced in React 16.2, the problems Fragments solve, and how to use them. - #### Debugging and Error Handling diff --git a/react-tutorials.md b/react-tutorials.md index 1df4ac6..30af445 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -32,19 +32,11 @@ - **Learn Raw React** http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. - -- **React Fundamentals** - https://tylermcginnis.com/courses/react-fundamentals/ - 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/ An all-in-one beginner's guide to modern React application development. Gives an opinionated walkthrough through create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more. -- **React to the Future** - http://elijahmanor.com/talks/react-to-the-future/dist/#/ - A well-written HTML slideshow describing what React is, what makes it special, and how to work with it - - **React: Getting Started and Concepts** https://scotch.io/tutorials/learning-react-getting-started-and-concepts Walks through the basics of components, JSX, props/lifecycle, and data flow @@ -92,11 +84,7 @@ - **ReactJS Tutorial** http://www.tutorialspoint.com/reactjs/index.htm A multi-part tutorial covering numerous aspects of React. Each part is short and the writing is a bit awkward, but the topics and info are useful. - -- **React Tutorial** - http://www.pshrmn.com/tutorials/react/react/ - A very readable intro to React's concepts. - + - **React Workshop** https://github.com/jesstelford/react-workshop A self-directed set of workshop lessons that teach React basics. @@ -129,18 +117,10 @@ https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-1-what-is-this-all-about-a0d28cfd33c6 A 10-part series that explains React (and many web dev concepts) from the ground up, with simple terms and lots of metaphors. Aimed at absolute beginners. -- **Intro to React** - 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. - -- **Introduction to React** - http://ivanjurina.com/2017/11/19/introduction-to-react/ - Useful notes and info on the basics of React, from someone who just learned React. - + - **React Holiday** https://react.holiday/ A series of short lessons that teach core React concepts, each with an interactive sandbox example to play with. @@ -274,12 +254,7 @@ - **SurviveJS - React** http://survivejs.com/react/introduction A full book online book that shows how to develop a Kanban application. Covers key ideas of React, Flux, and advanced concepts such as styling. The commercial version has more content, but you can complete the basic tutorial for free. - -- **A Primer on the React Ecosystem** - http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/ - http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/ - A multi-part tutorial that demonstrates how to set up a React development environment, create React components and have them respond to data changes, and manage app state with Redux. - + - **Building Your First Real-World React Application** http://academy.plot.ly/#react Max Stoiber's full-size tutorial on building an app using React. Includes an intro to React, project setup, using external libraries, data management with Redux, use of Immutable.js, and testing with Jest. @@ -290,24 +265,12 @@ https://blog.tighten.co/react-101-routing-and-auth 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 - https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-2-f846e2d8b820 - 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. - + - **Find Your Park with React and the DarkSky API** https://appendto.com/2016/10/find-your-park-with-reactjs-and-the-darksky-api/ Demonstrates building a small app that displays info on a Google map - **React Daily UI** - http://codepen.io/collection/DoLZRm/ https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/ https://www.fullstackreact.com/react-daily-ui/002-checkout/ https://www.fullstackreact.com/react-daily-ui/003-landing-page/ @@ -334,7 +297,6 @@ https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192 - https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc A tutorial series that introduces React's concepts, using the Create-React-App tool to handle starting the project. - **Retrogames Library with Node, React, and Redux: Server API and React Frontend** @@ -360,11 +322,7 @@ - **Let's Learn: Higher Order Components and Websockets** https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events. - -- **Make Your Own Charts in React Without a Charting Library** - https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library-part-1/ - A series that demonstrates building your own chart rendering components. - + - **Intro to React Workshop** https://github.com/ericvicenti/intro-to-react An hour-long workshop originally developed for Facebook's F8 developer conference. Includes a workshop video and a follow-along guide to building a simple React app. @@ -392,11 +350,7 @@ - **Microservices with Docker, Flask, and React** https://testdriven.io/part-one-intro A large multi-part tutorial covers setting up a dev environment using Docker containers, building a REST API server with the Python Flask framework, building a UI with React, and deploying it all to Amazon EC2. - -- **Create a Spreadsheet using React** - https://www.writesoftware.org/tutorial/react-spreadsheet - An excellent tutorial that shows how to build a miniature spreadsheet app using React - + - **Developing 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. @@ -429,11 +383,7 @@ Also see the course sites listed in the [Community Resources](community-resource - **React for Beginners** https://reactforbeginners.com/ A complete course that teaches how to build full real-world applications. Includes videos and source code. - -- **Pro React** - http://www.pro-react.com/ - The book teaches you how to successfully structure increasingly complex front-end applications and interfaces. You will learn how to use React completely, and learn best practices for creating interfaces in a composable way. You will also cover additional tools and libraries in the React ecosystem (such as React Router and Flux architecture). - + - **React: Up & Running** http://shop.oreilly.com/product/0636920042266.do http://www.phpied.com/react-up-and-running/ @@ -449,7 +399,6 @@ Also see the course sites listed in the [Community Resources](community-resource - **Taming the State in React** https://www.robinwieruch.de/learn-react-redux-mobx-state-management/ - https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE A book and set of course material from the author of "The Road to Learn React", covering state management with setState, Redux, and MobX. - **Learn Pure React** diff --git a/redux-architecture.md b/redux-architecture.md index 661971e..103e5db 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -82,11 +82,7 @@ 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 - + - **Tips for a Better Redux Architecture: Lessons for Enterprise Scale** https://hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale-civrlqhuy0keqc6539boivk2f Thoughts on good patterns and approaches in a large Redux app, including use of action creators instead of `dispatch` in components, module/container file structure, using sagas for flow control, and more. @@ -186,11 +182,7 @@ - **Learning and scaling a React/Redux app with a distributed team** https://devblog.xero.com/learning-and-scaling-a-react-redux-app-with-a-distributed-team-e4c397def187 Lessons learned from working with a large application with many features, including use of common components, sagas, project structure, and utility libraries - -- **Redux at Knewton** - https://tech.knewton.com/blog/2016/11/redux-at-knewton/ - Discussion of how Redux helped Knewton improve their app, including dev middleware to catch accidental mutations, normalization to help with caching, and other tradeoffs. - + - **4 Things for Efficient Redux** https://medium.com/@iJaniashvili/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. @@ -232,11 +224,7 @@ - **Dispatch Redux actions as events, not commands!** https://hackernoon.com/dispatch-redux-actions-as-events-not-commands-4de8a92b1ea5 Some opinionated thoughts on naming and intent for Redux actions, and why actions should be treated similar to event sourcing - -- **Don't Overcomplicate Javascript, #0: Redux Action Constants** - https://bits.ristic.io/dont-overcomplicate-javascript-0 - Some thoughts on the pros and cons of defining action constants for reuse in Redux apps, and whether it's a good idea to use libraries to help define those constants. - + - **Is using a mix of Redux state and React local component state ok?** http://blog.jakoblind.no/2017/02/08/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/ A short article expanding on the rules of thumb for when to use Redux state given in the Redux FAQ, with some examples for each rule of thumb. @@ -359,10 +347,6 @@ https://medium.com/@MattiaManzati/how-to-reuse-redux-components-8acd5b4d376a Discussion of an Elm-inspired approach to wrapping up reusable components and logic -- **Redux and the Elm Architecture** - http://salsita.github.io/redux-elm/ - Redux lacks built-in abstractions for real-world, maintainable, scalable applications. In particular, it is difficult to create and distributed encapsulated, reusable components. The Elm Architecture clearly addresses some important areas where Redux alone is lacking. - - **Scaleable FE with Redux and Elm Architecture** https://medium.com/@hunterbmt/scaleable-fe-with-redux-and-elm-architecture-c6812ed0125e Examples of using Elm-style approaches to writing Redux code @@ -524,10 +508,6 @@ https://medium.com/@causality_redux/react-redux-how-to-write-significantly-less-code-c0562ff06d5a A pair of posts discussing how to use the "causality-redux" library to implement an MVC-type architecture on top of React and Redux. -- **Connecting React components to a Redux store with render callbacks** - https://medium.com/@gott/connecting-react-component-to-redux-store-with-render-callback-53fd044bb42b - Demonstrates using the React "render props" pattern to pass down data from a Redux store, rather than using `connect`. - - **"Anyone using Redux with a render prop?"** https://twitter.com/threepointone/status/913701233394900992 A Twitter thread discussing use of render props as an alternative to `connect`. Includes a reply by Dan Abramov, who points out that this is how React-Redux originally worked, but it was changed to an HOC to better deal with side effects from state changes. diff --git a/redux-middleware.md b/redux-middleware.md index dc01bd1..cd72cf7 100644 --- a/redux-middleware.md +++ b/redux-middleware.md @@ -53,11 +53,6 @@ - **Build your own Redux middleware** https://blog.campvanilla.com/redux-middleware-basics-getting-started-17dc31c6435c A good explanation of how middleware fit into the Redux data flow, how middleware are defined, and how to write a simple logging middleware. - -- **Learning Redux Middlewares by Reading Their Source** - https://www.ynonperek.com/2017/08/21/learning-redux-middlewares-by-reading-their-source/ - Explores the source code for redux-thunk, redux-promise, and redux-batch-middleware to help understand how middleware work. - #### Middleware Techniques @@ -65,10 +60,6 @@ http://jlongster.com/Two-Weird-Tricks-with-Redux https://news.ycombinator.com/item?id=11488633 James Longster describes a couple useful approaches he found while writing the Firefox Developer Tools: checking for specific actions using a middleware, and managing multiple async requests. The HN comments include some useful discussion. - -- **Redux Hack: Custom Thunk APIs** - http://chrispearce.co/redux-quick-hack-custom-thunk-apis/ - Demonstrates writing a custom thunk middleware that injects additional dependencies into thunks. - **Connecting Redux to your API** https://blog.boldlisting.com/connecting-redux-to-your-api-eac51ad9ff89 diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 0c56255..e12efab 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -58,11 +58,7 @@ - **Functional Redux Reducers with Ramda** https://alligator.io/react/functional-redux-reducers-with-ramda/ Shows how to write a somewhat complex Redux reducer using only composition of functions from the Ramda library - -- **Combine Redux reducers like a Tetris ninja** - https://engineering.legalstart.fr/combine-redux-reducers-like-a-tetris-ninja-6f4eb690aed5 - Discusses the intended use case and limitations of `combineReducers`, and presents a custom utility called `combineMultiKeyReducers` that will pass along specified slices of state to a reducer. - + - **A small trick to write clean reducers** https://hackernoon.com/a-small-trick-to-write-clean-reducers-a0b1b1eff3d2 Shows a contrived example of updating deeply nested state, and discusses use of `lodash/fp` to simplify the update logic instead. @@ -239,7 +235,3 @@ - **Organising Redux State** https://medium.com/@onoufriosm/organising-redux-state-4b4c2b99eece Short examples of how Labstep defines state structure for their normalized entities - -- **Normalizing Data into Relational Redux State with Normalizr** - https://medium.com/@onoufriosm/organising-redux-state-4b4c2b99eece - Tips on using Normalizr to normalize data, including defining schemas and overriding Normalizr's default processing and merging strategies. diff --git a/redux-side-effects.md b/redux-side-effects.md index e86e5fc..d993e2b 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -11,10 +11,6 @@ http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594 Dan Abramov gives reasons for using thunks and async middleware, and some useful patterns for using thunks. -- **Pure Functionality and Side Effects with Redux** - https://blog.hivejs.org/building-the-ui-2/ - An overview of what side effects are, how they fit into Redux, and several approaches for managing them. - - **"Async Redux workflow: calling actions outside Redux?"** https://www.reddit.com/r/reactjs/comments/4upe9t/async_redux_workflow_calling_actions_outside_redux/d5sgy5s?context=3 A comment explaining why using action creator functions is a good practice @@ -62,11 +58,6 @@ https://www.youtube.com/watch?v=xihoZZU0gao An excellent screencast that covers three useful tips for use of redux-thunk: thunk return values, multi-dispatch, and when to use `getState` -- **Softly, Softly, Catch-ee Thunk-y** - https://reergymerej.github.io/blog/redux/2017/12/16/thunk-promises.html - Thoughts on how to handle errors inside of thunks, and why you shouldn't end a thunk by catching thrown errors. - - #### Side Effect Approach Comparisons - **Redux side effects and you** @@ -89,11 +80,7 @@ - **Keeping Redux in check** https://medium.com/@georgeleeme/keeping-redux-in-check-78534504b215 Some tips on use of the Flux Standard Actions convention, and comparison of using redux-thunk vs redux-promise. - -- **"Argument: We should switch from thunks to sagas"** - http://en.arguman.org/we-should-switch-from-redux-thunk-to-redux-saga - An debate flowchart with arguments for and against using thunks and sagas - + - **The Evolution of Redux Action Creators** https://medium.com/@northerneyes/the-evolution-of-redux-action-creators-2973018bf2ae A comparison of ways to make action creation testable, looking at redux-thunk, a custom thunk-like middleware, and redux-saga @@ -109,11 +96,7 @@ - **3 Common Approaches to Side-Effects in Redux** https://goshakkk.name/redux-side-effect-approaches/ An overview of what "side effects" are, how they relate to Redux, and the most common ways to handle side effects in a Redux app - -- **Redux: Thunk vs Saga** - http://blog.jakegardner.me/redux-thunk-vs-saga/ - A couple quick examples showing how to use thunks and sagas for the same task - + - **Redux Thunks Dispatching Other Thunks - Discussion and Best Practices** https://medium.com/@talkol/redux-thunks-dispatching-other-thunks-discussion-and-best-practices-dd6c2b695ecf Some excellent thoughts on when it's okay to have a thunk dispatch another thunk, and other possible approaches. @@ -260,10 +243,6 @@ https://medium.com/@chanakyabhardwaj/modelling-common-patterns-with-redux-saga-464a380a37ce Examples of saga logic patterns for behaviors like "first-amongst-these", "keep-doing-until", and "step-by-step". -- **Building an event system using Redux and Sagas** - http://blog.servicebot.io/building-our-event-and-user-notification-system-in-express-using-redux-and-sagas/ - Some quick examples of using Redux-Saga in a Node Express app to handle processing for things like sending emails. - - **Redux Saga Retry Patterns** https://medium.com/@bryanfillmer/keep-trying-redux-saga-style-b273882b9ec https://codeburst.io/try-again-more-redux-saga-patterns-bfbc3ffcdc @@ -358,15 +337,7 @@ - **A simplified approach to calling APIs with Redux** http://www.sohamkamani.com/blog/2016/06/05/redux-apis/ A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state. - -- **Elm Architecture with Redux** - https://smallbusinessforum.co/elm-architecture-with-react-redux-redux-loop-645a67070b1a - A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux - -- **Redux-cycles** - http://nick.balestra.ch/talk/redux-cycles/#/0 - A slideshow that describes the basics of Cycle.js, and how the redux-cycles library can be used to handle side effects in Redux - + - **How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects** https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10 A lengthy look at Cycle.js and the redux-cycles library, with plenty of diagrams to illustrate how it handles data flow. diff --git a/redux-techniques.md b/redux-techniques.md index 1c6269b..fb48554 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -7,10 +7,6 @@ #### Debugging -- **Hot reloading and time travel debugging: what are they?** - https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35 - A short but informative article describing these concepts and why they're useful. - - **Debugging is in Flux** https://vimeo.com/166342150 A fantastic talk that demonstrates use cases and examples for time-travel debugging in a Flux-style architecture, including crash reporting. The demo is built in Alt, but obviously completely applies to Redux as well. @@ -51,11 +47,7 @@ - **How to treat Errors as first-class citizen in Flux (and Redux)** https://medium.com/@jamiedixon/how-to-treat-errors-as-first-class-citizens-in-flux-and-redux-fca7f3d5c02d Discusses how the FSA structure expects actions to have an optional `error` field, and how to write code that deals with that. - -- **Redux in Action: Using the Redux DevTools** - https://www.slideshare.net/ManningBooks/redux-in-action-learn-to-manage-and-consolidate-state - Some slides from the authors of the book "Redux in Action", explaining what the Redux DevTools are, how to set them up, and how to use them to view dispatched actions and debug state changes - + - **A user encounters a JavaScript error. You'll never guess what happens next!** https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490 A walkthrough for how to capture user page interactions and dispatched Redux actions into a "journey" object that can be sent to the server if an error is detected, allowing a developer to play back the user's behavior for debugging. @@ -67,11 +59,6 @@ #### Other - -- **Connecting the Linode API to Redux with Higher-Order Functions** - https://engineering.linode.com/2016/08/17/Using-metaprogramming-in-the-manager.html - Linode explains how they generate customized action creators and reducers to talk to different parts of their API - - **A Finite State Machine Helper for Redux** https://hackernoon.com/a-finite-state-machine-helper-for-redux-c18519643719 Describes a small but useful library for managing state machines using Redux reducers. @@ -83,7 +70,6 @@ - **Redux runtime reconfiguration techniques** https://www.youtube.com/watch?v=ZvbZTXs3Y3E http://redux-reconfig.surge.sh/ - http://codepen.io/vnovick/pen/pEgKww/?editors=0010#0 Discussion and demonstration of some ways to load reducers and components at runtime. - **Secure file uploads with redux-plupload** @@ -96,7 +82,6 @@ - **Immuto: Strongly Typed Redux Composition** http://danielearwicker.github.io/Immuto_Strongly_Typed_Redux_Composition.html - http://danielearwicker.github.io/Immuto_Working_with_React_An_Example_.html http://danielearwicker.github.io/Immuto_Radical_Unification.html http://danielearwicker.github.io/Immuto_Epilogue.html An interesting series of experiments in adding typed cursor-like behavior to Redux. The author appears to give up on the idea in the end, but the writing and thought process are informative. @@ -123,12 +108,7 @@ - **Things I learned about Redux: Don't Dispatch from React Lifecycle Methods** https://github.com/carlsverre/talk-react-redux-learnings - https://docs.google.com/presentation/d/1J82fXkgUKL6-k17ADVtozXMRfMGXnx5R6r5UnOm8z8g/edit?usp=sharing Resources from an excellent presentation on potential timing issues that result from dispatching Redux actions in React lifecycle methods. Repo includes sample code demonstrating the issues, and a link to the video of the meetup talk. - -- **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. - **Manage analytics actions in React** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de @@ -166,10 +146,6 @@ 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 @@ -218,11 +194,7 @@ https://hackernoon.com/automate-writing-redux-reducers-with-5-lines-of-javascript-cecb79fb9a35 https://www.reddit.com/r/javascript/comments/7i4t14/keducer_automate_writing_redux_reducers_with_5/ Describes a small lib to generate reducers that handle merging in updated state. Some good discussion in both the article comments and Reddit comments about the tradeoffs between having reducers "own" state, vs state being defined by action creators. - -- **API Requests in Redux** - https://tech.decisiv.com/api-requests-in-redux-part-1-9ce587628a90 - A series looking at a pattern for simplifying boilerplate around request pending/success/failure status. - + - **Introducing redux-recompose** https://medium.com/wolox-driving-innovation/932e746b0198 Introduces a reducer utility library to help simplify handling of async actions @@ -253,11 +225,6 @@ http://jimpurbrick.com/2017/11/10/replaying-replicated-redux/ A set of posts that discuss using ReactVR and Redux to implement a networked VR application, including using a Redux middleware to synchronize actions between the clients, and approaches to managing consistency and optimistic updates. -- **Ajax Polling in React with Redux and Sagas** - http://notjoshmiller.com/ajax-polling-in-react-with-redux/ - http://notjoshmiller.com/ajax-polling-part-2-sagas/ - Covers a couple different ways to manage the logic for AJAX polling. - - **Firebase with Redux** https://medium.com/@prescottprue/firebase-with-redux-82d04f8675b9 Examples for combining Firebase into a Redux application @@ -278,10 +245,6 @@ https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189 A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture. -- **What's the best way to store tokens in Redux?** - https://michaelwashburnjr.com/whats-the-best-way-to-store-tokens-in-redux/ - Discusses pros and cons of storing auth tokens in app state vs localStorage, and what code should be responsible for handling the tokens.* - - **Remote Reducers and Predictive Reduction** https://medium.com/@seveibar/remote-reducers-and-predictive-reduction-572ab5054211 Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order. diff --git a/redux-tutorials.md b/redux-tutorials.md index d562a1a..d2d9097 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -10,13 +10,11 @@ https://react-redux.js.org The official React-Redux documentation. Explains how to correctly use the React-Redux API, including details on writing `mapState` functions and dispatching actions. -- **Getting Started with Redux - Video Series** - https://egghead.io/series/getting-started-with-redux +- **Getting Started with Redux - Video Series** https://github.com/tayiorbeii/egghead.io_redux_course_notes Dan Abramov, the creator of Redux, demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos. - **Building React Applications with Idiomatic Redux - Video Series** - https://egghead.io/series/building-react-applications-with-idiomatic-redux https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos. @@ -44,14 +42,6 @@ http://merrickchristensen.com/articles/single-state-tree.html Describes the benefits of a Flux architecture, and a single state tree like Redux has -- **Understanding Redux** - http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container - A higher-level description of what Redux is, the major concepts, and why you would want to use it. Also some additional article links. - -- **A Cartoon Guide to Redux** - https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.3k23w6m18 - Another high-level description of Redux, with cartoons - - **Redux-Tutorial** https://github.com/happypoulp/redux-tutorial A file-based tutorial to Redux (click on each numbered .js file in the repo) @@ -79,12 +69,7 @@ - **Introduction to Redux and React-Redux** http://julienrenaux.fr/2016/05/30/introduction-to-redux-and-react-redux/ A quick overview of core Redux concepts, with code examples for creating a store and hooking up React components to read the data. - -- **Redux and React Redux** - http://www.pshrmn.com/tutorials/react/redux/ - http://www.pshrmn.com/tutorials/react/react-redux/ - A pair of articles covering basic Redux concepts and usage. - + - **An Introduction to Redux** https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ An overview and intro to the basic concepts of Redux. Looks at the benefits of using Redux, how it differs from MVC or Flux, and its relation to functional programming. @@ -92,19 +77,11 @@ - **Why Redux makes sense to me and how I conceptualize it** https://medium.com/@fay_jai/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca Some useful analogies for visualizing how Redux works, how the pieces fit together, and why you'd want to use it. - -- **Redux10: A Visual Overview of Redux in 10 Steps** - https://github.com/chrisscoular/Redux10 - A small repo with a standalone HTML page. Walks through 10 simple steps to help explain the basics of Redux. - + - **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 - + - **React/Redux Tutorials** https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a A set of video tutorials introducing Redux concepts @@ -229,18 +206,10 @@ http://blog.madewithlove.be/post/redux/ Walks through a small Redux example, and talks about the benefits -- **Getting Started with Redux** - http://www.jchapron.com/2015/08/14/getting-started-with-redux/ - Walks through setting up a small Redux app, and builds up each layer - - - - **Build an Image Gallery using React, Redux, and redux-saga** http://joelhooks.com/blog/2016/03/20/build-an-image-gallery-using-redux-saga A step-by-step look at building a page with some complex async behavior. - - - **Interactive Frontend Development with React and Redux** https://courses.cs.ut.ee/2016/react/spring/Main/Lectures An Estonian university course covering React and Redux. Lecture videos, slides, and course code are all available online (in English). Topics include React philosophy, container components, Redux basics, async actions, middleware, routing, and optimization. @@ -248,11 +217,7 @@ - **TypeScript Redux** https://github.com/ServiceStackApps/typescript-redux This guide goes through setting up, running and exploring the ultimate JavaScript Stack du jour: TypeScript, JSPM, React, and Redux. - -- **Build a React Redux App with JSON Web Token (JWT) Authentication** - http://blog.slatepeak.com/build-a-react-redux-app-with-json-web-token-jwt-authentication/ - Demonstrates building the client portion of a JWT-authenticated application (follow-up to previous articles that built the server-side). - + - **Redux Hero: An Intro to Redux and Reselect** https://decembersoft.com/posts/redux-hero-part-1-a-hero-is-born-a-fun-introduction-to-redux-js/ https://decembersoft.com/posts/redux-hero-part-2-actions-and-their-consequences-a-fun-introduction-to-redux-actions/ @@ -267,11 +232,7 @@ https://www.pubnub.com/blog/2016-07-20-adding-realtime-user-list-to-react-chat-app/ https://www.pubnub.com/blog/2016-08-16-add-typing-indicator-to-your-react-based-chat-app/ A four-part tutorial that walks through building a realtime chat app - -- **React and Redux Tutorial - Trending Github** - http://myappincome.co.uk/react-redux-tutorial-trending-github-part-1/ - A five-part tutorial that builds a small app showing trending Github repos. - + - **Mapping Colorado's 14er Mountains with React and Redux** https://appendto.com/2016/10/mapping-colorados-14er-mountains-with-react-and-redux-mega-tutorial/ Demonstrates building an app that uses Google Maps to show markers for locations, as well as cards with info on those locations. @@ -311,19 +272,10 @@ https://www.sitepoint.com/crud-app-react-redux-feathersjs/ Walks through building a client-server application that uses FeathersJS to set up the server API. -- **Nathan's Guide to Building a React/Redux Application** - https://www.nathanl.in/posts/nathans-guide-to-building-kick-ass-react-applications-part-i - https://www.nathanl.in/posts/building-kickass-react-applications-with-nathan-part-ii-adding-redux - A tutorial intended to bridge the gap between "hello world" tutorials and "real-world" boilerplates. Covers building a server-rendered React application using Webpack 2, React Router 4, Redux, and ES6. - - **Building Tesla's Battery Range Calculator with React+Redux** https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-2-redux-version-2ffe29018eec Follows the "plain React" version in Part 1 by introducing basic Redux concepts, and modifying the original version to use Redux for managing state. - -- **NodeJS React-Redux Tutorial** - http://www.darrenbeck.co.uk/nodejs/react/reacttutorial-part1/ - A multi-part tutorial that covers building a news app with React, Redux, and a Node API server using MongoDB, as well as setting up JWT-based authentication. - + - **Simple Redux Create Delete Contact Application** https://appdividend.com/2017/11/02/simple-redux-create-delete-contact-application/ Demonstrates building a simple client-side contact list app @@ -369,18 +321,13 @@ - **Let's Write Redux!** http://www.jamasoftware.com/blog/lets-write-redux/ Walks through writing a miniature version of Redux step-by-step, to help explain the concepts and implementation. - -- **Hacking Redux** - http://paulserraino.com/javascript/2016/02/16/hacking-redux.html - Looks at the core concepts in Redux, and builds up a mini-Redux to demonstrate how Redux works internally. - + - **Learning Redux with Reducks** https://www.aaron-powell.com/tags/reducks/ Another "build a mini-Redux" article series. - **AMA with the Redux Creators** 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** diff --git a/redux-ui-management.md b/redux-ui-management.md index ae61ae7..3ed329e 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -1,6 +1,5 @@ ### Redux UI Management - #### UI and Widget Implementations - **"How can I display a modal dialog in Redux?"** @@ -10,116 +9,107 @@ - **Creating Reusable Generic Modals in React and Redux** http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/ https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3 - Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.) - -- **Implement a confirm modal using React & Redux** - http://jslancer.com/2016/08/07/implement-a-confirm-modal-using-react-redux/ - Demonstrates wrapping up an existing modal library to be controlled by Redux actions - + Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.) + - **Implementing Search/Filter on a list in React and Redux** https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad Some quick examples of using Redux to supply a list of items as a prop, and using React local component state to store a filtered version based on inputs. - + - **Creating Reusable Generic Modal Dialogs with React and Redux** https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled. - + - **Animating with React, Redux, and D3** https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them. - + - **Open Sourcing a Redux Component** https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62 Details how the author developed a complex React+Redux grid component, including HTML structure, proper use of Immutable.js for good perf, and lib exports. - -- **Scalable Modals with React and Redux** - https://codersmind.com/scalable-modals-react-redux/ - Demonstrates implementing the basic Redux modal manager technique described by Dan Abramov in his Stack Overflow answer. - + - **A Redux-Saga Implementation of Modal Confirmation Dialogs in React** https://decembersoft.com/posts/a-redux-saga-implementation-of-modal-confirmation-dialogs-in-react-redux/ Some examples of using sagas for controlling flow of async calls and dialog management - + - **Practical Recursion: Implementing a File Item Tree View in React & Electron** https://codeburst.io/practical-recursion-implementing-a-file-tree-view-in-react-electron-af62e7b46d26?gi=da3b8e9bf9ee Demonstrates implementing a tree view component that shows folder structure read from the filesystem, and managing the visibility of tree nodes in Redux - + - **How To Manage UI State with Redux** https://codeburst.io/how-to-manage-ui-state-with-redux-24deb6cf0d57 An informative discussion of application state vs internal component state, how "UI state" fits into app state, and how to write a UI reducer that tracks UI state. - + - **Introduce Redux local state to your React App** https://medium.com/@tangbenze/introduce-redux-local-state-to-your-react-app-9f96f18d4f35 Demonstrates setup and use of a addon library to manage scoped actions, reducers, and connections for isolated component state. - + - **Using react-redux-set-local** https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/ Discussion of the rationale and implementation of a library for connecting isolated portions of a Redux store state to a component while maintaining separation between presentation and state management. - + - **Making Toast from Scratch in React-Redux** https://spin.atomicobject.com/2017/07/12/react-redux-toast/ A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation. - + - **Toast notification system in a React/Redux application** https://www.deployhq.com/blog/toast-notification-system-in-a-react-redux-application The Natterly team walks through how they built a Redux-connected toast notification implementation. - + - **A Functional Canvas Approach with Redux** https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-bab357d6c33c Some simple examples of how to use Redux and vanilla JS canvas code to draw canvas-based UIs with minimal dependencies. - + - **React/Redux with Mapbox** https://medium.com/@mcculloughrt/react-redux-with-mapbox-78fa3767211e Useful techniques for driving the appearance and behavior of a Mapbox-based geospatial app from React and Redux. - + - **React/Redux: Modals and Dialogs** https://medium.com/front-end-hacking/react-redux-no-need-to-component-state-for-modals-73871157b52e - Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals. - + Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals. + - **Handling Keyboard Commands with Redux** https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox - + - **Modular, fast, small: how we built a server-rendered IDE** https://repl.it/site/blog/ide - The repl.it team describes how they built a Redux-based plugin architecture that handles window management and layout, with plugins able to interact via Redux actions. - - + The repl.it team describes how they built a Redux-based plugin architecture that handles window management and layout, with plugins able to interact via Redux actions. + #### Redux and Forms - **Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers** http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/ Demonstrates how to use a custom form wrapper component to buffer input change events - + - **Practical Redux, Part 8: Form Draft Data Management** http://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/ Discusses how to implement logic to handle "draft/work-in-progress" data while editing items - + - **Abstracted Form State with Redux-Form** https://speakerdeck.com/erikras/abstracted-form-state-with-redux-form Slides by the author of Redux-Form, discussing how forms work in plain HTML/Javascript, in React, and how the Redux-Form library can integrate them into Redux. - + - **React, Redux, and Redux-Form** https://jokeyrhyme.github.io/2016/06/27/react-redux-redux-form.html Thoughts on the merits of using the Redux-Form library - + - **Conversational sign-up form UI with React and Redux** http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/ An example of form management with Redux - + - **Should you store your form state in Redux?** http://goshakkk.name/should-i-put-form-state-into-redux/ Thoughts on the tradeoffs involved in storing form data in component state vs Redux, and different potential use cases. - + - **Writing maintainable forms with Redux** https://medium.com/@SBoudrias/writing-maintainable-forms-with-redux-2ef30b5d0e35 Some basic examples for handling validation, loading initial data, and change tracking in forms. - + - **Using forms in React-Redux: Tips and Tricks** https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6 Some helpful suggestions for using Redux-Form to manage forms in a Redux app - + - **Dealing with forms in React/Redux - A simple pattern** https://medium.com/@jonasjensen/dealing-with-forms-in-react-redux-a-simple-pattern-7b94b393eb26 Helpful examples for writing some simple generic form-handling reducers and action creators @@ -127,12 +117,7 @@ - **Here's what you can do to make migrating your forms to Redux easier in the future** https://goshakkk.name/prep-forms-for-redux/ Simple but useful advice on extracting form logic as reducer functions inside of classes - -- **Forms with Redux Form v7** - https://codeburst.io/forms-with-redux-form-v7-part-1-of-2-e636d760e9b4 - https://codeburst.io/forms-with-redux-form-v7-part-2-of-2-f44ffee4a34d - An extensive tutorial on Redux-Form that covers a variety of topics, including basic setup, making reusable form components, styling, dynamic fields with dependencies, real-time validation, and more. - + - **Redux Form Validation Tutorial Example From Scratch** https://appdividend.com/2017/11/05/redux-form-validation-tutorial-example/ A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form. diff --git a/redux-without-react.md b/redux-without-react.md index 7f9c26f..f37b6b2 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -6,11 +6,7 @@ - **Redux without React - State Management in Vanilla Javascript** https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ A tutorial teaching Redux usage with a plain JS UI layer on top - -- **The Easiest Way to Start Using Redux Today** - https://viktorfonic.com/start-using-redux/ - A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI - + #### Angular @@ -25,11 +21,6 @@ - **Scalable Single-Page Application Architecture with Redux and Angular 2** http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS. - -- **Building a Redux Application with Angular 2** - https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1 - https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2 - A tutorial that teaches how to use Redux and Angular 2 together, by building a small finance app - **Build a Better Angular 2 Application with Redux and ngrx** http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ @@ -39,28 +30,16 @@ https://blog.realworldfullstack.io/real-world-angular-part-4-state-of-my-spa-10bf90c5a15 https://blog.realworldfullstack.io/real-world-angular-part-5-light-my-fire-34b0bcb351a8 An Angular 2 tutorial that builds an app using Redux and Firebase - -- **UI State management with Redux in Angular 2** - https://www.pluralsight.com/guides/front-end-javascript/ui-state-management-with-redux-in-angular-2 - An extended article that discusses the benefits of using Redux to manage state, and build an example app that uses Redux to control modals and sidebars. - + - **Managing State in Angular with ngrx/store** https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/ A tutorial that demonstrates use of the ngrx/store variation of Redux as part of an Angular app. - -- **Angular Form Validations With Redux for Multiple Routes** - https://dzone.com/articles/angular-form-validations-with-redux-for-multiple-r - Examples of setting up Redux-based form validation in an Angular app. - + - **Web app architecture based on Redux** http://devblog.ztp.pt/web-app-architecture-based-on-redux/ https://medium.com/@akaztp/case-study-pt-2-implementing-redux-on-angular-9e79cd4faa37 A series of posts describing a modular / layered architecture built around Redux, including a data layer for managing fetching, a business layer using RxJS Epics, and folder structure for Angular components. - -- **NgRx Antipatterns** - 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. @@ -144,11 +123,7 @@ https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-3-database-middleware-5dac7b5ee6ba Discusses how to use a C# implementation of Reedux, including the concepts of action creators and thunks, implementing persistence via middleware, and interacting with a database. - -- **Android.apply(Redux)** - https://blog.shazam.com/android-apply-redux-2ad0f7355e0 - Discusses a Redux-inspired pattern for use with Android as an alternative to the MVP approach. - + - **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 @@ -164,11 +139,7 @@ - **Lessons learned implementing Redux on Android** https://blog.pusher.com/lessons-learned-implementing-redux-on-android/ Recaps experiences from using a Redux-based approach in Android apps using Kotlin - -- **A blockchain-backed Redux clone in 105 lines of code** - https://swizec.com/blog/blockchain-backed-redux-clone-105-lines-code/swizec/7980 - An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. - + - **How to use Redux with Polymer** https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a diff --git a/static-typing.md b/static-typing.md index 9aac13a..053890c 100644 --- a/static-typing.md +++ b/static-typing.md @@ -185,11 +185,7 @@ - **React & Redux in TypeScript - Static Typing Guide** https://github.com/piotrwitek/react-redux-typescript-guide A comprehensive guide to static typing "React & Redux" apps using TypeScript - -- **Porting a React and Redux Application to TypeScript** - https://bytesized.xyz/react-redux-typescript/ - Demonstrates porting an existing React+Redux sample app to use TypeScript - + - **React Higher Order Components in TypeScript made simple** https://dev.to/danhomola/react-higher-order-components-in-typescript-made-simple Demonstrates how to extract an HOC and properly define types for various groups of props @@ -225,10 +221,6 @@ - **Redux and Flow-type - getting the maximum benefit from the fewest key strokes** https://hackernoon.com/redux-flow-type-getting-the-maximum-benefit-from-the-fewest-key-strokes-5c006c54ec87 Discussion of how Flow's type inference can be used to reduce duplication of type declarations for actions. -- **How to Reduce Action Boilerplate** - 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. @@ -241,11 +233,7 @@ - **Using TypeScript with Redux** https://dzone.com/articles/using-typescript-with-redux Examples of basic TS usage with Redux, and setting up your own type declarations for better type safety. - -- **Todo app with Typescript/Redux** - https://medium.com/@nem121/todo-app-with-typescript-redux-e6a4c2f02079 - An introduction to the principles of using Typescript with Redux, as applied to a simple todo app. - + - **Error TS2532 and Optional React Component Props in TypeScript** https://decembersoft.com/posts/error-ts2532-optional-react-component-props-in-typescript/ Describes a specific TS error message that can result from trying to use default props, and and shows how to solve it. diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 745596b..a91329f 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -57,10 +57,6 @@ - **A React + Webpack Optimization Case** https://medium.com/@kudochien/a-react-webpack-optimization-case-27da392fb3ec Several useful examples of how to profile and optimize a Webpack-based project, including checking bundle contents, specific imports from libraries, ignoring Moment locales, and more. - -- **Optimizing Wepback build times and improving caching with DLL bundles** - https://robertknight.github.io/posts/webpack-dll-plugins/ - Explains the benefits of using DllPlugin for generating library bundles, shows how to configure it, and compares with other chunking methods. - **Tree-shaking ES6 Modules in Webpack 2** https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b @@ -106,10 +102,6 @@ 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. -- **How we improved Webpack build performance by 95%** - https://blog.box.com/blog/how-we-improved-webpack-build-performance-95/ - Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel. - - **Keep Webpack Fast: A Field Guide for Better Build Performance** https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1 An excellent article from Slack's frontend team, listing ways to improve Webpack build speed. Gives overviews of profiling, parallelization tools, reducing workloads, and caching, with plenty of mentions for specific tools and techniques. @@ -173,11 +165,7 @@ - **React Universal Component 2.0 & babel-plugin-universal-import** https://medium.com/faceyspacey/announcing-react-universal-component-2-0-babel-plugin-universal-import-5702d59ec1f4 Introduces some new Webpack addons and changes that enable dynamic import expressions, including use with SSR. - -- **Using Redux Saga and code splitting to async load React components** - https://gist.github.com/jballands/accc2ff19a3702685d469c612d6f0776 - A gist that demonstrates using sagas to drive the loading of React components as needed, with some discussion in the comments of the best way to handle those components once they're received by the app. - + - **Impress Your Friends with Code Splitting in React** https://hackernoon.com/impress-your-friends-with-code-splitting-in-react-9f9a3ca2ae6e Examples of using `async/await` and dynamic `import()` to lazy-load React components and display them after they're loaded. @@ -185,11 +173,7 @@ - **ECMAScript Asychronicity - dynamic import** 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 @@ -237,11 +221,7 @@ - **How to use source-map-explorer with Webpack** https://www.sivadass.in/using-source-map-explorer-with-webpack/ Examples of using the source-map-explorer tool to visualize the contents of a bundle - -- **Analyzing and optimizing your Webpack bundle** - https://medium.com/@ahmedelgabri/analyzing-optimizing-your-webpack-bundle-8590818af4df - Some quick suggestions for using CLI flags to show sizes of bundled chunks, and using webpack-bundle-analyzer and IgnorePlugin to exclude unneeded files. - + - **Avoid Webpack bloat: Optimize your dependencies** https://www.zillow.com/engineering/webpack-optimize-dependencies/ Tips for tracking bundle sizes and managing dependency handling @@ -355,7 +335,6 @@ A tutorial that shows how to use Webpack and HMR to hot-reload both front-end and back-end code for faster development. - **How to Hot-Load React Components in 7 Days** - https://medium.com/@antonkorzunov/how-to-hot-load-react-component-in-7-days-part-1-webpack-d8b77eea61eb https://codeburst.io/how-to-hot-load-react-component-in-7-days-part-2-react-28ce2b61d0c7 A 2-part article that discusses how to set up plain HMR and add React-Hot-Loader, as well as many of the complexities of using RHL. @@ -385,23 +364,7 @@ - **Long-term caching of static assets with Webpack** https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95 Gathers documentation on proper use of asset caching into one article to act as a complete guide. - -- **Goodbye "../../../"** - http://davidboyne.co.uk/2016/04/29/react-webpack-gem.html - Tips and discussion on removing relative paths when importing - -- **Using the HTML Webpack Plugin for generating HTML files** - http://javascriptplayground.com/blog/2016/07/webpack-html-plugin/ - Basic instructions for setting up the HTML Webpack plugin - -- **Setting up CSS Modules with React and Webpack** - http://javascriptplayground.com/blog/2016/07/css-modules-webpack-react/ - Covers setting up and configuring Webpack to use CSS Modules for styling - -- **Webpack Map Entity Loader** - 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 @@ -422,14 +385,6 @@ https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin A look at how to use the OfflinePlugin to cache Webpack-generated assets for offline use. -- **Working with Fonts with Webpack** - https://shellmonger.com/2016/01/22/working-with-fonts-with-webpack/ - Explains how to configure Webpack to use external font files. - -- **Working on OkCupid "in production" with Webpack and localhost** - https://tech.okcupid.com/working-on-okcupid-in-production-with-webpack-and-localhost/ - Describes setting up Webpack-Dev-Server to serve local files during development in a distributed build system. - - **Predictable long term caching with Webpack** https://medium.com/@schnibl/predictable-long-term-caching-with-webpack-d3eee1d3fa31 A detailed look at issues that cause caching problems, and how to configure Webpack to get consistent chunk definitions for good caching results diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 50dda63..553fcf2 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -52,11 +52,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **4 Key Concepts of Webpack** https://www.netlify.com/blog/2017/01/03/4-key-concepts-of-webpack/ A recorded presentation by Webpack core team member Sean Larkin, explaining Webpack's core concepts and future goals. - -- **Module Bundling and Webpack in Simple Terms** - http://arianv.com/post/Module-Bundling-and-Webpack-in-Simple-Terms/ - An informative high level overview that explains what Webpack does and how it works. - + - **Webpack: It's Not Magic** https://naomiajacobs.github.io/WebpackTalk/ An excellent HTML slideshow that explains how Webpack allows you to use code that is nice to write, and transforms it into code that the browser fully understands. Also looks at how Webpack works conceptually. @@ -80,10 +76,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac http://blog.madewithlove.be/post/webpack-your-bags/ In-depth article describing what Webpack is, why you would want to use it, and how to set it up -- **Webpack + React is Awesome** - http://www.christianalfoni.com/articles/2014_12_13_Webpack-and-react-is-awesome - Another tutorial explaining how to use and set up Webpack - - **Beginner Webpack Tutorial** https://github.com/AriaFallah/WebpackTutorial/tree/master/part1 Very well-written tutorial that steps through the many pieces in a typical Webpack config, how to configure them, and what they're used for. (Two parts so far, more to come.) @@ -108,11 +100,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack is not as complicated as you think** http://jilles.me/webpack-is-not-as-complicated-as-you-think/ A simple overview of a basic Webpack config looks like. - -- **Creating a React and Webpack Project (screencast)** - http://javascriptplayground.com/blog/2016/06/react-webpack-workflow-screencast/ - A video walkthrough of the basic setup for a Webpack-based project. - + - **Webpack Deep Dive** http://slides.com/kentcdodds/webpack-deep-dive#/ https://github.com/kentcdodds/es6-todomvc @@ -121,11 +109,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack: When To Use and Why** http://blog.andrewray.me/webpack-when-to-use-and-why/ TL;DR It took me a long time to understand Webpack and how it fits in the build process. This is what I wish someone had told me. - -- **Pro React Appendix: Webpack for React** - http://www.pro-react.com/materials/appendixA/ - A free online chapter of the Pro React book, covering Webpack concepts and usage. - + - **A Comprehensive Introduction to Webpack, the Module Bundler** http://www.theodo.fr/blog/2016/07/a-comprehensive-introduction-to-webpack-the-module-bundler/ A solid article covering basic Webpack configuration and setup. @@ -141,11 +125,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Getting Started with Webpack 2** https://medium.com/written-with-envy/getting-started-with-webpack-2-ed2b86c68783 An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals. - -- **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. @@ -158,10 +138,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/ An extended tutorial that covers many Webpack concepts, including basic setup, loaders, plugin, code splitting, and the Webpack Dev Server -- **From zero to Webpack, one error at a time** - http://www.jumoel.com/2017/zero-to-webpack.html - A tutorial that builds a working Webpack config step-by-step, with explanations of how and why each piece is added. - - **A Detailed Introduction to Webpack** https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/ A solid introduction to Webpack's basic concepts and usage, including CLI usage, config file setup, use of loaders and plugins, and chunking for lazy-loading @@ -236,11 +212,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack Loader Variations** https://javascriptstuff.com/webpack-loader-variations/ 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 devtool source map options** http://cheng.logdown.com/posts/2016/03/25/679045 A list of the available values for the `devtool` option in a Webpack config @@ -256,15 +228,7 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Conditional Build with Webpack** https://medium.com/tech-angels-publications/conditional-build-with-webpack-72c36b51abbc Suggestions for creating shared configs that can be used across multiple apps, with certain values replaced at build time. - -- **The Fine Art of the Webpack 2 Config** - https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172 - Explains some of the changes in Webpack 2 configuration, and discusses some approaches for handling dev/prod configuration environments. - -- **Webpack 2 Loader Variations** - http://andrewhfarmer.com/webpack-2-loader-variations/ - A clear and informative overview of the various equivalent ways to write the loader-related parts of a Webpack 2 config file. - + - **Stages of Learning Webpack, Part 2 - The Config** https://dev.to/nitishdayal/stages-of-learning-webpack-pt-2---the-config Explains what Webpack is by explaining some of the problems it attempts to solve, and looks at the basics of a Webpack configuration. From 23bc64205eb163e5b265a27c66de3f1835cd161c Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Mon, 27 Sep 2021 22:13:21 -0400 Subject: [PATCH 46/59] Removed additional dead links --- mobx-tutorials.md | 8 ++------ pros-cons-discussion.md | 1 - react-redux-testing.md | 6 +----- redux-reducers-selectors.md | 4 ---- redux-without-react.md | 7 ------- 5 files changed, 3 insertions(+), 23 deletions(-) diff --git a/mobx-tutorials.md b/mobx-tutorials.md index ae0a270..d2371b5 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -96,12 +96,8 @@ - **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. - + A great video to understand the differences between MobX and Redux. + - **Redux or MobX: What I learned after refactoring a medium-sized React app** https://dannyherran.com/2017/03/react-redux-mobx-takeaways/ A useful list of takeaways, pros and cons of each library and the impact on an existing React application. diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index a2a4bc3..12976d4 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -231,7 +231,6 @@ similar structures in ClojureScript. - **"Why is everying in Javascript changing so fast?** https://news.ycombinator.com/item?id=11833301 - https://news.ycombinator.com/item?id=12758514 Yet another rant thread about Javascript churn, but with a couple very insightful comments about the unique complexities and challenges involved in writing applications for the web. - **"Youtube is being rebuilt on Web Components"** diff --git a/react-redux-testing.md b/react-redux-testing.md index 725210d..d7617d9 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -140,11 +140,7 @@ - **Testing React Components** https://medium.com/@skidding/testing-react-components-30516bc6a1b3 Thoughts on good practices for testing React components, based on writing thousands of tests. Describes complexities in testing real-world components that make use of multiple HOCs or that glue different units together, and how the Cosmos tool can help simplify those tests using mocking. - -- **An introduction to testing React components with Enzyme 3** - https://javascriptplayground.com/blog/2017/12/introduction-to-react-tests-enzyme/ - Introduces the Enzyme library for testing components, and shows a short TDD approach for writing a component - + - **Unit test code that uses CSS Modules** https://medium.com/@a_eife/unit-test-code-that-uses-css-modules-ef5b49efc707 Provides several solutions for handling imports of CSS Modules when running unit tests diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index e12efab..24d5ef7 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -231,7 +231,3 @@ - **Redux Patterns: Rethinking `byId` and `byHash` Structures** https://hackernoon.com/redux-patterns-rethinking-byid-and-byhash-structures-854e8a0fa32d Thoughts on dropping the common list of "all IDs" in a normalized state structure, and just iterating over all items using `Object.keys()` to grab the IDs. - -- **Organising Redux State** - https://medium.com/@onoufriosm/organising-redux-state-4b4c2b99eece - Short examples of how Labstep defines state structure for their normalized entities diff --git a/redux-without-react.md b/redux-without-react.md index f37b6b2..3f93c92 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -100,15 +100,8 @@ https://www.sitepoint.com/managing-state-aurelia-with-redux/ Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. -- **Why Aurelia and Redux is a natural and powerful combination** - https://www.softvision.com/blog/aurelia-redux/ - Thoughts on the benefits of Aurelia compared to other frameworks, and examples of how to use Redux in an Aurelia app. - - #### Other - - - **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# From a3245241575d04c53aa2540c231c27e68c682ec9 Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Mon, 27 Sep 2021 22:25:48 -0400 Subject: [PATCH 47/59] Modified workflow config --- .github/workflows/action.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index 7e5898d..9f0d222 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -1,8 +1,14 @@ name: Check URLs for dead links -on: push +on: + workflow_dispatch: + schedule: + - cron: "0 11 * * 1" # Runs weekly at 7:00 AM EST on Monday + push: jobs: markdown-link-check: runs-on: ubuntu-latest steps: - uses: actions/checkout@master - uses: gaurav-nelson/github-action-markdown-link-check@v1 + with: + use-quiet-mode: 'yes' \ No newline at end of file From 096b2351bb55866fa78e28679004d640379909b8 Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Mon, 27 Sep 2021 22:27:46 -0400 Subject: [PATCH 48/59] Fix format --- .github/workflows/action.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index 9f0d222..e8e3219 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -11,4 +11,4 @@ jobs: - uses: actions/checkout@master - uses: gaurav-nelson/github-action-markdown-link-check@v1 with: - use-quiet-mode: 'yes' \ No newline at end of file + use-quiet-mode: 'yes' \ No newline at end of file From 58fbda9ae24ac05a46436706277f31b5b68a7898 Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Mon, 27 Sep 2021 22:51:38 -0400 Subject: [PATCH 49/59] Additional tweaks --- .github/workflows/action.yml | 3 ++- webpack-advanced-techniques.md | 4 ---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index e8e3219..62c105e 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -11,4 +11,5 @@ jobs: - uses: actions/checkout@master - uses: gaurav-nelson/github-action-markdown-link-check@v1 with: - use-quiet-mode: 'yes' \ No newline at end of file + use-quiet-mode: 'yes' + use-verbose-mode: 'yes' \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index a91329f..4110430 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -274,10 +274,6 @@ - **Webpack and Hot Module Replacement** https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07 A great in-depth walkthrough of how HMR works - -- **Webpack's HMR and React Hot-Loader - The Missing Manual** - https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96 - Demonstrates three ways to enable HMR, and usage with three different React application scenarios - **Hot Reloading in React** https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf From ffa1ff5524fe24886fd3145e07ba5765ed8d4bdb Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Wed, 29 Sep 2021 21:20:59 -0400 Subject: [PATCH 50/59] Testing action updates --- .github/workflows/action.yml | 4 +++- .github/workflows/mlc_config.json | 10 ++++++++++ redux-architecture.md | 6 +----- 3 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 .github/workflows/mlc_config.json diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index 62c105e..eda8682 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -11,5 +11,7 @@ jobs: - uses: actions/checkout@master - uses: gaurav-nelson/github-action-markdown-link-check@v1 with: + config-file: 'mlc_config.json' use-quiet-mode: 'yes' - use-verbose-mode: 'yes' \ No newline at end of file + use-verbose-mode: 'yes' + \ No newline at end of file diff --git a/.github/workflows/mlc_config.json b/.github/workflows/mlc_config.json new file mode 100644 index 0000000..d91f60c --- /dev/null +++ b/.github/workflows/mlc_config.json @@ -0,0 +1,10 @@ +{ + "aliveStatusCodes": [ + 0, + 200, + 429 + ], + "fallbackRetryDelay": "30s", + "retryCount": 2, + "timeout": "5s" +} \ No newline at end of file diff --git a/redux-architecture.md b/redux-architecture.md index 103e5db..ea28029 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -191,11 +191,7 @@ https://blog.shakacode.com/a-year-of-development-with-redux-part-i-a5791e124a7d https://blog.shakacode.com/a-year-of-development-with-redux-part-ii-3035ff0b1781 Some quick tips for working with Redux, structuring data, and encapsulation of components - -- **Avoiding False Cause** - http://duplo.tech/avoiding-false-cause/ - Some high-level general thoughts on cargo-culting, dogma, and best practices, followed by some specific examples of problematic Redux code (unclear reducer state shape, managing "editing" mode data, applying arbitrary value updates) - + - **Isn't our code just the BEST** https://medium.com/bumpers/isnt-our-code-just-the-best-f028a78f33a9 A quirkily-written look at how a dev team rewrote their project using React and Redux, including examples of project structure, component usage, and data normalization From a7c3c82d90ff67688b85486a832e2194eb9ce7ce Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Wed, 29 Sep 2021 21:23:11 -0400 Subject: [PATCH 51/59] Update --- .github/workflows/action.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index eda8682..d01b892 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -11,7 +11,7 @@ jobs: - uses: actions/checkout@master - uses: gaurav-nelson/github-action-markdown-link-check@v1 with: - config-file: 'mlc_config.json' + config-file: './mlc_config.json' use-quiet-mode: 'yes' use-verbose-mode: 'yes' \ No newline at end of file From ad199fb6beb5e264a2da99c5745fec13403dbb1b Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Wed, 29 Sep 2021 21:24:13 -0400 Subject: [PATCH 52/59] Update --- .github/workflows/action.yml | 2 +- .github/workflows/mlc_config.json => mlc_config.json | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename .github/workflows/mlc_config.json => mlc_config.json (100%) diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index d01b892..eda8682 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -11,7 +11,7 @@ jobs: - uses: actions/checkout@master - uses: gaurav-nelson/github-action-markdown-link-check@v1 with: - config-file: './mlc_config.json' + config-file: 'mlc_config.json' use-quiet-mode: 'yes' use-verbose-mode: 'yes' \ No newline at end of file diff --git a/.github/workflows/mlc_config.json b/mlc_config.json similarity index 100% rename from .github/workflows/mlc_config.json rename to mlc_config.json From 5c63a64d69304bedc9ff2268b1f2058d05014d04 Mon Sep 17 00:00:00 2001 From: KeithOrt Date: Thu, 30 Sep 2021 22:59:43 -0400 Subject: [PATCH 53/59] Restored some links with new URLs --- README.md | 2 ++ framework-comparisons.md | 4 ++++ mobx-tutorials.md | 15 +++++++++++++++ pros-cons-discussion.md | 6 ++++++ react-ajax.md | 12 ++++++++++++ react-architecture.md | 5 +++-- react-forms.md | 4 ++++ react-performance.md | 4 ++++ react-redux-testing.md | 18 +++++++++++++++++- react-styling.md | 8 ++++++++ react-techniques.md | 6 +++++- react-tutorials.md | 9 +++++++++ redux-techniques.md | 5 +++++ redux-tutorials.md | 4 +++- redux-ui-management.md | 4 ++++ redux-without-react.md | 8 ++++++++ webpack-advanced-techniques.md | 17 +++++++++++++++++ webpack-tutorials.md | 13 ++++++++++++- 18 files changed, 138 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 7a601a1..1051421 100644 --- a/README.md +++ b/README.md @@ -228,8 +228,10 @@ If you are new to React, try reading these articles in order. ### Getting Started - [Redux Docs](https://redux.js.org/) The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information. + - [Getting Started with Redux - Video Series](https://app.egghead.io/playlists/fundamentals-of-redux-course-from-dan-abramov-bd5cc867) [Getting Started with Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_redux_course_notes) Dan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos. + - [Building React Applications with Idiomatic Redux - Video Series](https://app.egghead.io/series/building-react-applications-with-idiomatic-redux) [Building React Applications with Idiomatic Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes) Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos. - [Redux: From Twitter Hype to Production](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/) diff --git a/framework-comparisons.md b/framework-comparisons.md index 18fadf6..1ddf933 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -69,6 +69,10 @@ https://hashnode.com/post/angularjs-migration-to-reactredux-cj7t0m67x012ehowugcvjn1xj Examples of how to approach migrating an Angular 1 app by first switching some components to use React, then adding state management to use Redux. +- **Migrating complex Javascript applications** + https://www.jackfranklin.co.uk/blog/migrating-complex-javascript-angular-react/ + Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. + - **A Chip off the Monolith** https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. diff --git a/mobx-tutorials.md b/mobx-tutorials.md index d2371b5..424e017 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -49,6 +49,9 @@ #### Other +- **One awkward thing about MobX: Complex Models** + https://swizec.com/blog/one-awkward-thing-about-mobx-complex-models/ + Discussion of potential issues when handling complex models, and some possible workarounds. - **MobX - Like React, but for Data** http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html @@ -66,6 +69,10 @@ https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more. +- **The Curious Case of Mobx State Tree** + https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f + Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities. + - **MobX (with Decorators) in create-react-app** https://www.robinwieruch.de/create-react-app-mobx-decorators/ Covers how to use MobX in a CRA project, with and without decorators. @@ -94,10 +101,18 @@ https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228 Implementation of the same app using both Redux and MobX, and a final comparison of the approaches +- **"How does MobX compare with Redux, and which is better for React app development?"** + 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. + - **Redux or MobX: What I learned after refactoring a medium-sized React app** https://dannyherran.com/2017/03/react-redux-mobx-takeaways/ A useful list of takeaways, pros and cons of each library and the impact on an existing React application. diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 12976d4..446044d 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -7,6 +7,10 @@ #### High-Level Comparisons and Business Cases +- **Using React is a Business Decision, Not a Technology Choice** + https://formidable.com/blog/2015/12/04/using-react-is-a-business-decision-not-a-technology-choice/ + A higher-level, more business-case look at the pros of React + - **React: A Competitive Edge and a Business Decision** https://reactjs-tampabay-b63e2.firebaseapp.com/#/ A slideshow laying out a number of arguments for using React @@ -231,6 +235,8 @@ similar structures in ClojureScript. - **"Why is everying in Javascript changing so fast?** https://news.ycombinator.com/item?id=11833301 + https://news.ycombinator.com/item?id=12760268 + https://news.ycombinator.com/item?id=12758514 Yet another rant thread about Javascript churn, but with a couple very insightful comments about the unique complexities and challenges involved in writing applications for the web. - **"Youtube is being rebuilt on Web Components"** diff --git a/react-ajax.md b/react-ajax.md index dc286b4..32108f5 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -41,6 +41,10 @@ #### Request Implementation Examples +- **Implementing React Redux with GraphQL** + https://marufsarker.github.io/blog/posts/react-redux-with-graphql/ + Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions. + - **Rendering Backend Requests with React** https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6 Describes a pattern for dealing with components that depend on loading data from a backend @@ -49,6 +53,10 @@ https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication Builds a React app that calls a remote API and authenticates users. Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable. +- **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets** + https://www.yld.io/blog/building-realtime-collaborative-offline-first-apps/ + A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI. + - **Handling AJAX In Your React Application with Agility** https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware @@ -72,6 +80,10 @@ https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. +- **Better data fetching with RemoteDataJS** + https://www.jackfranklin.co.uk/blog/remote-data-js/ + Examples of how to use the author's RemoteDataJS library to manage request state. Helpful to see the list of states it tracks, even if you don't use the library. + - **A Better Way To Handle Loading State In Redux** http://nikolay.rocks/2017-06-18-better-redux-loading Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches. Talks about Redux, but applies to React as well. \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index 03efc71..d2b2c37 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -273,9 +273,10 @@ - **State Architecture Patterns in React** https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6 - https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89 + https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89 https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391 - + A multi-part series that discusses several variations on component and state architecture in detail, with thoughts on the pros and cons of each. + - **Three Example React Stacks** https://www.javascriptstuff.com/three-example-react-stacks Descriptions of three different application/deployment scenarios, and example React library+tool stacks that would be appropriate for each. diff --git a/react-forms.md b/react-forms.md index e0f9a88..ca53a1f 100644 --- a/react-forms.md +++ b/react-forms.md @@ -149,6 +149,10 @@ https://spin.atomicobject.com/2016/10/05/form-validation-react/ Examples of adding validation to a form +- **Two-Way Data Binding and Form Validation in React** + https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176 + Another demonstration of building a form with some logic and validation. + - **Form Validation as a Higher Order Component** https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0 https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d diff --git a/react-performance.md b/react-performance.md index 531b5c1..9cc8cd2 100644 --- a/react-performance.md +++ b/react-performance.md @@ -89,6 +89,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://youtu.be/t4tuhg7b50I An excellent talk on performance topics from Brian Vaughn, a React core team member and author of the React-Virtualized library. Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists. +- **React Component Profiling** + https://www.yld.io/blog/react-component-profiling/ + Tips on using the new browser devtools integration capability in React 15.4 to track component performance. + - **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 diff --git a/react-redux-testing.md b/react-redux-testing.md index d7617d9..61ac0b6 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -125,10 +125,18 @@ https://dev.bleacherreport.com/react-and-redux-testing-with-jest-how-some-jokers-learned-to-take-snapshots-c186c7e419e6 Discussion of how Jest snapshot tests can be used to replace some manually-written tests for both React components and Redux logic. +- **Snapshot testing React Components with Jest** + https://medium.com/hackernoon/snapshot-testing-react-components-with-jest-744a1e980366 + Covers the basics of snapshot testing, and how it can be used to test React components to ensure the rendering is consistent. + - **Testing React Components** https://nerdblog.pl/post/166842840969/testing-react-components An extensive look at different ways to test React components using the Enzyme library. Discusses Enzyme's shallow and full rendering methods, methods to inspect the contents of a component, and different forms of tests like snapshots, rendering tests, and behavior tests. - + +- **An introduction to testing React components with Enzyme 3** + https://www.jackfranklin.co.uk/blog/introduction-to-react-tests-enzyme/ + Introduces the Enzyme library for testing components, and shows a short TDD approach for writing a component + - **Creating a React Component using TDD** http://www.alayor.com/2017/Creating-a-React-Component-using-TDD Demonstrates writing a simple React component using the TDD "red-green" testing approach. @@ -145,6 +153,10 @@ https://medium.com/@a_eife/unit-test-code-that-uses-css-modules-ef5b49efc707 Provides several solutions for handling imports of CSS Modules when running unit tests +- **Testing React components using render props** + https://kentcdodds.com/blog/testing-components-using-render-props + Kent C Dodds gives several examples and suggestions of approaches for testing components that make use of render props. + - **Lessons learned testing React & Redux apps with Jest and Enzyme** https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested. @@ -222,6 +234,10 @@ https://github.com/kilkelly/tape-redux-unit-testing Some quick examples of using the Tape library to test Redux reducers, with an accompanying example repo +- **Unit Testing Redux Container Components, Part 1** + https://www.wsbrunson.com/testing-redux-containers/ + Some useful tips for setting up tests for Redux-connected components + - **Test Your Redux Container with Enzyme** https://medium.com/@visualskyrim/test-your-redux-container-with-enzyme-a0e10c0574ec Examples for using Enzyme to test Redux-connected components, including passing in a mock store, use of shallow rendering, and testing `mapDispatch`. diff --git a/react-styling.md b/react-styling.md index 71f1958..ddbc7fa 100644 --- a/react-styling.md +++ b/react-styling.md @@ -63,6 +63,10 @@ https://www.youtube.com/watch?v=_70Yp8KPXH8 Pete Hunt talks about various approaches to defining styles for components in plain CSS and in React +- **Patterns for Style Composition in React** + https://jxnblk.com/blog/patterns-for-style-composition-in-react/ + Some great suggestions for defining reusable React components that can have variations in styling + - **Functional CSS From A Pure UI Perspective** https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc Thoughts on various ways to compose classes and styles together. @@ -201,6 +205,10 @@ http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/ Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries. +- **Styled-Components Nitty-Gritty** + https://www.elpassion.com/blog/styled-components-nitty-gritty + An introduction to how to use the styled-components library, the problems that it solves, and how it works internally + - **A Field Guide to CSS-in-JS** https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7 Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more. diff --git a/react-techniques.md b/react-techniques.md index 9242b66..845098f 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -94,7 +94,11 @@ - **React events in depth** https://www.youtube.com/watch?v=dRo_egw7tBc A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React - + +- **Using React Fragments for the first time** + https://www.jackfranklin.co.uk/blog/react-fragments/ + Describes the Fragment "component" and syntax introduced in React 16.2, the problems Fragments solve, and how to use them. + #### Debugging and Error Handling diff --git a/react-tutorials.md b/react-tutorials.md index 30af445..7cdf944 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -37,6 +37,10 @@ http://www.react.express/ An all-in-one beginner's guide to modern React application development. Gives an opinionated walkthrough through create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more. +- **React to the Future** + https://elijahmanor.com/blog/react-to-the-future + A well-written HTML slideshow describing what React is, what makes it special, and how to work with it + - **React: Getting Started and Concepts** https://scotch.io/tutorials/learning-react-getting-started-and-concepts Walks through the basics of components, JSX, props/lifecycle, and data flow @@ -271,6 +275,7 @@ Demonstrates building a small app that displays info on a Google map - **React Daily UI** + http://codepen.io/collection/DoLZRm/ https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/ https://www.fullstackreact.com/react-daily-ui/002-checkout/ https://www.fullstackreact.com/react-daily-ui/003-landing-page/ @@ -323,6 +328,10 @@ https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events. +- **Make Your Own Charts in React Without a Charting Library** + https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library + A series that demonstrates building your own chart rendering components. + - **Intro to React Workshop** https://github.com/ericvicenti/intro-to-react An hour-long workshop originally developed for Facebook's F8 developer conference. Includes a workshop video and a follow-along guide to building a simple React app. diff --git a/redux-techniques.md b/redux-techniques.md index fb48554..67ba8d0 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -70,6 +70,7 @@ - **Redux runtime reconfiguration techniques** https://www.youtube.com/watch?v=ZvbZTXs3Y3E http://redux-reconfig.surge.sh/ + http://codepen.io/vnovick/pen/pEgKww/?editors=0010#0 Discussion and demonstration of some ways to load reducers and components at runtime. - **Secure file uploads with redux-plupload** @@ -245,6 +246,10 @@ https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189 A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture. +- **What's the best way to store tokens in Redux?** + https://michaelwashburnjr.com/blog/best-way-to-store-tokens-redux + Discusses pros and cons of storing auth tokens in app state vs localStorage, and what code should be responsible for handling the tokens.* + - **Remote Reducers and Predictive Reduction** https://medium.com/@seveibar/remote-reducers-and-predictive-reduction-572ab5054211 Discusses potential techniques for synchronizing server-side state via Redux actions, and how to reconcile actions that are dispatched out of order. diff --git a/redux-tutorials.md b/redux-tutorials.md index d2d9097..c7a290c 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -10,11 +10,13 @@ https://react-redux.js.org The official React-Redux documentation. Explains how to correctly use the React-Redux API, including details on writing `mapState` functions and dispatching actions. -- **Getting Started with Redux - Video Series** +- **Getting Started with Redux - Video Series** + https://app.egghead.io/playlists/fundamentals-of-redux-course-from-dan-abramov-bd5cc867 https://github.com/tayiorbeii/egghead.io_redux_course_notes Dan Abramov, the creator of Redux, demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos. - **Building React Applications with Idiomatic Redux - Video Series** + https://app.egghead.io/series/building-react-applications-with-idiomatic-redux https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos. diff --git a/redux-ui-management.md b/redux-ui-management.md index 3ed329e..6c4b053 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -11,6 +11,10 @@ https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3 Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.) +- **Implement a confirm modal using React & Redux** + https://blog.jslancer.com/blog/2016/08/07/implement-a-confirm-modal-using-react-redux/ + Demonstrates wrapping up an existing modal library to be controlled by Redux actions + - **Implementing Search/Filter on a list in React and Redux** https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad Some quick examples of using Redux to supply a list of items as a prop, and using React local component state to store a filtered version based on inputs. diff --git a/redux-without-react.md b/redux-without-react.md index 3f93c92..bb48ce1 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -40,6 +40,10 @@ https://medium.com/@akaztp/case-study-pt-2-implementing-redux-on-angular-9e79cd4faa37 A series of posts describing a modular / layered architecture built around Redux, including a data layer for managing fetching, a business layer using RxJS Epics, and folder structure for Angular components. +- **NgRx Antipatterns** + https://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. @@ -100,6 +104,10 @@ https://www.sitepoint.com/managing-state-aurelia-with-redux/ Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. +- **Why Aurelia and Redux is a natural and powerful combination** + https://www.cognizantsoftvision.com/blog/aurelia-redux/ + Thoughts on the benefits of Aurelia compared to other frameworks, and examples of how to use Redux in an Aurelia app. + #### Other - **Explorations in Adapting Redux to C#** diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 4110430..a3c11c2 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -102,6 +102,10 @@ 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. +- **How we improved Webpack build performance by 95%** + https://blog.box.com/how-we-improved-webpack-build-performance-95 + Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel. + - **Keep Webpack Fast: A Field Guide for Better Build Performance** https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1 An excellent article from Slack's frontend team, listing ways to improve Webpack build speed. Gives overviews of profiling, parallelization tools, reducing workloads, and caching, with plenty of mentions for specific tools and techniques. @@ -275,6 +279,10 @@ https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07 A great in-depth walkthrough of how HMR works +- **Webpack's HMR and React Hot-Loader - The Missing Manual** + https://rajaraodv.medium.com/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96 + Demonstrates three ways to enable HMR, and usage with three different React application scenarios + - **Hot Reloading in React** https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf Dan Abramov walks through the history of his React Hot Loader and React Transform tools, describes their implementation, flaws, and weaknesses, and looks at a potential solution (later implemented in React Hot Loader 3.0). @@ -331,6 +339,7 @@ A tutorial that shows how to use Webpack and HMR to hot-reload both front-end and back-end code for faster development. - **How to Hot-Load React Components in 7 Days** + https://medium.com/netscape/how-to-hot-load-react-component-in-7-days-part-1-webpack-d8b77eea61eb https://codeburst.io/how-to-hot-load-react-component-in-7-days-part-2-react-28ce2b61d0c7 A 2-part article that discusses how to set up plain HMR and add React-Hot-Loader, as well as many of the complexities of using RHL. @@ -361,6 +370,14 @@ https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95 Gathers documentation on proper use of asset caching into one article to act as a complete guide. +- **Using the HTML Webpack Plugin for generating HTML files** + https://www.jackfranklin.co.uk/blog/webpack-html-plugin/ + Basic instructions for setting up the HTML Webpack plugin + +- **Setting up CSS Modules with React and Webpack** + https://www.jackfranklin.co.uk/blog/css-modules-webpack-react/ + Covers setting up and configuring Webpack to use CSS Modules for styling + - **Webpack Tricks** https://github.com/rstacruz/webpack-tricks A useful list of tips for improving Webpack usage diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 553fcf2..630bed3 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -101,6 +101,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac http://jilles.me/webpack-is-not-as-complicated-as-you-think/ A simple overview of a basic Webpack config looks like. +- **Creating a React and Webpack Project (screencast)** + https://www.jackfranklin.co.uk/blog/react-webpack-workflow-screencast/ + A video walkthrough of the basic setup for a Webpack-based project. + - **Webpack Deep Dive** http://slides.com/kentcdodds/webpack-deep-dive#/ https://github.com/kentcdodds/es6-todomvc @@ -126,6 +130,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://medium.com/written-with-envy/getting-started-with-webpack-2-ed2b86c68783 An introduction to Webpack's concepts and configuration, and how to use the latest version to handle various build goals. +- **Migrating to Webpack 2** + https://www.jackfranklin.co.uk/blog/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. @@ -138,11 +146,14 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/ An extended tutorial that covers many Webpack concepts, including basic setup, loaders, plugin, code splitting, and the Webpack Dev Server +- **From zero to Webpack, one error at a time** + https://www.jumoel.com/posts/zero-to-webpack + A tutorial that builds a working Webpack config step-by-step, with explanations of how and why each piece is added. + - **A Detailed Introduction to Webpack** https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/ A solid introduction to Webpack's basic concepts and usage, including CLI usage, config file setup, use of loaders and plugins, and chunking for lazy-loading - - **Webpack - From Apprentice to Journeyman** http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/#/ A presentation from Juho Vepsäläinen of the core Webpack team, explaining the basics of Webpack. From eac4976bd9a68e8d29d2c97343accd9e0ae14699 Mon Sep 17 00:00:00 2001 From: Jorge Iglesias Garcia <44316552+jorgeig-space@users.noreply.github.com> Date: Sat, 2 Oct 2021 21:03:22 +0800 Subject: [PATCH 54/59] Update dead link of conversational UI --- redux-ui-management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redux-ui-management.md b/redux-ui-management.md index ae61ae7..c48233e 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -105,7 +105,7 @@ Thoughts on the merits of using the Redux-Form library - **Conversational sign-up form UI with React and Redux** - http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/ + https://web.archive.org/web/20190715044522/http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/ An example of form management with Redux - **Should you store your form state in Redux?** From 5c9adeafcd6853c3b701baa45b7046f8672d2fc8 Mon Sep 17 00:00:00 2001 From: "alex.muriuki" Date: Sun, 12 Dec 2021 09:47:04 +0300 Subject: [PATCH 55/59] Update react-tutorials.md Replace the old facebook.github.io link with the official React doc link and add the beta react docs --- react-tutorials.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/react-tutorials.md b/react-tutorials.md index 7cdf944..b8d3b88 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -3,10 +3,12 @@ #### Basic Introductions -- **React Documentation** - https://facebook.github.io/react/docs/hello-world.html - https://facebook.github.io/react/tutorial/tutorial.html - The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information. +- **React Documentation** + https://reactjs.org/docs/getting-started.html + The official React documentation, rewritten with an excellent set of tutorials, explanations, and API information. + + https://beta.reactjs.org/ + The beta React documentation, recently written with really good tutorials with an aim to switch this to be the main one once content parity is reached with the existing React documentation - **Modern Web Development with React and Redux** http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ From 50cf5075cb1e99dbf5f1d4430b72b1b93579f9bf Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 12 Dec 2021 12:43:07 -0500 Subject: [PATCH 56/59] Update react-tutorials.md --- react-tutorials.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-tutorials.md b/react-tutorials.md index b8d3b88..5397812 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -8,7 +8,7 @@ The official React documentation, rewritten with an excellent set of tutorials, explanations, and API information. https://beta.reactjs.org/ - The beta React documentation, recently written with really good tutorials with an aim to switch this to be the main one once content parity is reached with the existing React documentation + A full rewrite of the React documentation, with a completely redesigned set of tutorials that teach modern React with function components and hooks as the standard approach. (This will become the main docs site once it's completed.) - **Modern Web Development with React and Redux** http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ From 98ff5f9c2621d1587fd9ee32a99dd149e97a7753 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 12 Dec 2021 12:43:18 -0500 Subject: [PATCH 57/59] Update react-tutorials.md --- react-tutorials.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-tutorials.md b/react-tutorials.md index 5397812..e724899 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -5,7 +5,7 @@ - **React Documentation** https://reactjs.org/docs/getting-started.html - The official React documentation, rewritten with an excellent set of tutorials, explanations, and API information. + The official React documentation, including tutorials, explanations, and API information. https://beta.reactjs.org/ A full rewrite of the React documentation, with a completely redesigned set of tutorials that teach modern React with function components and hooks as the standard approach. (This will become the main docs site once it's completed.) From 16f6f48ccfbff4847f6c223eaef61c74aed93c15 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 31 Jan 2022 22:58:55 -0500 Subject: [PATCH 58/59] Replace README contents with the "Learning" list from Reactiflux --- README.md | 530 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 296 insertions(+), 234 deletions(-) diff --git a/README.md b/README.md index 1051421..cf3d3de 100644 --- a/README.md +++ b/README.md @@ -69,237 +69,299 @@ You might also want to check out my categorized list of Redux-related addons, li - -## Best of the Best / Suggested Reading List - -All of the links in this collection are worth reading, but there's obviously a LOT of them. Here's a "best-of" list to get you started: - -## Basic Concepts and Learning Approaches - -### Overviews of Javascript Tools and Concepts - - [State of the Javascript Landscape in 2016](http://www.infoq.com/articles/state-of-javascript-2016) - A very high-level summary of the important terms and technologies that are used in modern Javascript development. - - [The \(R\)Evolution of Web Development](http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/) - A slideshow giving an overview of web dev history and modern web dev tools, technologies, and trends. - - [Javascript Package Managers 101](https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a) - An overview of what packages and package managers are, some related terms, and how these tools work. - -### Suggested Learning Approaches - - [A Study Plan to Cure Javascript Fatigue](https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1) - The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem. - - [Grab Front-End Study Guide](https://github.com/grab/front-end-guide) - An excellent guide to learning front-end technologies, based on "A Study Plan to Cure Javascript Fatigue". Includes descriptions of each topic, links to learning resources, and estimates for how much time to spend on each topic. - - [React How-To](https://github.com/petehunt/react-howto) - Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux) - - [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - [How to Learn React](https://daveceddia.com/how-to-learn-react/) - Another high-level suggested timeline for how to approach learning React and related technologies. - - [Tips to learn React + Redux](https://www.robinwieruch.de/tips-to-learn-react-redux/) - An extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, unit testing, and much more. - - -## Learning Core Javascript (ES5) - -### General Resources - - [Mozilla Developer Network: Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - [Mozilla Developer Network: A Re-Introduction to Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) - Mozilla maintains a fantastic set of developer resources for Web technologies, including a comprehensive reference to the Javascript language and a number of associated tutorials. Their "reintroduction to Javascript" article is a great overview of what the language looks like. - - [Eric Elliott's Javascript Resource Lists](https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e) - [Eric Elliott's Essential Javascript Links](https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9) - Eric Elliott is a strong proponent of Javascript, has written numerous articles about learning and understanding Javascript, and assembled some very useful lists of numerous Javascript resources. (Strong opinions, but has useful info.) - - [Wes Bos's Javascript Resource List](http://wesbos.com/learn-javascript) - Speaker and teacher Wes Bos gives links to a number of resources for learning Javascript - -### Books - - [Eloquent Javascript](http://eloquentjavascript.net/) - A full online book teaching Javascript from the ground up. Very recommended. - - [You Don't Know Javascript](https://github.com/getify/You-Dont-Know-JS) - An online book series intended to teach all aspects of Javascript, including the "tougher" parts. - - [Exploring Javascript](http://exploringjs.com/) - Multiple free online books from Dr. Axel Rauschmayer. "Speaking Javascript" covers all of Javascript through ES5; "Exploring ES6" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment. - - -## Learning Current Javascript (ES6+) - -### ES6 Feature Overviews - - [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6) - Quick samples and descriptions of all the various ES6 capabilities - - [ES6 Features Comparison](http://es6-features.org/) - Code snippets comparing ES6 features with their ES5 equivalents - - [ES6 - The Bits You'll Actually Use](http://jamesknelson.com/es6-the-bits-youll-actually-use/) - A quick tour through some of the more useful features in ES6 - - [A Rundown of Javascript 2015 Features](https://auth0.com/blog/a-rundown-of-es6-features/) - An overview of the features in ES6 and how they can be used. - -### In-Depth Details - - [ES6 In Depth](https://ponyfoo.com/articles/tagged/es6-in-depth) - Many articles covering each feature in greater detail - - [Exploring ES6](http://exploringjs.com/es6/index.html) - A full online book covering every aspect of ES6 in fine detail - - -## React Walkthrough - -If you are new to React, try reading these articles in order. - -### Getting Started - - [React Documentation: Hello World](https://facebook.github.io/react/docs/hello-world.html) - [React Documentation: Tutorial](https://facebook.github.io/react/tutorial/tutorial.html) - The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information. - - [Create-React-App](https://github.com/facebookincubator/create-react-app) - The official project creation tool from the React team. Allows you to set up a new React project, with no configuration work required. - - [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - An excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production. - - [Modern Web Development with React and Redux](http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/) - An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples. - - [Learn Raw React](http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/) - A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. - - [30 Days of React](https://www.fullstackreact.com/30-days-of-react/) - A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment. - -### Data Flow: “State” and “Props” - - [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates. - - [ReactJS: Props vs State](http://lucybain.com/blog/2016/react-state-vs-pros/) - Explains that "props" are data passed in to a component, while "state" is data managed inside a component. - - [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 component structure. - -### Component Patterns - - [React Patterns](http://reactpatterns.com/) - An excellent list of common patterns for structuring React components, with examples - - [The React Component Lifecycle](https://www.kirupa.com/react/component_lifecycle.htm) - A useful description of the order and purpose of React’s component lifecycle methods. - - [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) - Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React. - - [Mixins Considered Harmful](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html) - Dan Abramov explains why the React team discourages use of mixins, and prefers a pattern called “Higher Order Components” instead - - [Components, React, and Flux](http://slides.com/danabramov/components-react-flux-wip#/) - A fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture - - [Reactive, Component-Based UIs](http://banderson.github.io/reactive-component-ui-presentation/#/) - Another fantastic HTML slideshow describing the three principles of React: "functional over OOP", "stateless over stateful", "clarity over brevity" (use arrow keys to advance slides) - -### Function Binding and `this` - - [Gentle Explanation of `this` keyword in Javascript](http://rainsoft.io/gentle-explanation-of-this-in-javascript/) - A long and in-depth explanation of the various ways that the `this` keyword can be defined - - [The Inner Workings of Javascript's `this` keyword](https://www.sitepoint.com/inner-workings-javascripts-this-keyword/) - [Mastering Javascript's `this` keyword](https://www.sitepoint.com/mastering-javascripts-this-keyword/) - A two-part article on the ins and outs of `this`. - - [Why and How to Bind Methods in your React Component Classes](http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/) - A good look at function binding in JS, and how it works with React - - [React Binding Patterns: 5 Approaches for Handling `this`](https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56) - Describes five different ways you can handle binding methods to handle the `this` keyword correctly - - ["Fat arrow vs autobind vs bindbindbind?”](https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l) - Dan Abramov from the React team gives his thoughts on how to handle method binding. - -### AJAX requests and Data Fetching - - [AJAX Requests in React: How and Where to Fetch Data](https://daveceddia.com/ajax-requests-in-react/) - An overview of where AJAX requests fit into React usage. - -### Immutable Data - - [Pros and Cons of Using Immutability With React](http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/) - Excellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts. - - [Redux Docs: Structuring Reducers - Immutable Update Patterns](https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns) - Useful examples for doing proper immutable updates, including common mistakes, proper updates of nested data, updates for arrays, and more. (Helpful for Redux, but not Redux-specific.) - -### Functional Programming - - [The Little Idea of Functional Programming](http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/) - 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. - - [What Is Functional Programming?](http://blog.jenkster.com/2015/12/what-is-functional-programming.html) - Describes how side effects and "hidden inputs" add complexity to code, in very clear terms. - -### Forms and Inputs - - [Controlled and uncontrolled form inputs in React don't have to be complicated](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) - A great summary of what controlled and uncontrolled inputs are, what each approach looks like, and how to handle values from different types of inputs. - - [React.js Forms: Controlled Components](http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components/) - An excellent article that describes the concept of controlled components, and demonstrates examples of how to interact with different types of form inputs - - [Learn Raw React: Ridiculously Simple Forms](http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/) - Covers the basics of implementing form rendering, updates, and validation, in plain JS - -### Styles - - [Styling in React](https://www.kirupa.com/react/styling_in_react.htm) - An introduction to using React's built-in inline styling abilities - - [How To Style React](https://www.javascriptstuff.com/how-to-style-react/) - An excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use. - - -## Redux - -### Getting Started - - [Redux Docs](https://redux.js.org/) - The official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information. - - [Getting Started with Redux - Video Series](https://app.egghead.io/playlists/fundamentals-of-redux-course-from-dan-abramov-bd5cc867) - [Getting Started with Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_redux_course_notes) - Dan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos. - - [Building React Applications with Idiomatic Redux - Video Series](https://app.egghead.io/series/building-react-applications-with-idiomatic-redux) - [Building React Applications with Idiomatic Redux - Course Notes](https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes) - Dan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using "selector" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos. - - [Redux: From Twitter Hype to Production](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/) - An extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture. - - [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/) - A very well-written introduction to Redux and its related concepts, with some useful cartoon-ish diagrams. - - [Connect.js explained](https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e) - A very simplified version of React Redux's `connect()` function that illustrates the basic implementation - -### AJAX, Timeouts, and other “Side Effects” - - [Dispatching Redux Actions with a Timeout / ](http://stackoverflow.com/a/35415559/62937) - [Why do we need middleware for async flow in Redux?](http://stackoverflow.com/a/34599594/62937) - A pair of answers from Dan Abramov, explaining how “side effects” like AJAX calls and asynchronous behavior fit into Redux - - [What the heck is a "thunk"?](https://daveceddia.com/what-is-a-thunk/) - An explanation of the word “thunk”, and how thunks can be used to do things like AJAX calls. - -### Middleware - - [Redux Middleware](http://jonnyreeves.co.uk/2016/redux-middleware/) - A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them. - - [Exploring Redux Middlewares](http://blog.krawaller.se/posts/exploring-redux-middleware/) - Understanding middlewares through a series of small experiments - -### Debugging - - [Time Travel in React Redux apps using the Redux DevTools](https://onsen.io/blog/react-redux-devtools-with-time-travel/) - Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging. - -### Writing Reducers - - [Redux Docs: Structuring Reducers](https://redux.js.org/recipes/structuring-reducers/structuring-reducers) - Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. - - [Taking Advantage of `combineReducers`](http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/) - Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. - -### Selectors and Normalization - - [Querying a Redux Store](https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f) - A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. - - [Normalizing Redux Stores for Maximum Code Reuse](https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95) - Thoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data. - - [Practical Redux: Redux-ORM Basics](http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/) - [Practical Redux: Redux-ORM Concepts and Techniques](http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/) - A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. - - -## Webpack - -### Getting Started - - [Webpack Documentation](https://webpack.js.org/) - Webpack's new documentation site, explaining concepts, configuration, and recipes - - [Webpack from First Principles](https://youtu.be/WQue1AN93YU) - A screencast video explaining what Webpack is and why you would want to use it - - [What is Webpack and what can it do for you?](http://x-team.com/2016/09/webpack-can-absolute-beginners/) - A plain-English explanation of what Webpack is and what problems it can help solve. - - [SurviveJS - Webpack](http://survivejs.com/webpack/introduction) - A full book online book that covers setting up Webpack for both development and production. Also touches topics such as ESLint and npm. - -### Configuration and Concepts - - [Webpack: The Confusing Parts](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9) - A great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the "entry" option, the "output" option / "path" vs "publicPath", loaders and configuration, Babel, plugins, and path resolving. - - [Angular + Webpack < 3](https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI) - A long presentation that describes Webpack and its core concepts in depth. A few parts are Angular-centric, but still an extremely clear and informative set of slides. Covers topics like the "entry" and "output" options, "loaders", and "plugins". - - [Advanced Webpack](http://presentations.survivejs.com/advanced-webpack/) - An in-depth presentation that walks through Webpack concepts, terms, configuration, and usage. Covers a number of advanced topics, and very worth reading. - -### Build Optimization - - [Advanced Frontend Optimization with Webpack](http://sokra.github.io/slides/frontend-optimize) - Slides by Webpack’s original author, describing ways to improve Webpack builds. - - [Formidable Playbook](https://formidable.com/open-source/playbook/) - Formidable Labs describes their preferred approaches for configuring Webpack, including optimization approaches. - -### Hot Module Reloading - - [Webpack Hot Reloading and React](https://ctheu.com/2015/12/29/webpack-hot-reloading-and-react-how/) - An explanation of how Hot Reloading works, and how the various pieces fit together. +## Recommended Learning Path + +**You should usually learn these technologies in the following order:** + +1. **"How Web Apps Work":** a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps +2. **JavaScript:** If you don't know JavaScript, nothing else will make sense +3. **React:** You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once. +4. **Redux:** Redux can be used separately, but it's most commonly used with React. +5. **TypeScript:** Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, _then_ learn how to use them with static types. + +The resources in this page are listed in that order. + +**You are not required to read every single link and article listed in this page.** However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned. + +Links in the "Additional Resources" sections are available as references and reading as needed. + +### How Web Apps Work + +Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps. + +#### Recommended Primary Resources (should read) + +- [How Web Apps Work: HTTP and Servers](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-http-server/) +- [How Web Apps Work: Client Development and Deployment](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-client-dev-deployment/) +- [How Web Apps Work: Browsers, HTML, and CSS](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-html-css/) +- [How Web Apps Work: JavaScript and the DOM](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-javascript-dom/) +- [How Web Apps Work: AJAX, APIs, and Data Transfer](https://blog.isquaredsoftware.com/2020/11/how-web-apps-work-ajax-apis-data/) + +### Javascript + +#### Recommended Primary Resources (should read) + +##### General JS + +- **Slides:** [Mark's "JavaScript for Java Developers" slides](https://blog.isquaredsoftware.com/2019/05/presentation-js-for-java-devs/) +- **Read:** [MDN: A re-introduction to JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) +- **Read:** [The Modern JavaScript Tutorial](https://javascript.info/) +- **Read:** [Javascript Cheatsheet](https://javascript.pythoncheatsheet.org/) +- **Exercises:** [CodeCademy - Introduction to JavaScript Tutorial](https://www.codecademy.com/learn/introduction-to-javascript) + +##### Specific Topics + +- Array methods: + - [Modern JS Tutorial - Array Methods](https://javascript.info/array-methods) + - [Which Array Function When?](https://dev.to/andrew565/which-array-function-when) +- Equality and Comparisons + - [MDN - Equality comparisons and sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) + - [JS Equality Comparison Table](https://dorey.github.io/JavaScript-Equality-Table/) +- Closures + - [MDN - Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [Modern JS Tutorial - Closures](https://javascript.info/closure) +- `this` keyword and scopes + - [A gentle explanation of `this` keyword in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/) + - [`this` in JavaScript](https://zellwk.com/blog/this/) + - [Everything you wanted to know about JavaScript scope](https://ultimatecourses.com/blog/everything-you-wanted-to-know-about-javascript-scope) +- The JS event loop + - [Watch: What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en) + - [The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/) +- CSS and layout + - [CSS: From Zero to Hero](https://dev.to/aspittel/css-from-zero-to-hero-3o16) + - [MDN - Visual Formatting Model](https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model) + - [MDN - Introduction to the CSS Box Model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) + - [HTML and CSS is Hard (but it doesn't have to be)](https://internetingishard.com/html-and-css/) + - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + - [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) +- Node / NPM + - [How to install Node.js](https://nodejs.dev/learn/how-to-install-nodejs) + - [An introduction to the npm package manager](https://nodejs.dev/learn/an-introduction-to-the-npm-package-manager) +- Build Tools + - [The Many Jobs of JS Build Tools](https://www.swyx.io/jobs-of-js-build-tools/) +- Debugging + - [The definitive guide to debugging JavaScript](https://flaviocopes.com/javascript-debugging/) + - [Intro to debugging React Applications](https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd) + +#### Additional Resources (read as needed) + +##### General JS + +- **Core References:** + - [MDN: JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) + - [The Modern JavaScript Tutorial](https://javascript.info/) + - [Online book: JavaScript for Impatient Programmers](http://exploringjs.com/impatient-js/toc.html) +- **Syntax Overviews:** + - [Javascript Cheatsheet](https://javascript.pythoncheatsheet.org/) + - [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6) + - [ES6 Feature Examples](http://es6-features.org) +- **Additional Books / References:** + - [The Complete JavaScript Handbook](https://medium.freecodecamp.org/the-complete-javascript-handbook-f26b2c71719c) + - [Eloquent JavaScript](https://eloquentjavascript.net/) + - [Exploring JS books](http://exploringjs.com/) (cover what's new in each yearly revision of the language) + - [Links: ES6+ Features and Syntax](https://github.com/markerikson/react-redux-links/blob/master/es6-features.md) (links to additional articles on new features in ES6+) + - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) (advanced concepts and understanding of JS behavior) + +##### Specific Topics + +- Array/object methods / immutability + - [Does It Mutate?](https://doesitmutate.xyz/) + - [Array Explorer](https://sdras.github.io/array-explorer/) and [Object Explorer](https://sdras.github.io/object-explorer/) +- JS Event Loop + - [The JavaScript Event Loop](https://flaviocopes.com/javascript-event-loop/) +- Regular Expressions + - [A Guide to JavaScript Regular Expressions](https://flaviocopes.com/javascript-regular-expressions/) + - [A Beginner's Guide to Regular Expressions in JavaScript](https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4) +- CSS + - [Online Interactive CSS Cheat Sheet](https://htmlcheatsheet.com/css/) + - [A Practical CSS Cheat Sheet](https://www.toptal.com/css/css-cheat-sheet) + - [GRID: A simple visual cheatsheet for CSS Grid Layout](http://grid.malven.co/) +- Node / NPM + - [Introduction to Node.js](https://nodejs.dev/learn) + - [The package.json guide](https://nodejs.dev/learn/the-package-json-guide) +- Lodash + - [Lodash documentation](https://lodash.com/docs/) +- Build Tools + - Babel + - [Babel Docs](https://babeljs.io/) + - [Babel Tutorial (TutorialsPoint)](https://www.tutorialspoint.com/babeljs/index.htm) + - [A Beginner's Guide to Babel](https://www.sitepoint.com/babel-beginners-guide/) + - [A Short and Simple Guide to Babel](https://flaviocopes.com/babel/) + - Webpack + - [Webpack docs](https://webpack.js.org/) + - [Webpack Academy](https://webpack.academy/) + - [Webpack from First Principles](https://www.youtube.com/watch?v=WQue1AN93YU) + +### React + +#### Recommended Primary Resources (should read) + +##### General React + +Start with reading the official docs first. The React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first, which is now available in beta. We've linked to that rather than the existing "main" documentation. + +These other listed tutorials are also excellent and may explain things in a different way. + +- **Read: [official React docs](https://beta.reactjs.org/)** + - [Getting Started](https://reactjs.org/docs/getting-started.html) (docs overview and related resources) + - [Main Concepts](https://reactjs.org/docs/hello-world.html) (read the whole series, but especially these two): + - [Lifting State Up](https://reactjs.org/docs/lifting-state-up.html) + - [Thinking In React](https://reactjs.org/docs/thinking-in-react.html) + - [React Hooks guide](https://reactjs.org/docs/hooks-intro.html) (lays out the motivation, teaches hooks, API reference, in-depth FAQ) +- **Read: [React docs (converted to show hooks)](https://reactwithhooks.netlify.app/)** + + - [Tutorial](https://reactwithhooks.netlify.app/tutorial/tutorial.html) + +- **Watch:** [React Tutorial for Beginners](https://egghead.io/courses/the-beginner-s-guide-to-react) +- **Read:** [Intro to React, Redux, and TypeScript for 2020](https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/) (Mark's presentation slides) +- **Read:** [Build a CRUD App in React with Hooks](https://www.taniarascia.com/crud-app-in-react-with-hooks/) +- **Read:** [A Comprehensive Guide to React in 2020](https://medium.freecodecamp.org/a-comprehensive-guide-to-react-js-in-2018-ba8bb6975597) +- **Exercises:** [Learn React - Interactive Tutorials](https://scrimba.com/g/glearnreact) + +##### Project Setup + +- **Read: [Simple React Development in 2019](https://hackernoon.com/simple-react-development-in-2017-113bd563691f)** (a guide to setting up an app, development environment, and deployment) +- **Use: [CodeSandbox.io](https://codesandbox.io)** (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser) +- **Use: [Create-React-App](https://facebook.github.io/create-react-app/)** (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.) + +##### Specific Topics + +- Understanding how React works conceptually / internally + - [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/) (deep dive - not _required_ reading, but will definitely help you understand React better) + - [Mark Erikson: A (Mostly) Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/) + - [Build your own React](https://pomb.us/build-your-own-react/) +- State and props + - [A Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) +- Component lifecycles + - [React component lifecycle interactive diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) +- AJAX requests + - [AJAX Request in React - How and Where to Fetch Data](https://daveceddia.com/ajax-requests-in-react/) +- Immutability + - [Immutability in React and Redux: The Complete Guide](https://daveceddia.com/react-redux-immutability-guide/) + - [Redux docs: Immutable Update Patterns](https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns) +- Functional Programming basics + - [The Little Idea of Functional Programming](https://jaysoo.ca/2016/01/13/functional-programming-little-ideas/) + - [What is Functional Programming?](http://blog.jenkster.com/2015/12/what-is-functional-programming.html) +- Forms and "controlled inputs" + - [React docs - Forms](https://reactjs.org/docs/forms.html) + - [Controlled and uncontrolled form inputs in React don't have to be complicated](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) + - [Transitioning from uncontrolled inputs to controlled](https://goshakkk.name/turn-uncontrolled-into-controlled/) +- React's new "hooks" API + - [React docs - Hooks](https://reactjs.org/docs/hooks-intro.html) (lays out the motivation, teaches hooks, API reference, in-depth FAQ) + - [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) (very long article, but a must-read. Teaches how hooks use closures, defining when effects run, and much more.) + - [What are React Hooks?](https://www.robinwieruch.de/react-hooks/) + - [React Hooks: Not Magic, Just Arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) (looks under the hood to explain how hooks are implemented) + +#### Additional Resources (read as needed) + +##### General React + +- **Resource Collections** + - [Mark Erikson's React-Redux links collection (many categories of links to articles)](https://github.com/markerikson/react-redux-links) + - [Mark's suggested resources for learning React](https://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-react/) + - [Dave Ceddia's blog](https://daveceddia.com/archives/) (everything he's written) + - [Robin Wieruch's blog](https://www.robinwieruch.de/categories/react/) (also everything he's written) +- **Additional Books / References** + - [The Road to React](https://roadtoreact.com/) + - [Learn Pure React](https://daveceddia.com/pure-react/) + +### Redux + +#### Recommended Primary Resources (should read) + +##### General Redux + +Start with reading the official docs first. + +The other tutorials are also excellent and may explain things in a different way. + +- **Read: [Redux core docs](https://redux.js.org/)** + - **["Redux Essentials" tutorial](https://redux.js.org/tutorials/essentials/part-1-overview-concepts):** explains "how to use Redux, the right way", using the latest recommended techniques and practices like Redux Toolkit and the React-Redux API, while building a real-world-ish example app. + - **["Redux Fundamentals" tutorial](https://redux.js.org/tutorials/fundamentals/part-1-overview):** teaches "how Redux works, from the ground up". including core Redux data flow and why standard Redux patterns exist. + - ["Typescript quick start"](https://redux-toolkit.js.org/tutorials/typescript): explains how to configure Redux Toolkit with type safety from action creators through to selectors. +- **Use: [Redux Toolkit](https://redux-toolkit.js.org/)** (an official Redux package to simplify common tasks, including store setup and writing reducers) + - Example project: [https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps](https://github.com/reduxjs/redux-essentials-example-app/tree/tutorial-steps) +- **Read: [React-Redux docs](https://react-redux.js.org/)** + - **[React-Redux hooks API reference](https://react-redux.js.org/api/hooks)** + - These APIs are now considered outdated, but are widely used in existing Redux codebases + - [`connect()`: Extracting Data with `mapStateToProps`](https://react-redux.js.org/using-react-redux/connect-mapstate) + - [`connect()`: Dispatching Actions with `mapDispatchToProps`](https://react-redux.js.org/using-react-redux/connect-mapdispatch) +- **Watch:** Dan Abramov's tutorial videos on Egghead + - [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) + - [Building React Apps with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) +- **Read:** [A Complete React-Redux Tutorial](https://daveceddia.com/redux-tutorial/) +- **Read:** [React Redux Tutorial for Beginners: The Definitive Guide](https://www.valentinog.com/blog/redux/) +- **Read:** [Leveling Up with React: Redux](https://css-tricks.com/learning-react-redux/) + +##### Mark Erikson's Redux Resources + +- **Read: ["Idiomatic Redux" concepts and opinion series](https://blog.isquaredsoftware.com/series/idiomatic-redux/)**. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.) +- Legacy resources (do not cover "Modern Redux", but still informative) + - **Read: [Redux Fundamentals Workshop slices](https://blog.isquaredsoftware.com/2018/06/redux-fundamentals-workshop-slides/)**: a 2-day internal workshop that covers Redux from the ground up. Includes complete recordings of each section, slides, and an exercises repo. (Does not cover "Modern Redux", but + - **Read: ["Practical Redux" blog tutorial series](https://blog.isquaredsoftware.com/series/practical-redux/)**. Covers multiple React and Redux concepts through building a larger example application + +##### Specific Topics + +- Tradeoffs of using Redux: + - [Mark Erikson: When (and when not) to Reach for Redux](https://changelog.com/posts/when-and-when-not-to-reach-for-redux) + - [Dan Abramov: the Case for Flux](https://medium.com/swlh/the-case-for-flux-379b7d1982c6) + - [Dan Abramov: You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) +- Reducer functions + - [Redux docs - Structuring Reducers](https://redux.js.org/recipes/structuring-reducers/structuring-reducers) +- Selector functions + - [Idiomatic Redux: Using Reselect Selectors for Encapsulation and Performance](https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/) +- Side effects + - [Stack Overflow: How do we dispatch an action with a timeout?](https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559) + - [Stack Overflow: Why do we need middleware for async flow?](https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594#34599594) + - [What the heck is a "thunk"?](https://daveceddia.com/what-is-a-thunk/) + - [What is the right way to do asynchronous operations in Redux?](https://decembersoft.com/posts/what-is-the-right-way-to-do-asynchronous-operations-in-redux/) (side-by-side comparison of multiple side effects approaches) + - [Redux Power Tools: Redux-Saga](https://formidable.com/blog/category/redux-saga/) +- Normalizing data + - [Redux docs - Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape) + - [Normalizing Redux Stores for Maximum Code Reuse](https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95) + +#### Additional Resources (read as needed) + +- **Resource Collections** + - [**Redux Style Guide**](https://redux.js.org/style-guide/style-guide): best practices and recommendations for using Redux the right way + - [**Redux FAQ**](https://redux.js.org/faq) (answers to many common questions about Redux) + - [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) (a curated list of Redux-related addons and utilities) +- **Books and Courses** + - [Pure Redux course](https://daveceddia.com/pure-redux/) by Dave Ceddia + - [Redux course](https://tylermcginnis.com/courses/redux/) by Tyler McGinnis + - [Learn Redux course](https://learnredux.com/) by Wes Bos (free) + - [Redux in Action](https://www.manning.com/books/redux-in-action) + - [The Complete Redux Book](https://leanpub.com/redux-book) (free) + - [Taming the State in React](https://www.robinwieruch.de/learn-react-redux-mobx-state-management/) + +##### Specific Topics + +- How does Redux work? + - [Build Yourself a Redux](https://zapier.com/engineering/how-to-build-redux/) + - [Idiomatic Redux: The History and Implementation of React-Redux](https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/) + +### TypeScript + +#### Recommended Primary Resources (should read) + +- **Read: [official TypeScript docs](https://www.typescriptlang.org/docs/home.html)** +- [Typescript Playground](https://www.typescriptlang.org/play) - an interactive playground for testing typescript behavior and reproducing issues - includes some built-in examples +- **Read: [Get Started with TypeScript in 2019](https://www.robertcooper.me/get-started-with-typescript-in-2019)** +- **Read: [The Definitive TypeScript Guide](https://www.sitepen.com/blog/update-the-definitive-typescript-guide/)** + - [TypeScript Cheat Sheet](https://www.sitepen.com/blog/typescript-cheat-sheet) +- **Read: [The TypeScript Guide](https://flaviocopes.com/typescript/)** + +##### Specific Topics + +- `interface` vs `type` + - [TypeScript Interface vs Type](https://pawelgrzybek.com/typescript-interface-vs-type/) + - [Interface vs Type sandbox example](https://www.typescriptlang.org/play?q=287#example/types-vs-interfaces) +- ["Typescript quick start"](https://redux-toolkit.js.org/tutorials/typescript): explains how to configure Redux Toolkit with type safety from action creators through to selectors. + +#### Additional Resources (read as needed) + +- **Resource Collections** + - **[React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet)** (a definitive set of information on how to use TypeScript with React) + - [React + Redux in TypeScript - Static Typing Guide](https://github.com/piotrwitek/react-redux-typescript-guide) (a comprehensive set of info on using React, Redux, and TS together, with a focus on getting complete / "correct" type coverage of an app) +- **Techniques** + - [Redux with Code-Splitting and Type Checking](https://www.matthewgerstman.com/tech/redux-code-split-typecheck/) From 65d47d9099b697e23a36b9df617410c217a14dbb Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 15 Jul 2024 15:17:00 -0400 Subject: [PATCH 59/59] Stop cron job workflow --- .github/workflows/action.yml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/.github/workflows/action.yml b/.github/workflows/action.yml index eda8682..0917829 100644 --- a/.github/workflows/action.yml +++ b/.github/workflows/action.yml @@ -1,17 +1,17 @@ name: Check URLs for dead links on: workflow_dispatch: - schedule: - - cron: "0 11 * * 1" # Runs weekly at 7:00 AM EST on Monday + # schedule: + # - cron: "0 11 * * 1" # Runs weekly at 7:00 AM EST on Monday push: -jobs: - markdown-link-check: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@master - - uses: gaurav-nelson/github-action-markdown-link-check@v1 - with: - config-file: 'mlc_config.json' - use-quiet-mode: 'yes' - use-verbose-mode: 'yes' - \ No newline at end of file +# jobs: + # markdown-link-check: + # runs-on: ubuntu-latest + # steps: + # - uses: actions/checkout@master + # - uses: gaurav-nelson/github-action-markdown-link-check@v1 + # with: + # config-file: 'mlc_config.json' + # use-quiet-mode: 'yes' + # use-verbose-mode: 'yes' +