Split "React Architecture" into multiple separate categories

README.md

@@ -1,7 +1,7 @@
 # React/Redux Links
-Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem.  Not quite "awesome", but hopefully useful as a starting point I can give to others.  Suggestions welcome.
+Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques.  Not quite "awesome", but hopefully useful as a starting point I can give to others.  Suggestions welcome.
 
-Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies.  There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn.  The invite link is at https://www.reactiflux.com.
+Another important resource is the **Reactiflux community on Discord**, which has chat channels dedicated to discussion of React, Redux, and other related technologies.  There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn.  The invite link is at **https://www.reactiflux.com**.
 
 You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links).  Also see [Community Resources](community-resources.md) for links to other links lists, podcasts, and email newsletters.
 
@@ -32,9 +32,13 @@ You might also want to check out my categorized list of Redux-related addons, li
 
 #### Advanced Topics
 
-- [React Performance](react-performance.md)
+- [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 Styling](./react-styling.md)
+- [React/Redux Performance](react-performance.md)
 - [React/Redux Architecture](react-redux-architecture.md)
-- [React Styling](react-styling.md)
 - [Redux Side Effects](redux-side-effects.md)
 - [Redux Tips and Techniques](redux-techniques.md)
 - [Webpack Advanced Techniques](webpack-advanced-techniques.md)

react-ajax.md

@@ -0,0 +1,29 @@
+### React and AJAX
+
+- **React AJAX Best Practices**  
+  http://andrewhfarmer.com/react-ajax-best-practices/  
+  Covers four ways to approach managing queries and data fetching.
+
+- **AJAX/HTTP Library Comparison**  
+  http://andrewhfarmer.com/ajax-libraries/  
+  A useful overview of the most popular AJAX libraries, including platform support and feature comparisons.
+
+- **Implementing React Redux with GraphQL**  
+  https://marufsarker.github.io/blog/posts/2016/05/09/react-redux-with-graphql.html  
+  Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions.
+
+- **Rendering Backend Requests with React**  
+  https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6  
+  Describes a pattern for dealing with components that depend on loading data from a backend
+
+- **Build a React + Flux App with User Authentication**  
+  https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication  
+  Builds a React app that calls a remote API and authenticates users.  Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable.
+
+- **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets**  
+  http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/  
+  A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI.
+
+- **AJAX Requests in React: How and Where to Fetch Data**  
+  https://daveceddia.com/ajax-requests-in-react/  
+  An overview of where AJAX requests fit into React usage.

react-component-patterns.md

@@ -0,0 +1,96 @@
+### React Component Patterns
+
+#### Terms and Concepts
+
+- **React Patterns**  
+  http://reactpatterns.com/  
+  An excellent list of common patterns for structuring React components, with examples
+
+- **React Component Jargon as of August 2016**  
+  https://medium.com/@arcomito/react-component-jargon-as-of-august-2016-28451d8ceb1d  
+  A very useful glossary of widely-used terms describing React components
+
+- **Functional Components vs. Stateless Functional Components vs. Stateless Components**  
+  https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c  
+  Clarifies the meaning of the terms, which are often used in overlapping ways.
+
+- **How to use Classes and Sleep at Night**  
+  https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4  
+  Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components.
+
+
+#### Component Categories
+
+- **Presentational and Container Components**  
+  https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0  
+  Dan Abramov's foundational article on classifying components based on intent and behavior.  A must-read for anyone using React.
+
+- **Leveling Up with React: Container Components**  
+  https://css-tricks.com/learning-react-container-components/  
+  Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data.
+
+- **Smart and Dumb Components in React**  
+  http://jaketrent.com/post/smart-dumb-components-react/  
+  Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts.
+
+- **Ramblings About React and Redux Architecture**  
+  https://medium.com/@kurtiskemple/ramblings-about-react-and-redux-architecture-c27dfff79ddf  
+  Thoughts on structuring components as "Providers", "Behavior", and "Presentational"
+
+- **The Anatomy of a React Redux App**  
+  https://medium.com/@rajaraodv/the-anatomy-of-a-react-redux-app-759282368c5a  
+  Breaks down the component structure of a typical React/Redux app, and classifies the different types of components that usually show up
+
+
+#### Higher-Order Components
+
+- **Mixins Are Dead.  Long Live Composition**  
+  https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750  
+  A look at some of the issues with using mixins, and reasons why higher-order components are (usually) an improvement.
+
+- **Higher Order Components: Theory and Practice**  
+  http://engineering.blogfoster.com/higher-order-components-theory-and-practice/  
+  Gives practical use cases for HOCs, such as authentication, routing, and data management, with samples.
+
+- **Sharing and Testing Code in React with Higher Order Components**  
+  http://blog.carbonfive.com/2016/02/02/sharing-and-testing-code-in-react-with-higher-order-components/  
+  Demonstrates extracting HOCs from existing code, and testing them.
+
+- **Higher Order React Components**  
+  http://natpryce.com/articles/000814.html  
+  A solid explanation of what HoCs are, with examples and use cases
+
+- **Higher Order Components: A React Application Design Pattern**  
+  https://www.sitepoint.com/react-higher-order-components/  
+  A discussion of how to use Higher Order Components to keep your React applications tidy, well structured and easy to maintain.  Also, how pure functions keep code clean and how these same principles can be applied to React components.
+
+- **Connected Higher Order Components with React and Redux**  
+  http://www.avitzurel.com/blog/2016/08/03/connected-higher-order-components-with-react-and-redux/  
+  Demonstrates creating HoCs that are connected to Redux
+
+- **React, Higher Order Components, and Legacy Applications**  
+  http://browniefed.com/blog/react/  
+  Examples of how to integrate React into an existing application using HoCs
+
+- **React Higher Order Components in depth**  
+  https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e  
+  A very detailed article looking at some advanced HoC patterns
+
+
+#### Other Component Patterns
+
+- **Dynamically Rendering React Components**  
+  https://wail.es/dynamically-rendering-react-components/  
+  Examples of how to dynamically determine which React component to render
+
+- **The React Controller View Pattern**  
+  http://blog.andrewray.me/the-reactjs-controller-view-pattern/  
+  Describes using top-level components to hold state and pass it to children as props
+
+- **Function as Child Components**  
+  https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9  
+  Explains the "function as a child" technique as an alternative to Higher Order Components
+
+- **Functional React Series - Part 1: Get your App outta my Component**  
+  https://medium.com/@adamterlson/functional-react-series-part-1-get-your-app-outta-my-component-92656ae13e25  
+  Part 1 in a series about writing React applications by treating components as functions, not templates.

