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