From d3c5509cd020e222f321b9ea3b6f76e09bad6287 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 23 Apr 2017 15:17:11 -0400 Subject: [PATCH] Updates, 2017-04-23 --- mobx-tutorials.md | 10 +++++++++- pros-cons-discussion.md | 13 +++++++++++++ react-component-patterns.md | 4 ++++ react-redux-testing.md | 6 +++++- react-state-management.md | 14 +++++++++++++- react-styling.md | 8 ++++++++ react-tutorials.md | 8 ++++++++ redux-architecture.md | 10 +++++++++- redux-tutorials.md | 16 ++++++++++++++++ 9 files changed, 85 insertions(+), 4 deletions(-) diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 8ecbd17..4f6683c 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -66,6 +66,10 @@ https://medium.com/@enitoni/creating-a-reusable-popover-system-with-react-and-mobx-7f47cc3b270d A useful tutorial on implementing a React modal system driven by MobX state +- **7 Tips for Using MobX** + 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 and Redux Comparisons @@ -104,4 +108,8 @@ 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. \ No newline at end of file + A useful list of takeaways, pros and cons of each library and the impact on an existing React application. + +- **Comparing Redux and MobX with two CTOs** + https://youtu.be/ZGVwMkrL2n0 + A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 34fe90d..ef75d76 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -35,6 +35,10 @@ https://wheniwork.engineering/the-other-reasons-we-chose-react-fbb37e570999 A summary of how When I Work evaluated several different frameworks for future development, and the reasons why they picked React +- **When Does a Project Need React?** + https://css-tricks.com/project-need-react/ + Some useful thoughts on when it makes sense to use React: when there's lots of state, spaghetti code, or lots of DOM management. + #### Redux/Flux Comparisons @@ -70,6 +74,10 @@ 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, + #### Comment Threads and Discussions @@ -188,6 +196,11 @@ similar structures in ClojureScript. https://www.reddit.com/r/javascript/comments/5pyeni/tutorial_create_an_instagramlike_app_with_react/dcvlvzw/ A humorous comment summarizing the benefits of using React over jQuery, and Redux/MobX along with plain React. +- **"Is it a good practice to use Create-React-App for learning?"** + https://news.ycombinator.com/item?id=13944449 + https://www.reddit.com/r/reactjs/comments/60vurv/is_using_create_react_app_bad_practice/ + My comments addressing why CRA exists, and why it's a good idea to use it when learning React (especially in comparison to a "learn Webpack+Babel first" approach). + #### React's PATENTS License diff --git a/react-component-patterns.md b/react-component-patterns.md index 4d3c534..ac4ae9b 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -319,6 +319,10 @@ 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 +- **Simplifying life with React render callbacks** + https://medium.com/@adamrackis/simplifying-life-with-react-render-callbacks-cb37d58e55 + An overview of several different ways to wrap up components, including cloning children, HOCs, and render callbacks. + #### Wrapping Non-React Code diff --git a/react-redux-testing.md b/react-redux-testing.md index 328100c..1241393 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -236,4 +236,8 @@ - **Web Application Test Strategy** https://blog.scottnonnenberg.com/web-application-test-strategy/ - Thoughts on a "test pyramid" approach to testing, balancing speed and results between unit tests, integration tests, and automation. \ No newline at end of file + Thoughts on a "test pyramid" approach to testing, balancing speed and results between unit tests, integration tests, and automation. + +- **Enzyme vs Unexpected-React** + https://medium.com/@bruderstein/enzyme-vs-unexpected-react-ee9cb099d12b + A comparison of how Enzyme and Unexpected-React are used in testing React components, with arguments in favor of Unexpected-React \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index 9b68aa5..11fe416 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -54,6 +54,10 @@ - **Lowest Common Ancestor** https://blog.embermap.com/lowest-common-ancestor-fbf5d5313a1 An article that discusses the principle of keeping shared state at the "lowest common ancestor" of the components that need it. Actually talks about Ember, but the concepts are completely applicable to React as well. + +- **Understanding State and Props in React** + https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c + A helpful explanation of the difference between "props" and "state". #### Using `setState` @@ -93,4 +97,12 @@ - **Does React have a `setState` problem? / `setState() Gate: Navigating Behavior Confusion** https://twitter.com/i/moments/842710066826530816 https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 - Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it. That spawned a large Twitter thread arguing the idea. Elliott later posted an article explaining his concerns in detail. Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading. \ No newline at end of file + Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it. That spawned a large Twitter thread arguing the idea. Elliott later posted an article explaining his concerns in detail. Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading. + +- **Understanding ReactJS: `setState`** + https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b + Several helpful tips and concepts for understanding how component state and `setState` work, including how to initialize component state, ways to call `setState`, and common errors. + +- **Stack Overflow: "Do I need to use `setState(function) overload?"** + http://stackoverflow.com/questions/43428456/do-i-need-to-use-setstatefunction-overload-in-this-case/43440790#43440790 + Dan Abramov gives a great in-depth answer explaining when and why to pass an updater function to `setState` instead of passing an object \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index a7f2435..bbe831a 100644 --- a/react-styling.md +++ b/react-styling.md @@ -56,6 +56,10 @@ 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. +- **How we made our product more personalized with CSS Variables and React** + https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608 + A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles + #### JS-Based Approaches @@ -87,6 +91,10 @@ http://ludovf.net/blog/comparing-css-in-js-solutions/ An overview of the various CSS-in-JS libraries and how their implementations differ. +- **CSS in React Comparison Examples** + https://github.com/joeshub/css-in-react + A repo that demonstrates the basics of several different React CSS approaches and libraries. + #### Style Libraries diff --git a/react-tutorials.md b/react-tutorials.md index 35d3346..c15958e 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -19,6 +19,14 @@ - **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. + +- **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. + +- **React Fundamentals** + https://reacttraining.com/online/react-fundamentals + A free online course from the React Training company. Covers key aspects of Javascript, React concepts as of React 15.5, React Router v4, and building and deploying an application. - **React to the Future** http://elijahmanor.com/talks/react-to-the-future/dist/#/ diff --git a/redux-architecture.md b/redux-architecture.md index af8f9a7..76ea7db 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -30,6 +30,10 @@ https://www.fullstackreact.com/articles/redux-with-mark-erikson/ An introduction to some benefits that Redux can give you when used in a React app, including multiple views of the same data and improved development with hot reloading. +- **When to use Redux** + 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. + #### Redux Architecture @@ -313,4 +317,8 @@ - **How we reduced boilerplate and handled asynchronous actions with Redux** https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/ - A look at conventions that have helped the Algolia team write Redux apps. \ No newline at end of file + A look at conventions that have helped the Algolia team write Redux apps. + +- **Ducks++: Redux Reducer Bundles** + https://medium.com/@DjamelH/ducks-redux-reducer-bundles-44267f080d22 + Describes an enhancement to the original "ducks" proposal, adding a string constant to help define where the state is kept in the store. \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index 7fbcda3..56a3e90 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -110,6 +110,14 @@ https://c3-tko.github.io/redux-would-you-like-to-know-more/#/ A pair of HTML slideshows that discuss some of the problems of storing application state, how Redux can help solve those problems, and several tradeoffs and benefits of using Redux. +- **DevGuides: Introduction to Redux** + http://devguides.io/redux/ + A tutorial that covers several aspects of Redux, including actions, reducers, usage with React, and middleware. + +- **React-Redux `connect` explained** + https://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/ + A short but clear explanation of what the React-Redux library does, and how its `connect` function works to interact between React components and a Redux store (including several helpful diagrams). + #### Project-Based Tutorials @@ -253,6 +261,14 @@ http://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux/ http://blog.jakoblind.no/2017/03/20/learn-react-redux-by-coding-the-connect-function-yourself/ Another "build a mini-Redux" series, including an explanation of how React-Redux's `connect` function works + +- **Dissecting Redux** + https://medium.com/@jankjr_/dissecting-redux-864039c6cf59 + A dive through the source code of Redux looking at the parts that really matter, with discussion of the design decisions and patterns used and what consequences they have. + +- **"Redux without the sanity checks in a single file** + https://gist.github.com/gaearon/ffd88b0e4f00b22c3159 + A gist from Dan Abramov, showing how Redux's core logic fits into <100 LOC. #### Paid Courses and Books