Skip to content

Commit 0ae5711

Browse files
markeriksonmarkerikson
committed
Split "React Architecture" into multiple separate categories
1 parent 572eeef commit 0ae5711

File tree

6 files changed

+263
-228
lines changed

6 files changed

+263
-228
lines changed

‎README.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# React/Redux Links
2-
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.
2+
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.
33

4-
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.
4+
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**.
55

66
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.
77

@@ -32,9 +32,13 @@ You might also want to check out my categorized list of Redux-related addons, li
3232

3333
#### Advanced Topics
3434

35-
- [React Performance](react-performance.md)
35+
- [React Component Patterns](./react-component-patterns.md)
36+
- [React State Management](./react-state-management.md)
37+
- [React and Forms](./react-forms.md)
38+
- [React and AJAX](./react-ajax.md)
39+
- [React Styling](./react-styling.md)
40+
- [React/Redux Performance](react-performance.md)
3641
- [React/Redux Architecture](react-redux-architecture.md)
37-
- [React Styling](react-styling.md)
3842
- [Redux Side Effects](redux-side-effects.md)
3943
- [Redux Tips and Techniques](redux-techniques.md)
4044
- [Webpack Advanced Techniques](webpack-advanced-techniques.md)

‎react-ajax.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
### React and AJAX
2+
3+
- **React AJAX Best Practices**
4+
http://andrewhfarmer.com/react-ajax-best-practices/
5+
Covers four ways to approach managing queries and data fetching.
6+
7+
- **AJAX/HTTP Library Comparison**
8+
http://andrewhfarmer.com/ajax-libraries/
9+
A useful overview of the most popular AJAX libraries, including platform support and feature comparisons.
10+
11+
- **Implementing React Redux with GraphQL**
12+
https://marufsarker.github.io/blog/posts/2016/05/09/react-redux-with-graphql.html
13+
Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions.
14+
15+
- **Rendering Backend Requests with React**
16+
https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6
17+
Describes a pattern for dealing with components that depend on loading data from a backend
18+
19+
- **Build a React + Flux App with User Authentication**
20+
https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication
21+
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.
22+
23+
- **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets**
24+
http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/
25+
A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI.
26+
27+
- **AJAX Requests in React: How and Where to Fetch Data**
28+
https://daveceddia.com/ajax-requests-in-react/
29+
An overview of where AJAX requests fit into React usage.

‎react-component-patterns.md

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
### React Component Patterns
2+
3+
#### Terms and Concepts
4+
5+
- **React Patterns**
6+
http://reactpatterns.com/
7+
An excellent list of common patterns for structuring React components, with examples
8+
9+
- **React Component Jargon as of August 2016**
10+
https://medium.com/@arcomito/react-component-jargon-as-of-august-2016-28451d8ceb1d
11+
A very useful glossary of widely-used terms describing React components
12+
13+
- **Functional Components vs. Stateless Functional Components vs. Stateless Components**
14+
https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c
15+
Clarifies the meaning of the terms, which are often used in overlapping ways.
16+
17+
- **How to use Classes and Sleep at Night**
18+
https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4
19+
Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components.
20+
21+
22+
#### Component Categories
23+
24+
- **Presentational and Container Components**
25+
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
26+
Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
27+
28+
- **Leveling Up with React: Container Components**
29+
https://css-tricks.com/learning-react-container-components/
30+
Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data.
31+
32+
- **Smart and Dumb Components in React**
33+
http://jaketrent.com/post/smart-dumb-components-react/
34+
Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts.
35+
36+
- **Ramblings About React and Redux Architecture**
37+
https://medium.com/@kurtiskemple/ramblings-about-react-and-redux-architecture-c27dfff79ddf
38+
Thoughts on structuring components as "Providers", "Behavior", and "Presentational"
39+
40+
- **The Anatomy of a React Redux App**
41+
https://medium.com/@rajaraodv/the-anatomy-of-a-react-redux-app-759282368c5a
42+
Breaks down the component structure of a typical React/Redux app, and classifies the different types of components that usually show up
43+
44+
45+
#### Higher-Order Components
46+
47+
- **Mixins Are Dead. Long Live Composition**
48+
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
49+
A look at some of the issues with using mixins, and reasons why higher-order components are (usually) an improvement.
50+
51+
- **Higher Order Components: Theory and Practice**
52+
http://engineering.blogfoster.com/higher-order-components-theory-and-practice/
53+
Gives practical use cases for HOCs, such as authentication, routing, and data management, with samples.
54+
55+
- **Sharing and Testing Code in React with Higher Order Components**
56+
http://blog.carbonfive.com/2016/02/02/sharing-and-testing-code-in-react-with-higher-order-components/
57+
Demonstrates extracting HOCs from existing code, and testing them.
58+
59+
- **Higher Order React Components**
60+
http://natpryce.com/articles/000814.html
61+
A solid explanation of what HoCs are, with examples and use cases
62+
63+
- **Higher Order Components: A React Application Design Pattern**
64+
https://www.sitepoint.com/react-higher-order-components/
65+
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.
66+
67+
- **Connected Higher Order Components with React and Redux**
68+
http://www.avitzurel.com/blog/2016/08/03/connected-higher-order-components-with-react-and-redux/
69+
Demonstrates creating HoCs that are connected to Redux
70+
71+
- **React, Higher Order Components, and Legacy Applications**
72+
http://browniefed.com/blog/react/
73+
Examples of how to integrate React into an existing application using HoCs
74+
75+
- **React Higher Order Components in depth**
76+
https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
77+
A very detailed article looking at some advanced HoC patterns
78+
79+
80+
#### Other Component Patterns
81+
82+
- **Dynamically Rendering React Components**
83+
https://wail.es/dynamically-rendering-react-components/
84+
Examples of how to dynamically determine which React component to render
85+
86+
- **The React Controller View Pattern**
87+
http://blog.andrewray.me/the-reactjs-controller-view-pattern/
88+
Describes using top-level components to hold state and pass it to children as props
89+
90+
- **Function as Child Components**
91+
https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9
92+
Explains the "function as a child" technique as an alternative to Higher Order Components
93+
94+
- **Functional React Series - Part 1: Get your App outta my Component**
95+
https://medium.com/@adamterlson/functional-react-series-part-1-get-your-app-outta-my-component-92656ae13e25
96+
Part 1 in a series about writing React applications by treating components as functions, not templates.

