Restructure pages for improved clarity and organization

Extracted "Architecture and Best Practices" pages for React and Redux Extracted "React Implementation" page Extracted "Redux Middleware" page Renamed "React/Redux Architecture" to "Project Structure" Moved entries from "Thinking in React" to "React Architecture" Moved entries on "Component Lifecycle" and "Component Communication" to "React Component Patterns" Lots of other stuff moved around :)
yiweima · Nov 6, 2016 · c9c8fd7 · c9c8fd7
1 parent 9e815c9
commit c9c8fd7
Show file tree

Hide file tree

Showing 13 changed files with 680 additions and 596 deletions.
diff --git a/README.md b/README.md
@@ -34,30 +34,30 @@ You might also want to check out my categorized list of Redux-related addons, li
 
 #### Advanced Topics
 
-- **React**:
+- **Architecture and Structure**
+  - [Project Structure](./project-structure)
   - [React Component Patterns](./react-component-patterns.md)
   - [React State Management](./react-state-management.md)
+  - [React Architecture and Best Practices](./react-architecture.md)
+  - [Redux Architecture and Best Practices](./redux-architecture.md)
+  - [React/Redux Performance](react-performance.md)
+- **React**:
+  - [React Implementation and Concepts](./react-implementation)
   - [React and Forms](./react-forms.md)
   - [React and AJAX](./react-ajax.md)
   - [React Styling](./react-styling.md)
   - [React Server Rendering](./react-server-rendering.md)
-  - [React and Routing](./react-routing.md)
-- **React and Redux**
-  - [React/Redux Performance](react-performance.md)
-  - [React/Redux Architecture](react-redux-architecture.md)
+  - [React and Routing](./react-routing.md)  
 - **Redux**
+  - [Redux Middleware](./redux-middleware.md)
   - [Redux Side Effects](redux-side-effects.md)
   - [Redux Tips and Techniques](redux-techniques.md)
 - **Other**
   - [Webpack Advanced Techniques](webpack-advanced-techniques.md)
   - [Static Typing](./static-typing.md)
 
 
-
-
-#### Guidelines, Comparisons, and Discussion
-- [Thinking in React and Flux](thinking-in-react-and-flux.md)
-- [Tips, Guidelines, and Best Practices](tips-and-best-practices.md)
+#### Comparisons and Discussion
 - [React/Flux/Redux Pros, Cons, and Discussion](pros-cons-discussion.md)
 - [React and Flux vs Backbone](react-vs-backbone.md)
 

