react-architecture.md

React Architecture and Best Practices

Thinking in React

• Thinking in React
  https://facebook.github.io/react/docs/thinking-in-react.html
  The original guide to breaking a UI into components and setting up data flow

• Removing User Interface Complexity, or Why React is Awesome
  http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
  A long walkthrough that builds up a pseudo-React-like library, demonstrating what React does and why you would want to use it. Has lots of embedded demos.

• Describing UI State with Data
  http://nicolashery.com/describing-ui-state-with-data/
  Demonstrates modeling the state and actions of an application, and updating the UI based on that.

• 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

• "Trying to understand why React prefers one-way data binding"
  https://www.reddit.com/r/javascript/comments/4ni311/trying_to_understand_why_react_prefers_oneway/
  Some excellent and very informative discussion on why the "one-way data flow" paradigm is used with React, vs two-way data binding.

• You're Missing the Point of React
  https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a
  Dan Abramov explains React's real value: not popularizing the virtual DOM, but its use of composition and unidirectional data flow

• How to solve a Problem with React
  https://codequs.com/p/HyLJOnBt/how-to-solve-a-problem-with-react/
  A guide explaining ways to approach planning out a React app: composing individual components into larger components, or working top-down to plan out a component hierarchy.

• A Conceptual Introduction to React Components
  https://ifelse.io/2016/10/20/introducing-react-components/
  Examples and suggestions for how to approach breaking a UI concept into components with relationships

• Common React Mistakes - Unneeded State
  http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/
  Examples of how to think about and model data and UI state

• Understanding the Functional Revolution in Front-End Applications
  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
  https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/
  Another tutorial on functional programming and how it relates to React

• 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)

• Lessons Backbone Developers Can Learn From React
  http://benmccormick.org/2015/09/09/what-can-backbone-developers-learn-from-react/
  Discusses 3 lessons from React: "UIs are trees of reusable components", "modern JS is cleaner code", and "don't use DOM for state"

• State is an Anti-Pattern
  https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/
  Some long-winded but useful thoughts on what makes a good component: "intuitive", "same input -> same output", "pure", and "only side effects are Flux actions"

• Why Local Component State is a Trap
  https://www.safaribooksonline.com/blog/2015/10/29/react-local-component-state/
  Thoughts on a "single state tree" vs local component state

• Functional Javascript: Reverse-Engineering the Hype
  http://banderson.github.io/functional-js-reverse-engineering-the-hype/#/
  A slideshow that talks about why functional-type programming matters, and how it relates to React-type apps.

• Principles of Strong Components
  http://gedd.ski/post/strong-components/
  Generic advice on designing good components. Not React-specific, but highly applicable to React.

• Some Thoughts on Function Components in React
  https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7
  Suggestions for ways to approach writing components, particularly using React's functional component syntax

• Why React is Awesome at Scale
  https://medium.com/@cowi4030/why-react-is-awesome-at-scale-acfd9ce53c23
  Examples of how React's use of declarative rendering simplifies the need to think about imperative state transitions.

• "What are the biggest 'aha' moments you had while learning React?"
  https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_while/
  Some great discussion of important concepts and things to understand about React.

• React "aha" moments
  https://tylermcginnis.com/react-aha-moments/
  Tyler McGinnis shares some of his own "aha" moments in thinking about React

• From Backbone to React: How to write great code
  https://frontendne.co.uk/talks/from-backbone-to-react-how-to-write-great-code
  A talk that looks at a number of key ideas that React helps you understand, and uses some comparisons between Backbone and React to illustrate them.

• Thinking Statefully
  https://daveceddia.com/thinking-statefully/
  Some great examples of how to think in declarative/stateful terms (such as passing an isOpen prop to a modal instead of calling open() ).

• Just Write Components
  https://medium.com/lystable-product-engineering/just-write-components-75bd7875223e
  The Lystable team discusses how consistently writing encapsulated components leads to scalability in application development

• "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.

• Front End Center: Single-Responsibility Components: Object-Oriented Design in React
  https://youtu.be/pSdp92Up8O8
  An excellent screencast that discusses how the "Single Responsibility Principle" can be applied to organizing and designing React components.

• React's Ecosystem as a flexible Framework
  https://www.robinwieruch.de/essential-react-libraries-framework/
  Robin Wieruch discusses why React's "just the view" + "pick-and-choose libraries" approach is ultimately a good thing, and provides some opinionated decisions on good library choices for several categories such as app boilerplate, utility library, styling, AJAX requests, and more.

• 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

• Nine things every React beginner should know
  https://camjackson.net/post/9-things-every-reactjs-beginner-should-know
  A solid list of concepts and suggestions for writing a React-based app.

• React Best Practices and Tips
  http://www.toptal.com/react/tips-and-practices
  Several excellent guidelines for component structure and behavior

• Best Practices for Building Large React Applications
  http://blog.siftscience.com/blog/2015/best-practices-for-building-large-react-applications
  Excellent advice for structuring components and improving reuse

• Designing Simpler React Components
  https://medium.com/building-asana/designing-simpler-react-components-13a0061afd16
  Tips on developing components for a scalable application, including using immutable data, pure functions, and some interesting suggestions on injecting data into components to improve separation of concerns.

• React.js Best Practices for 2016
  https://blog.risingstack.com/react-js-best-practices-for-2016/
  Some high-level suggestions for tools and approaches.

• How to avoid refactoring in your first React.js application
  http://andrejgajdos.com/how-to-avoid-refactoring-in-your-first-react-application/
  Covers several useful topics such as props vs state and use of shouldComponentUpdate, and links to several other articles on anti-patterns and component lifecycles.

