diff --git a/basic-concepts.md b/basic-concepts.md index ddf63ab..d736758 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -138,4 +138,8 @@ - **Javascript is a buffet, not the enemy** https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/ - An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor. \ No newline at end of file + An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor. + +- **Are we making the web too complicated?** + http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated + Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt. \ No newline at end of file diff --git a/es6-features.md b/es6-features.md index fd4f4c4..eb3cb0a 100644 --- a/es6-features.md +++ b/es6-features.md @@ -197,6 +197,10 @@ 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. + #### Techniques @@ -259,4 +263,8 @@ - **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 \ No newline at end of file + 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. \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index d0cd3fe..fb31795 100644 --- a/git-resources.md +++ b/git-resources.md @@ -91,6 +91,10 @@ https://wiki.openstack.org/wiki/GitCommitMessages A number of good practices to follow when making commits and writing commit messages +- **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 + ## Specific Techniques - **Git's Patch Mode All the Way** diff --git a/immutable-data.md b/immutable-data.md index b8a2708..52149b5 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -55,7 +55,9 @@ 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. #### Immutability and React @@ -113,3 +115,7 @@ - **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 diff --git a/project-structure.md b/project-structure.md index df60b2a..d22b439 100644 --- a/project-structure.md +++ b/project-structure.md @@ -80,6 +80,10 @@ 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`. #### Project Setup diff --git a/react-architecture.md b/react-architecture.md index efa3843..13c3d47 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -220,6 +220,10 @@ http://www.benmvp.com/slides/2017/oscon/react-properly.html#/ A presentation by Ben Ilegbodu of Eventbrite, listing several useful best practices like use of ESLint, good structure for render functions, and more. +- **You Can Spread Props in JSX, But Should You?** + https://medium.com/@kylpo/you-can-spread-props-in-jsx-but-should-you-6cc3e766e281 + Some thoughts on the pros and cons of using JSX's object spread operator, including examples of how it is compiled via Babel + #### React Architecture diff --git a/react-component-patterns.md b/react-component-patterns.md index 5f9245e..82d2ffd 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -327,6 +327,10 @@ https://medium.com/@DjamelH/why-you-should-keep-your-react-components-pure-by-using-hocs-67e5c7f80c81 Walks through extracting stateful behavior into an HOC so that it's more reusable and the wrapped components are simpler. +- **A gentle introduction to Higher Order Components** + https://www.robinwieruch.de/gentle-introduction-higher-order-components/ + An excellent article demonstrating several ways to use HOCs to manage conditional rendering logic in a reusable way. + #### Wrapping Non-React Code @@ -390,6 +394,10 @@ 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. + #### Modal Dialogs @@ -438,6 +446,10 @@ http://blog.jakoblind.no/2017/04/03/how-to-add-state-to-functional-components-using-recompose/ Some quick examples of using the Recompose library to wrap components with additional behavior. +- **Top 5 Recompose HOCs** + https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566 + A list of 5 useful HOCs provided by the Recompose library, including `branch` and `withHandlers`. + #### Other Component Patterns diff --git a/react-forms.md b/react-forms.md index 5e4f58e..1a0bf31 100644 --- a/react-forms.md +++ b/react-forms.md @@ -57,6 +57,10 @@ - **Collecting data from a wizard form** https://goshakkk.name/wizard-form-collect-info/ Examples of how to handle data management for a multi-step form + +- **React Forms: Using Refs** + https://css-tricks.com/react-forms-using-refs/ + A quick recap of what "controlled components" are, and some excellent examples of how to use refs to directly access values for different types of inputs in forms #### Form Tutorials and Usage @@ -114,6 +118,10 @@ https://medium.com/@robbiedelavictoria/better-form-management-37c994095b1c A couple useful examples of approaches for simplifying React form handling logic. +- **Forms in React** + http://presentations.survivejs.com/forms-in-react/#/ + Slides for a workshop on approaches for managing forms in React. Includes summaries of the various major approaches for managing forms, and links to several useful form-related libraries. + #### Form Validation diff --git a/react-implementation.md b/react-implementation.md index e5b1ba0..6e7a732 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -66,8 +66,14 @@ https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5 https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56 https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b + https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0 + https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37 An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`. +- **deact: React under the hood** + https://github.com/lukebelliveau/deact + A repository for learning about how React works internally. Has a link to a slide set that explains the concepts, and has branches for the various lessons. + #### Implementation and Internals diff --git a/react-native.md b/react-native.md index c65f649..531d538 100644 --- a/react-native.md +++ b/react-native.md @@ -31,6 +31,9 @@ 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 +- **Offline-First Apps with React Native and Redux** + http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/ + A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support. #### Specific aspects diff --git a/react-performance.md b/react-performance.md index bbdbd27..80b26c6 100644 --- a/react-performance.md +++ b/react-performance.md @@ -139,6 +139,18 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3 Excellent advice and information from the Twitter Lite dev team on how they optimized their app, including code splitting, ways to avoid "jank", optimizing React rendering, optimizing Redux usage, and more. +- **Optimizing React Rendering** + https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02 + 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. + +- **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 + #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index b64dd6d..39408e2 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -194,6 +194,14 @@ - **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`. @@ -266,4 +274,6 @@ https://spin.atomicobject.com/2017/05/02/react-testing-jest-vs-mocha/ A comparison of the strengths and weaknesses of the Jest and Mocha testing frameworks - \ No newline at end of file +- **Javascript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape, and Jest** + https://raygun.com/blog/javascript-unit-testing-frameworks/ + A useful comparison and summary of the major unit testing frameworks available \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index bbe831a..08a5105 100644 --- a/react-styling.md +++ b/react-styling.md @@ -18,6 +18,10 @@ https://speakerdeck.com/alexlande/components-a-styling-odyssey Slideshow discussing pros and cons of various approaches to managing styles for components +- **A Unified Styling Language** + https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 + A fantastic article that reviews why people might want to write their styles in Javascript, explores possible benefits of doing so, and looks at how the "CSS" and "JS" communites can work together going forward. + #### Components and Styling @@ -41,6 +45,10 @@ https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). +- **James Kyle's thoughts on styling and components** + https://twitter.com/i/moments/861549552901468160 + A Twitter thread from James Kyle, discussing how many of the arguments about styling and components are a result of people building different kinds of applications + #### CSS-Based Approaches diff --git a/redux-architecture.md b/redux-architecture.md index c5f30e3..466857d 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -196,6 +196,22 @@ - **Some tips for getting started with Redux** https://medium.com/@dave.draper20/some-tips-for-getting-started-with-redux-187fa949c0e8 Some excellent suggestions for getting into Redux, including not using it until you need it, use of `connect`, and making sure to call functions that were passed down as props. + +- **Quick Redux tips for connecting your React components** + https://medium.com/dailyjs/quick-redux-tips-for-connecting-your-react-components-e08da72f5b3 + A couple quick suggestions for use of `connect`, including connecting lower in the tree and using the `renderCountProp` option + +- **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. #### Encapsulation and Reusability diff --git a/redux-side-effects.md b/redux-side-effects.md index 1987d8d..8f8f2a6 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -43,6 +43,10 @@ http://blog.jakoblind.no/2017/04/25/async-actions-with-redux-thunk-demystified/ A quick look at the source code for redux-thunk, how it works, and how to use it. +- **Sense-ible Redux Thunk** + https://medium.com/sensehq/sense-ible-redux-thunk-30b866ca5914 + Examples of how to define reusable caching and authorization handling for thunks using decorators + #### Side Effect Approach Comparisons diff --git a/redux-techniques.md b/redux-techniques.md index d4ca91f..eb994e1 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -34,6 +34,11 @@ - **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. + +- **Redux Logging in Production / Maximizing Debuggability in Redux** + https://blog.logrocket.com/redux-logging-in-production-3b2a4816b713 + https://blog.logrocket.com/maximizing-debuggability-with-redux-79b2ad07b64c + A pair of articles discussing a variety of aspects and approaches for debugging Redux apps. Includes several mentions of the LogRocket service, but also covers other tools and approaches, including building your own analytics pipeline. #### Reducers @@ -159,6 +164,10 @@ - **How I Stumbled Upon Normalizing Redux State** http://kyleshevlin.com/how-i-stumbled-upon-normalizing-redux-state/ A short summary of the benefits and concept behind normalizing state + +- **React, Reselect, and Redux** + https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c + An explanation of how Reselect's memoized selector functions are useful in Redux apps, and how to create unique selector instances for each component instance. #### UI and Widget Implementations diff --git a/redux-tutorials.md b/redux-tutorials.md index 2d4617a..1701473 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -227,6 +227,7 @@ - **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. diff --git a/static-typing.md b/static-typing.md index f8d0a1b..789355a 100644 --- a/static-typing.md +++ b/static-typing.md @@ -148,6 +148,10 @@ - **Type-safe Flux Standard Actions in React** https://www.triplet.fi/blog/type-safe-flux-standard-actions-fsa-in-react-using-typescript-fsa/ Describes the "Flux Standard Action" concept, and how the TypeScript FSA library can be used to help generate FSAs in a type-safe way. + +- **Type-Safe Asynchronous Actions (Redux-Thunk) Using TypeScript FSA** + https://www.triplet.fi/blog/type-safe-asynchronous-actions-redux-thunk-using-typescript-fsa/ + Examples of how to generate and use type-safe async actions in TypeScript - **React & Redux in TypeScript - Static Typing Guide** https://github.com/piotrwitek/react-redux-typescript-guide diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 1f4149d..b037857 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -184,6 +184,10 @@ https://blog.craftlab.hu/how-to-do-proper-tree-shaking-in-webpack-2-e27852af8b21 Explains several important concepts related to tree shaking, and how to configure Webpack and other tools to ensure it happens correctly. +- **3 ways to reduce Webpack bundle size** + http://blog.jakoblind.no/2017/05/18/3-ways-to-reduce-webpack-bundle-size/ + A quick summary of some possible approaches to optimize bundle sizes, with links to more information + #### Hot Module Replacement @@ -317,6 +321,10 @@ https://kostasbariotis.com/environment-based-application-configuration-using-webpack/ An explanation of how environment-based configuration is useful, and a couple examples of ways to handle config files for varying environments. +- **From Grunt and Bower to Webpack, Babel, and Yarn - Migrating a legacy front-end build system** + https://medium.com/appifycanada/migrate-to-webpack-from-grunt-bower-legacy-build-system-344526f47873 + A recap of the steps needed to migrate an Angular app's build system to Webpack, including managing imports, handling global variables, and code splitting. + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 564af33..705e00f 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -222,6 +222,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac 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. + #### Webpack Configuration Utilities