forked from FrontendMasters/react-enlightenment
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This is a first round of suggested edits. What’s in this PR: First, there are no actual changes to content, only to the presentation of the content, adopting patterns to improve consistency and readability. 1) Adopted pattern to use title-casing (AP style) 2) Adopted pattern to use punctuation with abbreviations, ex: e.g., i.e., a.k.a., etc. (AP style) 3) Adopted pattern to use “>” before any source code links, which will indent and block quote that link
- Loading branch information
1 parent
fc19809
commit ef4c2a8
Showing
36 changed files
with
210 additions
and
210 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,45 @@ | ||
| # Summary | ||
|
|
||
| * [What is React](what-is-react.md) | ||
| * [React semantics/terminology](react-semantics.md) | ||
| * [React & Babel basic setup](react-basic-setup.md) | ||
| * [What Is React](what-is-react.md) | ||
| * [React Semantics/Terminology](react-semantics.md) | ||
| * [React & Babel Basic Setup](react-basic-setup.md) | ||
| * [Using react.js & react-dom.js](react-basic-setup/3.1.md) | ||
| * [Using JSX via Babel](react-basic-setup/3.2.md) | ||
| * [Using ES6 & ES* with React](react-basic-setup/3.3.md) | ||
| * [Writing React with JSFiddle](react-basic-setup/3.4.md) | ||
| * [React nodes](react-nodes.md) | ||
| * [What is a React node?](react-nodes/4.1.md) | ||
| * [Creating React nodes](react-nodes/4.4.md) | ||
| * [Writing React With JSFiddle](react-basic-setup/3.4.md) | ||
| * [React Nodes](react-nodes.md) | ||
| * [What Is a React Node?](react-nodes/4.1.md) | ||
| * [Creating React Nodes](react-nodes/4.4.md) | ||
| * [Rendering to DOM](react-nodes/4.3.md) | ||
| * [Defining attributes/props](react-nodes/4.4.md) | ||
| * [Inlining CSS on element nodes](react-nodes/4.5.md) | ||
| * [Using element factories](react-nodes/4.6.md) | ||
| * [JavaScript syntax extension (aka JSX)](react-jsx.md) | ||
| * [What is a JSX?](react-jsx/5.1.md) | ||
| * [Creating React nodes with JSX](react-jsx/5.2.md) | ||
| * [Defining Attributes/Props](react-nodes/4.4.md) | ||
| * [Inlining CSS on Element Nodes](react-nodes/4.5.md) | ||
| * [Using Element Factories](react-nodes/4.6.md) | ||
| * [JavaScript Syntax Extension (a.k.a., JSX)](react-jsx.md) | ||
| * [What Is a JSX?](react-jsx/5.1.md) | ||
| * [Creating React Nodes With JSX](react-jsx/5.2.md) | ||
| * [Rendering JSX to DOM](react-jsx/5.5.md) | ||
| * [Using JS expressions in JSX](react-jsx/5.4.md) | ||
| * [Using JS comments in JSX](react-jsx/5.5.md) | ||
| * [Using inline CSS in JSX](react-jsx/5.6.md) | ||
| * [Defining JSX attributes/props](react-jsx/5.7.md) | ||
| * [Basic React components](basic-react-components.md) | ||
| * [What is a React component?](basic-react-components/6.1.md) | ||
| * [Creating components](basic-react-components/6.2.md) | ||
| * [Return one starting node/component](basic-react-components/6.3.md) | ||
| * [Creating stateless function components](basic-react-components/6.4.md) | ||
| * [Referring to a component instance](basic-react-components/6.5.md) | ||
| * [Using JS Expressions in JSX](react-jsx/5.4.md) | ||
| * [Using JS Comments in JSX](react-jsx/5.5.md) | ||
| * [Using Inline CSS in JSX](react-jsx/5.6.md) | ||
| * [Defining JSX Attributes/Props](react-jsx/5.7.md) | ||
| * [Basic React Components](basic-react-components.md) | ||
| * [What Is a React Component?](basic-react-components/6.1.md) | ||
| * [Creating Components](basic-react-components/6.2.md) | ||
| * [Return One Starting Node/Component](basic-react-components/6.3.md) | ||
| * [Creating Stateless Function Components](basic-react-components/6.4.md) | ||
| * [Referring to a Component Instance](basic-react-components/6.5.md) | ||
| * [React Props](react-props.md) | ||
| * [What are props?](react-props/7.1.md) | ||
| * [Setting props](react-props/7.2.md) | ||
| * [Getting props](react-props/7.3.md) | ||
| * [Setting default props](react-props/7.4.md) | ||
| * [Validating props](react-props/7.5.md) | ||
| * [Props more than strings](react-props/7.6.md) | ||
| * [Transferring props](react-props/7.7.md) | ||
| * [What Are Props?](react-props/7.1.md) | ||
| * [Setting Props](react-props/7.2.md) | ||
| * [Getting Props](react-props/7.3.md) | ||
| * [Setting Default Props](react-props/7.4.md) | ||
| * [Validating Props](react-props/7.5.md) | ||
| * [Props More Than Strings](react-props/7.6.md) | ||
| * [Transferring Props](react-props/7.7.md) | ||
| * [React State](react-state/react-state.md) | ||
| * [What is state?](react-state/8.1.md) | ||
| * [Setting state](react-state/8.2.md) | ||
| * [Getting state](react-state/8.3.md) | ||
| * [Setting initial state](react-state/8.4.md) | ||
| * [state v.s. props](react-state/8.5.md) | ||
| * [What Is State?](react-state/8.1.md) | ||
| * [Setting State](react-state/8.2.md) | ||
| * [Getting State](react-state/8.3.md) | ||
| * [Setting Initial State](react-state/8.4.md) | ||
| * [State vs. Props](react-state/8.5.md) | ||
| * [Advanced React components](advanced-react-components.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| # What is a React component? | ||
| # What Is a React Component? | ||
|
|
||
| The next section will provide a mental model around the nature of a React component and cover details around creating React components. | ||
|
|
||
| Typically a single view of a user interface (e.g. the tree) is divided up into logical chunks (e.g. branches). The tree becomes the starting component (e.g. a layout component) and then each chunk in the UI will become a sub-component that can be divided further into sub components (i.e. sub-branches). This not only keeps the UI organized but it also allows data and state changes to logically flow from the tree, to branches, then sub branches. | ||
| Typically a single view of a user interface (e.g., the tree) is divided up into logical chunks (e.g., branches). The tree becomes the starting component (e.g., a layout component) and then each chunk in the UI will become a sub-component that can be divided further into sub components (i.e., sub-branches). This not only keeps the UI organized but it also allows data and state changes to logically flow from the tree, to branches, then sub branches. | ||
|
|
||
| If this description of React components is cryptic then I would suggest that you examine any application interface and mentally start dividing the UI into logical chunks. Those chunks potentially are components. React components are the programatic abstraction (i.e. events, state changes, DOM changes) making it possible to literally create these chunks and sub-chunks. For example, a lot of application UI's will have a layout component as the top component in a UI view. This component will contain several sub-components, like maybe, a search component or a menu component. The search component can then be divided further into sub-components. Maybe the search input is a separate component from the button that invokes the search. As you can see, a UI can quickly become a tree of components. Today, software UI's are typically created by crafting a tree of very simple [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle) components. React provides the means to create these components via the `React.createClass()` function (or, `React.Component` if using ES6 classes). The `React.createClass()` function takes in a configuration object and returns a React component instance. | ||
| If this description of React components is cryptic then I would suggest that you examine any application interface and mentally start dividing the UI into logical chunks. Those chunks potentially are components. React components are the programatic abstraction (i.e., events, state changes, DOM changes) making it possible to literally create these chunks and sub-chunks. For example, a lot of application UI's will have a layout component as the top component in a UI view. This component will contain several sub-components, like maybe, a search component or a menu component. The search component can then be divided further into sub-components. Maybe the search input is a separate component from the button that invokes the search. As you can see, a UI can quickly become a tree of components. Today, software UI's are typically created by crafting a tree of very simple [single responsibility](https://en.wikipedia.org/wiki/Single_responsibility_principle) components. React provides the means to create these components via the `React.createClass()` function (or, `React.Component` if using ES6 classes). The `React.createClass()` function takes in a configuration object and returns a React component instance. | ||
|
|
||
| A React component is basically any part of a UI that can contain React nodes (via `React.createElement()` or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood. Sounds simple until one realizes that React components can contained other React sub-components which can result in a complex tree of components. This is not unlike the idea that React nodes can contain other React nodes in a Virtual DOM. It might hurt your brain, but if you think hard about it all a component does it wraps itself around a logical set of branches from a tree of nodes. In this sense, you define an entire UI from components using React but the result is a tree of React nodes that can easily be translated to something like an HTML document (i.e. tree of DOM nodes). | ||
| A React component is basically any part of a UI that can contain React nodes (via `React.createElement()` or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood. Sounds simple until one realizes that React components can contained other React sub-components which can result in a complex tree of components. This is not unlike the idea that React nodes can contain other React nodes in a Virtual DOM. It might hurt your brain, but if you think hard about it all a component does it wraps itself around a logical set of branches from a tree of nodes. In this sense, you define an entire UI from components using React but the result is a tree of React nodes that can easily be translated to something like an HTML document (i.e., tree of DOM nodes). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,13 @@ | ||
| # Creating stateless function components | ||
| # Creating Stateless Function Components | ||
|
|
||
| When a component is purely a result of `props` alone the component can be written as a pure function avoiding the need to create a React component instance. | ||
|
|
||
| [source code](https://jsfiddle.net/5nzpxyuu/#tabs=js,result,html,resources) | ||
| > [source code](https://jsfiddle.net/5nzpxyuu/#tabs=js,result,html,resources) | ||
| This is typically referred to as a stateless function component. | ||
|
|
||
| Stateless function components can't be passed component options (i.e. `render`, `componentWillUnmount`, etc..). However `.propTypes` and `.defaultProps` can be set as properties on the function. | ||
| Stateless function components can't be passed component options (i.e., `render`, `componentWillUnmount`, etc.). However `.propTypes` and `.defaultProps` can be set as properties on the function. | ||
|
|
||
| The code example below demonstrates a stateless function component making use of `.propTypes` and `.defaultProps`. | ||
|
|
||
| [source code](https://jsfiddle.net/tpvjyp34/#tabs=js,result,html,resources) | ||
| > [source code](https://jsfiddle.net/tpvjyp34/#tabs=js,result,html,resources) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| ## title | ||
| # Title [Use Title-Casing] | ||
|
|
||
| ### sub | ||
| ## Sub [Use Title-Casing] |
Oops, something went wrong.