• The State of React.js in 2016
  https://speakerdeck.com/koba04/the-state-of-react-dot-js-2016
  Looks at a number of things to consider when writing React code today, including deprecation of string refs and upcoming updates to the React rendering implementation

• React Playbook
  https://github.com/kylpo/react-playbook
  https://medium.com/@kylpo/redux-best-practices-eef55a20cc72
  A variety of tips, best practices, opinions, and comparisons related to React, Redux, Immutable.js, and MobX. Includes thoughts on component architecture, file structure, coding style, and other topics.

• React Best Practices & Patterns
  http://seanamarasinghe.com/developer/react-best-practices-patterns/
  A number of useful conventions for writing React code.

• React Gotchas
  https://daveceddia.com/react-gotchas/
  Three quick tips to keep in mind while writing React code (capitalize component names, close all JSX tags, and remember setState is asynchronous)

• 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

• 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

• React Best Practices
  https://medium.com/@nesbtesh/react-best-practices-a76fd0fbef21
  Suggestions and tips for effectively writing React and Redux

• 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.

• The Top 5 [Tips] of Effective React
  https://code.kiwi.com/the-top-5-of-effective-react-984e54cceac3
  Tips include using container/presentational components, keeping components simple, and more.

• Advice on large scale React apps - rebuilding the social publishing platform for Latam
  https://medium.com/taringa-on-publishing/advice-on-large-scale-react-js-apps-rebuilding-the-biggest-social-publishing-platform-for-latam-1f4c8fa35a4f
  Lessons learned from migrating a PHP application to a universal React/Redux/Webpack application, including introducing React to a team, documentation, types, and more.

• 11 lessons learned as a React contractor
  https://medium.com/@jolyon_russ/11-lessons-learned-as-a-react-contractor-f515cd0491cf
  https://news.ycombinator.com/item?id=13332138
  A number of useful tips, including using multiple small components instead of one customizable one, migrating build processes, keeping things simple, and more. Extended discussion in the HN comments.

• 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, and much more.

• 10 Reasons why I moved from Angular to React
  https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react/
  Robin Wieruch gives some good thoughts why he chose to focus on React. A nice overview of some of React's benefits.

• Our journey migrating 100K lines of code from AngularJS to React
  https://tech.small-improvements.com/2017/01/25/how-to-migrate-an-angularjs-1-app-to-react/
  The Small Improvements team describes how they implemented an Angular>React migration, starting from the bottom up.

• Our Best Practices for Writing React Components
  https://medium.com/code-life/our-best-practices-for-writing-react-components-dec3eb5c3fc8
  A description of the MuseFind team's approaches for writing components

• Lessons Learnt Rewriting a React Library from Scratch
  https://www.codecks.io/blog/2017/lessons-learnt-rewriting-react-lib/
  Some suggestions for use of context, embracing components, and writing documentation

• 10 React mini-patterns
  https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
  A collection of simple but useful patterns for writing React code, from basic top-down data flow via props to formatting text for display.

• 8 Tips for Dealing with Large React Codebases
  https://medium.com/@l_e/8-tips-for-dealing-with-large-react-codebases-aed6235500a4
  Several useful suggestions, including using guard clauses when rendering, writing descriptive component names, simplifying form change handlers, and more.

• How to Organize a Large React Application and Make It Scale
  https://www.sitepoint.com/organize-large-react-application/
  A number of practical suggestions for managing large codebases, including build config to simplify imports, folder structures, file naming, Redux, tests, and more.

• React Properly
  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

• Techniques for decomposing React components
  https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da
  Three useful techniques for splitting up components: splitting render methods, passing React elements as props, and extracting higher-order components.

• How to become a more productive React developer
  https://dev.to/karljakoblind/how-to-become-a-more-productive-react-developer
  Quick suggestions for useful tools that increase productivity, including Prettier for formatting, ESLint for error checking, the React and Redux DevTools for debugging, and React-Hot-Loader for faster edits.

• 8 Things to learn in React before using Redux
  https://www.robinwieruch.de/learn-react-before-using-redux/
  Robin Wieruch covers a list of key React concepts you should be familiar with before trying to tackle learning Redux or other major state management libraries.

• 7 architectural attributes of a reliable React component
  https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/
  An excellent list of principles to consider when designing React components, including single responsibility, encapsulation, reusability, testability, and meaning.

• 8 Key React Component Decisions
  https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594
  A list of important design decisions to consider when starting a React project, including use of a starter kit, preferred component definition approach, state management, styling, and more.

• Is React SOLID?
  https://dev.to/kayis/is-react-solid-630
  Looks at the SOLID architectural principles, and discusses how those apply to React components.

• Clean Code vs Dirty Code: React Best Practices
  http://americanexpress.io/clean-code-dirty-code/
  Some very opinionated thoughts on what qualifes as "clean" React code. Your experience may vary, but some interesting food for thought.

• React Architecture 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

• 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 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.

• Reusable Web Application Strategies: three patterns for running the same app in multiple spots
  https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8
  Looks at how to run an app in reusable ways via iframes, reusable app components, and reusable UI components.

• Integrating React in a 6+ Year Old Rails App
  https://blog.codeship.com/integrating-react-in-a-6-year-old-rails-app/
  Discuss techniques for using React in an existing Rails app. Focus is a bit more on the Rails side of things, but some useful info.

• Characteristics of an Ideal React Architecture
  https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b
  Some opinionated thoughts on what constitutes good React architecture, including avoiding use of components as controllers, keeping prop passing to just a few levels, and ensuring that diff calculations are cheap.

• 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.