‎react-forms.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
### React and Forms
2+
3+
(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".)
4+
5+
6+
#### "Controlled" and "Uncontrolled Inputs
7+
8+
- **React Docs: Forms**
9+
https://facebook.github.io/react/docs/forms.html
10+
The React documentation page on forms. Describes "controlled" and "uncontrolled" form inputs.
11+
12+
- **React "controlled" vs "uncontrolled" inputs**
13+
https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc
14+
An explanation of the terms "controlled inputs" and "uncontrolled inputs"
15+
16+
- **React Form Components**
17+
http://donavon.js.org/react-forms/
18+
A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers.
19+
20+
- **Uncontrolled components are an anti-pattern**
21+
https://medium.com/@jedwards8/uncontrolled-components-are-an-anti-pattern-abbdd86fd39e
22+
Argues that uncontrolled components are a bad idea and should be avoided.
23+
24+
- **ReactJS and controlled forms**
25+
http://leftdevel.com/blog/reactjs-controlled-forms/
26+
A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs.
27+
28+
- **Managing React Controlled Component State**
29+
http://spraso.com/managing-react-controlled-component-state/
30+
Some short examples of how to properly manage state for controlled inputs
31+
32+
- **Managing state and controlled form fields with React**
33+
https://blog.iansinnott.com/managing-state-and-controlled-form-fields-with-react/
34+
Describes the concepts of "controlled" and "uncontrolled" inputs.
35+
36+
37+
#### Form Tutorials and Usage
38+
39+
- **Learn Raw React: Ridiculously Simple Forms**
40+
http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/
41+
Covers the basics of implementing form rendering, updates, and validation, in plain JS
42+
43+
- **Forms in React and Redux**
44+
http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/
45+
Demonstrates building a simple set of wrapper components to manage forms using React and Redux
46+
47+
- **Not-so-simple Forms with React**
48+
http://www.randseay.com/articles/forms-with-react/
49+
Explains how to set up more advanced form scenarios such as optional or repeatable sections.
50+
51+
- **Using React's state to manage data entry**
52+
https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42
53+
Describes how to manage data for forms using React component state and some wrapper components.
54+
55+
- **Handling React Forms with Mobx Observables**
56+
https://blog.risingstack.com/handling-react-forms-with-mobx-observables/
57+
Some examples of working with forms in React, using MobX for the data management.
58+
59+
- **Forms in React and Redux**
60+
http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/
61+
A good example of how to set up form handling in conjunction with a Redux store.
62+
63+
- **Radio Buttons and Checkboxes in React**
64+
http://react.tips/radio-buttons-in-reactjs/
65+
http://react.tips/checkboxes-in-react/
66+
Tutorials on managing various inputs in forms with React
67+
68+
69+
#### Form Validation
70+
71+
- **Form Validation Tutorial with React.js**
72+
https://html5hive.org/reactjs-form-validation-tutorial/
73+
A good example of setting up form validation in React
74+
75+
- **Elegant Form Validation in React**
76+
https://spin.atomicobject.com/2016/10/05/form-validation-react/
77+
Examples of adding validation to a form
78+
79+
- **Two-Way Data Binding and Form Validation in React**
80+
https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176
81+
Another demonstration of building a form with some logic and validation.

0 commit comments

Comments
 (0)