react-forms.md

@@ -0,0 +1,81 @@
+### React and Forms
+
+(Note: the "linked state mixin" and "two-way binding" approaches described in some of these articles are still valid, but _mostly_ discouraged at this point.  The more idiomatic approach is "one-way data flow" with "controlled inputs".)
+
+
+#### "Controlled" and "Uncontrolled Inputs
+
+- **React Docs: Forms**  
+  https://facebook.github.io/react/docs/forms.html  
+  The React documentation page on forms.  Describes "controlled" and "uncontrolled" form inputs.
+
+- **React "controlled" vs "uncontrolled" inputs**  
+  https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc  
+  An explanation of the terms "controlled inputs" and "uncontrolled inputs"
+
+- **React Form Components**  
+  http://donavon.js.org/react-forms/  
+  A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers.
+
+- **Uncontrolled components are an anti-pattern**  
+  https://medium.com/@jedwards8/uncontrolled-components-are-an-anti-pattern-abbdd86fd39e  
+  Argues that uncontrolled components are a bad idea and should be avoided.
+
+- **ReactJS and controlled forms**  
+  http://leftdevel.com/blog/reactjs-controlled-forms/  
+  A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs.
+
+- **Managing React Controlled Component State**  
+  http://spraso.com/managing-react-controlled-component-state/  
+  Some short examples of how to properly manage state for controlled inputs
+
+- **Managing state and controlled form fields with React**  
+  https://blog.iansinnott.com/managing-state-and-controlled-form-fields-with-react/  
+  Describes the concepts of "controlled" and "uncontrolled" inputs.  
+
+
+#### Form Tutorials and Usage
+
+- **Learn Raw React: Ridiculously Simple Forms**  
+  http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/  
+  Covers the basics of implementing form rendering, updates, and validation, in plain JS
+
+- **Forms in React and Redux**  
+  http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/  
+  Demonstrates building a simple set of wrapper components to manage forms using React and Redux
+
+- **Not-so-simple Forms with React**  
+  http://www.randseay.com/articles/forms-with-react/  
+  Explains how to set up more advanced form scenarios such as optional or repeatable sections.
+
+- **Using React's state to manage data entry**  
+  https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42
+  Describes how to manage data for forms using React component state and some wrapper components.
+
+- **Handling React Forms with Mobx Observables**  
+  https://blog.risingstack.com/handling-react-forms-with-mobx-observables/  
+  Some examples of working with forms in React, using MobX for the data management.
+
+- **Forms in React and Redux**  
+  http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/  
+  A good example of how to set up form handling in conjunction with a Redux store.
+
+- **Radio Buttons and Checkboxes in React**  
+  http://react.tips/radio-buttons-in-reactjs/  
+  http://react.tips/checkboxes-in-react/  
+  Tutorials on managing various inputs in forms with React
+
+
+#### Form Validation
+
+- **Form Validation Tutorial with React.js**  
+  https://html5hive.org/reactjs-form-validation-tutorial/  
+  A good example of setting up form validation in React
+
+- **Elegant Form Validation in React**  
+  https://spin.atomicobject.com/2016/10/05/form-validation-react/  
+  Examples of adding validation to a form
+
+- **Two-Way Data Binding and Form Validation in React**  
+  https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176  
+  Another demonstration of building a form with some logic and validation.