diff --git a/community-resources.md b/community-resources.md index 9c9c509..cb6cfe6 100644 --- a/community-resources.md +++ b/community-resources.md @@ -55,6 +55,10 @@ 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 + #### People diff --git a/es6-features.md b/es6-features.md index eb3cb0a..ab97c3c 100644 --- a/es6-features.md +++ b/es6-features.md @@ -60,6 +60,10 @@ 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. + #### In-Depth Details diff --git a/functional-programming.md b/functional-programming.md index 08699b9..8c5708b 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -145,4 +145,12 @@ - **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. \ No newline at end of file + An explanation of several FP concepts like partial application and currying, and how Lodash offers utility functions to help make use of those concepts. + +- **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 \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 5115096..eca0a58 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -82,6 +82,10 @@ 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. + #### Comment Threads and Discussions diff --git a/react-architecture.md b/react-architecture.md index 13c3d47..e56a75a 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -102,6 +102,10 @@ - **"Thinking in React" - A paradox statement** https://medium.com/@nimelrian/thinking-in-react-a-paradox-statement-33c19e2eb9e2 Some thoughts on the recent "Flux architecture hampered React innovation" Twitter discussion, including a list of three principles for React components, and tradeoffs of data flow handling. + +- **Thinking in React** + https://www.codementor.io/radubrehar/thinking-in-react-8duata34n + Some quick thoughts on how React's rendering approach can be applied universally, how it simplifies dealing with state transitions, and how its API helps devs build UIs naturally. #### React Best Practices diff --git a/react-forms.md b/react-forms.md index 1a0bf31..608c9c7 100644 --- a/react-forms.md +++ b/react-forms.md @@ -61,6 +61,10 @@ - **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 + +- **Understanding your options with forms in React** + https://medium.com/@thegreengreek/understanding-your-options-with-forms-in-react-afedc91ebf3e + A quick summary of the three major forms approachs (controlled inputs, uncontrolled inputs + refs, uncontrolled inputs + serialization), with code examples for each #### Form Tutorials and Usage diff --git a/react-redux-testing.md b/react-redux-testing.md index 39408e2..ac1ea0e 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -202,6 +202,10 @@ - **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`. + +- **Redux Testing Step by Step: A simple Methodology for Testing Business Logic** + https://hackernoon.com/redux-testing-step-by-step-a-simple-methodology-for-testing-business-logic-8901670756ce + An excellent article by Tal Kol, describing how different types of tests fit together, the different kinds of Redux code that need to be tested, and how to write tests for each. diff --git a/react-routing.md b/react-routing.md index 31d1a5e..aa0651e 100644 --- a/react-routing.md +++ b/react-routing.md @@ -63,4 +63,8 @@ - **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. \ No newline at end of file + 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. \ No newline at end of file diff --git a/react-server-rendering.md b/react-server-rendering.md index 1576992..93580d6 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -31,4 +31,12 @@ - **Going Isomorphic with Python and React** https://dev.to/__amol__/going-isomorphic-with-python-and-react - A look at how to use DukPy and React together to write an isomorphic web application with Python without even installing Node.js. \ No newline at end of file + A look at how to use DukPy and React together to write an isomorphic web application with Python without even installing Node.js. + +- **Server side rendering with React, React Router v4, React Helmet, and CSS Modules** + https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/ + A detailed tutorial demonstrating how to set up a production-ready SSR application + +- **Code Cracked for Code Splitting + SSR in Reactlandia: React Loadable + Webpack Flush Chunks** + https://hackernoon.com/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8 + Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems. \ No newline at end of file diff --git a/redux-architecture.md b/redux-architecture.md index 466857d..1dde1a4 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -103,6 +103,10 @@ https://www.mapbox.com/blog/redux-for-state-management-in-large-web-apps/ Excellent discussion and examples of idiomatic Redux architecture, and how Mapbox applies those approaches to their Mapbox Studio application. +- **Reducing our Redux Code with React Apollo** + https://dev-blog.apollodata.com/reducing-our-redux-code-with-react-apollo-5091b9de9c2a + Peggy Rayzis from MLS shares a detailed look at how they used the React Apollo library and GraphQL to drastically simplify their Redux application + #### Redux Best Practices @@ -212,6 +216,18 @@ - **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. + +- **Five Tips for Working with Redux in Large Applications** + https://medium.com/appnexus-tech/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb + Useful suggestions for architecting Redux apps, include use of indices / lookup tables, separation of state, and reuse of common reducer logic. + +- **React State vs Redux State: When and Why?** + https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/ + Some helpful suggestions on how to categorize state into short/medium/long-term, and how to decide where that state should live + +- **React Native, Redux, and Firebase for experts, by dummies** + https://medium.com/rumors/react-native-redux-and-firebase-for-experts-by-dummies-6376becdd5c8 + The Rumors team describes how they've structured their Redux+Firebase application, and some of the things they ran into #### Encapsulation and Reusability @@ -350,4 +366,8 @@ - **Isomorphic Redux** https://medium.com/@ellisande_poet/isomorphic-redux-fdaadea13bb5 - Walks through an implementation of keeping two Redux stores in sync via distributed actions over websockets. \ No newline at end of file + Walks through an implementation of keeping two Redux stores in sync via distributed actions over websockets. + +- **Introducing FilterBubbler: A WebExtension built using React/Redux** + https://hacks.mozilla.org/2017/06/introducing-filterbubbler-a-webextension-built-using-reactredux/ + Describes how the authors built a browser WebExtension that uses the Redux-WebExt bridge as part of the implementation. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 149517d..2e71659 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -177,7 +177,8 @@ - **Javascript Power Tools: Redux-Saga** http://formidable.com/blog/2017/javascript-power-tools-redux-saga/ http://formidable.com/blog/2017/composition-patterns-in-redux-saga/ - A fantastic series that the concepts, implementation, and benefits behind Redux-Saga, including how ES6 generators are used to control function flow, and how sagas can be composed together to accomplish concurrency. + http://formidable.com/blog/2017/real-world-redux-saga-patterns/ + A fantastic series that the concepts, implementation, and benefits behind Redux-Saga, including how ES6 generators are used to control function flow, how sagas can be composed together to accomplish concurrency, and practical use cases for sagas. - **Managing Side Effects with Redux Saga: A Primer** https://www.sigient.com/blog/managing-side-effects-with-redux-saga-a-primer-1 @@ -187,6 +188,15 @@ https://medium.com/onfido-tech/exploring-redux-sagas-cc1fca2015ee An excellent article that explores how to use sagas to provide a glue layer to implement decoupled business logic in a Redux application. +- **Redux-Saga: put() from inside a callback / File Upload Progress** + https://decembersoft.com/posts/redux-saga-put-from-inside-a-callback/ + https://decembersoft.com/posts/file-upload-progress-with-redux-saga/ + A pair of posts demonstrating how to use Redux-Saga's "event channel" feature to interact with non-Redux code + +- **Effects as Data** + https://gist.github.com/iammerrick/fc4a677cea11d9c896e8d3a29a184f91 + A small essay on the benefits of treating effects as data, and how it enables decoupling + #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index eb994e1..3e4a5c8 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -168,6 +168,10 @@ - **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. + +- **Use Selectors in Redux for Great Good** + https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 + A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. #### UI and Widget Implementations diff --git a/static-typing.md b/static-typing.md index 789355a..92152f3 100644 --- a/static-typing.md +++ b/static-typing.md @@ -156,6 +156,10 @@ - **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 #### Advancing Typing Techniques diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index b037857..c647b38 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -188,6 +188,10 @@ 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 +- **Introducing Bonsai: an open source Webpack analyzer** + https://medium.com/@Pinterest_Engineering/introducing-bonsai-an-open-source-webpack-analyzer-6bdfe22f8984 + The Pinterest team describes the problems they'd encountered optimizing their Webpack bundles, and introduces a new tool to help analyze bundles and dependency trees. + #### Hot Module Replacement