diff --git a/project-structure.md b/project-structure.md
@@ -0,0 +1,87 @@
+### Project Structure
+
+
+**Related topics**:
+- [React Component Patterns](./react-component-patterns.md)
+- [React State Management](./react-state-management.md)
+- [React and Forms](./react-forms.md)
+- [React and AJAX](./react-ajax.md)
+- [React Architecture and Best Practices](./react-architecture.md)
+- [Redux Architecture and Best Practices)](./redux-architecture.md)
+
+
+#### Project File Structure
+
+- **Scaling React.js Applications**  
+  https://vimeo.com/168648012  
+  Max Stoiber's talk about managing large react.js applications. Covers "Feature" structure, redux-saga and CSS modules.
+
+- **How to Scale React Applications**  
+  https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/  
+  Max Stoiber, creator of the popular "React-Boilerplate" starter kit, describes the approaches they use to lay out projects based on features.
+
+- **Organizing Large React Applications**  
+  http://engineering.kapost.com/2016/01/organizing-large-react-applications/  
+  Describes "File-Type First", "Feature First / Pods" approaches, as well as other related structure issues.
+
+- **Four Strategies for Organizing Code**  
+  https://medium.com/@msandin/strategies-for-organizing-code-2c9d690b6f33  
+  Describes "by component", "by toolbox", "by layer", and "by kind" approaches.
+
+- **Rules for Structuring (Redux) Applications**  
+  http://jaysoo.ca/2016/02/28/organizing-redux-application/  
+  Gives several useful rules for structuring code, with examples.
+
+- **A Better File Structure for React/Redux Applications**  
+  http://marmelab.com/blog/2015/12/17/react-directory-structure.html  
+  Suggests a domain-based structure, with tests kept alongside the code they relate to.
+
+- **Route-Based Folder Structure**  
+  https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346  
+  Ryan Florence, an author of React Router, gives his suggested file structure.
+
+- **How to Better Organize Your React Applications?**  
+  https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1  
+  Another feature-style approach, describing things in terms of "components", "scenes", and "services".
+
+- **Fractal Project Structure**  
+  https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure  
+  Docs from the React Redux Starter Kit project describing their "Fractal Project Structure" concept, and advice for file and app organization.
+
+- **Redux Structure: a Way to Success**  
+  https://datarockets.com/blog/redux-structure  
+  Thoughts on a "modules and components"-based approach to file structure, 
+
+- **My journey toward a maintainable project structure for React/Redux**  
+  https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5  
+  Describes an evolution of approaches for project structure
+
+- **Building Modular Redux Applications**  
+  https://vimeo.com/album/4199344/video/187454108  
+  A talk discussing an approach to Redux structure by splitting logic into "data providers/sources" and presentation.
+
+- **How to Structure real world Redux/React Applications**  
+  https://medium.com/@yiquanzhou/how-to-structure-real-world-redux-react-application-d61e66a7dd36  
+  Another look at structuring code, based on business logic, data domains, and reusability.
+
+
+#### React Integration
+
+- **How to Write a Google Maps React Component**  
+  https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/  
+  Demonstrates how to wrap a third-party component that has an imperative API, lazy-loading the dependencies, and more.
+
+- **Building SVG Maps with React**  
+  https://blog.komand.com/building-svg-maps-with-react  
+  Demonstrates building a component that zooms and pans SVG graphics based on user input.
+
+- **How to Sprinkle ReactJS into an Existing Web Application**  
+  https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application  
+  Looks at how to incrementally add some React-based functionality into an existing app.
+
+- **Making custom renderers for React**  
+  http://goshakkk.name/react-custom-renderers/  
+  Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas
+
+
+
diff --git a/react-architecture.md b/react-architecture.md
@@ -0,0 +1,137 @@
+### 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**  
+  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.
+
+
+
+#### 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
+
+- **Helpful principles when starting with React**  
+  http://ignaciochavez.com/helpful-principles-starting-react/  
+  Several useful tips for structuring components, managing data flow, and updating data.  Has some excellent diagrams illustrating the concepts described.
+
+- **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
+
+- **5 Simple Tips for Your First React + Redux Project**  
+  https://blog.preen.ly/5-simple-tips-for-your-first-react-redux-project-10cbb2727b9a  
+  Good suggestions for managing state and structure, including using local component state when necessary, use of selector functions, and more.
+
+- **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.
diff --git a/react-component-patterns.md b/react-component-patterns.md
@@ -35,6 +35,52 @@
   Discusses the difference between "parent" and "owner" relationships, and what the "children" prop can look like.
 
 
+#### React Component Lifecycle
+
+- **React Docs: Component Specs and Lifecycle**  
+  https://facebook.github.io/react/docs/component-specs.html  
+  The official React docs page on component lifecycle
+
+- **Understanding the React Component Lifecycle**  
+  http://busypeoples.github.io/post/react-component-lifecycle/  
+  A good look at which lifecycle methods run in which situations, as well as the signatures of each method.
+
+- **Dissecting React Lifecycle Methods**  
+  https://medium.com/@fay_jai/dissecting-reactjs-lifecycle-methods-be4fdea11c6d  
+  Breaks the lifecycle methods down into "mount/unmount" and "update" categories, and describes the purpose and use of each.
+
+- **The React Component Lifecycle**  
+  https://www.kirupa.com/react/component_lifecycle.htm  
+  Another useful description of the order and purpose of the lifecycle methods.
+
+- **React In-Depth: The React Life Cycle**  
+  https://developmentarc.gitbooks.io/react-indepth/content/  
+  A deep dive into the lifecycle methods, and various techniques for using them.
+
+
+#### Component Communication
+
+- **8 no-Flux strategies for React component communication**  
+  http://andrewhfarmer.com/component-communication/  
+  Very helpful list of ways to have React components communicate back and forth
+
+- **How to communicate between React components**  
+  http://ctheu.com/2015/02/12/how-to-communicate-between-react-components/  
+  Another good list of component communication strategies
+
+- **How to handle React context in a reliable way**  
+  https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc  
+  Covers what the `context` feature is, how to use it, and some concerns to be aware of.
+
+- **How to safely use React context**  
+  https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076  
+  Guidelines for when and how to actually use React's `context` feature
+
+- **Context All the Things with React**  
+  https://www.youtube.com/watch?v=k9AhBMwj1w4  
+  A talk on what `context` is, and how to use it safely
+
+
 #### Component Categories
 
 - **Presentational and Container Components**