You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<td>Callback function invoked immediately before a component is unmounted from the DOM</td>
74
74
</tr>
75
75
</table>
@@ -140,12 +140,12 @@ Once a component is mounted (i.e created) you can use the component API. The api
140
140
</tr>
141
141
</table>
142
142
143
-
The most commonly used component API method used will is `setState()`. Its usage will be covered in the React Component State chapter.
143
+
The most commonly used component API method is `setState()`. Its usage will be covered in the React Component State chapter.
144
144
145
145
#### Notes
146
146
147
147
* The component callback configuration options (`componentWillUnmount`, `componentDidUpdate`, `componentWillUpdate`, `shouldComponentUpdate`, `componentWillReceiveProps`, `componentDidMount`, `componentWillMount`) are also known as "lifecycle methods" because these various methods are executed at specific points in a component's life.
148
-
* The `React.createClass()` function is a convenience function that creates component instances (via JavaScript `new` keyword) for you.
148
+
* The `React.createClass()` function is a convenience function that creates component instances for you (via JavaScript `new` keyword).
149
149
* The `render()` function should be a pure function. Which means:
150
150
151
151
>it does not modify component state, it returns the same result each time it's invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using `setTimeout`). If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes server rendering more practical and makes components easier to think about.
Copy file name to clipboardExpand all lines: basic-react-components/6.3.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
1
# Components Return One Node/Component
2
2
3
-
The `render` configuration value defined when creating a component should return only one React node (or, component). This one node/component can contained any number of children. In the code below the `<reactNode>` is the starting node. In side of this node any number of sibling and child nodes can be returned.
3
+
The `render` configuration value defined when creating a component should return only one React node (or, component). This one node/component can contain any number of children. In the code below the `<reactNode>` is the starting node. Inside of this node any number of sibling and child nodes can be returned.
Note that if you want to return React nodes on more than one line (taking advantage of whitespace) you will have to surround the returned value in `()`. In the code below the JSX defining (i.e., rendered) the `MyComponent` is returned in `()`.
An error will occur if more than one starting React node is attempted to be return. If you think about it, the error occurs because returning two `React.createElement()` functions isn't possible with JavaScript.
11
+
An error will occur if more than one starting React node is attempted to be returned. If you think about it, the error occurs because returning two `React.createElement()` functions isn't possible with JavaScript.
Copy file name to clipboardExpand all lines: basic-react-components/6.4.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -12,4 +12,4 @@ The other way to gain a reference to a component instance involves making use of
12
12
13
13
#### Notes
14
14
15
-
* The `this` keyword will commonly be used from within a component to access instance properties like `this.props.[NAME OF PROP]`, `this.props.children`, and `this.state`,. It will also be used to call class methods/properties, that all components share like `this.setState`,`this.replaceState()`.
15
+
* The `this` keyword will commonly be used from within a component to access instance properties like `this.props.[NAME OF PROP]`, `this.props.children`, and `this.state`,. It will also be used to call class methods/properties, that all components share like `this.setState` and`this.replaceState()`.
Basically, React when rendering a component looks for special React prop events (e.g., `onClick`) and treats these props differently from other props (all react events shown in table below). Obviously the difference being, that eventing in the real DOM is being wired up behind the scenes.
9
+
Basically, React when rendering a component looks for special React prop events (e.g., `onClick`) and treats these props differently from other props (all React events shown in table below). Obviously the difference being, that eventing in the real DOM is being wired up behind the scenes.
10
10
11
11
Part of this wiring is auto binding the context of the handler/callback to the scope of the component instance. In the code example below the value of `this` inside of the handlers/callbacks will reference the component instance itself.
12
12
@@ -152,7 +152,7 @@ shiftKey,
152
152
#### Notes
153
153
154
154
* React normalizes events so that they behave consistently across different browsers.
155
-
* Events in React are triggered on the bubbling phase. To trigger an event on the capturing phase add the word "Capture" to the event name (e.g., `onClick` would become `onClickCapture`).
155
+
* Events in React are triggered on the bubbling phase. To trigger an event on the capturing phase add the word "Capture" to the end of the event name (e.g., `onClick` would become `onClickCapture`).
156
156
* If you need the browser event details for a given event you can access this by using the `nativeEvent` property found in the SyntheticEvent object passed into React event hander/callbacks.
157
157
* React does not actually attach events to the nodes themselves, it uses [event delegation](http://domenlightenment.com/#11.14).
158
158
*`e.stopPropagation()` or `e.preventDefault()` should be triggered manually to [stop](http://domenlightenment.com/#11.9) event [propagation](http://domenlightenment.com/#11.10) instead of `returning false;`.
This code was purposefully simplistic in order to demonstrate component composition. In the next chapter, we will look at how the code will typically be written making use of props to create a generic `Badge` component. The generic Badge component can take any name value v.s. creating a unique badge and hard coding the name in the component.
10
+
9
11
### Notes
10
12
11
-
* This code was purposefully simplistic in order to demonstrate component composition. In the next chapter will look at how the code will typically be written making use of props to create a generic `Badge` component. The generic Badge component can that take any name value v.s. creating a unique badge and hard coding the name in the component.
12
-
* A key tenet of maintainable front-ends composable components. React components by design are meant to contain other React components.
13
+
* A key tenet of maintainable UI are composable components. React components by design are meant to contain other React components.
13
14
* Notice how HTML and previously defined components are mixed together in the `render()` configuration function.
Copy file name to clipboardExpand all lines: basic-react-components/6.7.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Grokking Component Lifecycle's
2
2
3
-
React components live certain life events that are called lifecycle events. These lifecycle's events are tied to lifecycle methods. I discussed several of these methods at the start of this chapter when discusses the creation of components.
3
+
React components live certain life events that are called lifecycle events. These lifecycle's events are tied to lifecycle methods. I discussed several of these methods at the start of this chapter when discussing the creation of components.
4
4
5
5
The lifecycle methods provide hooks into the phases and the nature of a component. In the code example, taken from section 6.2, I am console logging the occurrence of the lifecycle events `componentDidMount`, `componentWillUnmount`, and `getInitialState` lifecycle methods.
6
6
@@ -75,7 +75,7 @@ Below I show a table for each category and the containing lifecycle methods.
75
75
76
76
### Notes
77
77
78
-
*`componentDidMount` and `componentDidUpdate` is a good places to put other libraries' logic.
78
+
*`componentDidMount` and `componentDidUpdate`are good places to put other libraries' logic.
79
79
* Read [React In-depth](https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/introduction.html) for a detailed look into the React component lifecycle events
Copy file name to clipboardExpand all lines: basic-react-components/6.8.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Accessing Children Components/Nodes
2
2
3
-
If a component, when used, contains child components or React nodes inside of the component (e.g., `<Parent><Child /></Parent>` or `<Parent><span>test<span></Parent>`) these React node or component instances can be accessed by using `this.props.children`.
3
+
If a component, when used, contains child React components or React nodes inside of the component (e.g., `<Parent><Child /></Parent>` or `<Parent><span>test<span></Parent>`) these React node or component instances can be accessed by using `this.props.children`.
4
4
5
5
In the code below the `Parent` component when used, contains two `<div>` React node children, which contains React text nodes. All of the children instances, inside of the component are accessible using `this.props.children`. In the code below I access these children inside of the `Parent``componentDidMount` lifecycle function.
Copy file name to clipboardExpand all lines: basic-react-components/6.9.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
The `ref` attribute makes it possible to store a reference to a particular React element or component returned by the component `render()` configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the `render()` function.
4
4
5
-
To make a reference place the `ref` attribute with a function value on any React element or component. Then, inside of the function, the first parameter within the scope of the function will be a reference to the element or component the `ref` is on.
5
+
To make a reference, place the `ref` attribute with a function value on any React element or component. Then, inside of the function, the first parameter within the scope of the function will be a reference to the element or component the `ref` is on.
6
6
7
7
For example in the code below I am console logging the reference out for each `ref`.
8
8
@@ -17,7 +17,7 @@ A common use for `ref`'s are to store a reference on the component instance. In
17
17
### Notes
18
18
19
19
* Refs can't be attached to a stateless function because the component does not have a backing instance.
20
-
* You might see a `ref` attribute with a string instead of a function, this is called a string `ref` and will likely be deprecated in the future. Function `ref`s are preferred.
20
+
* You might see a `ref` attribute with a string instead of a function; this is called a string `ref` and will likely be deprecated in the future. Function `ref`s are preferred.
21
21
* The `ref` callback function is called immediately after the component is mounted.
22
22
* References to a component instance allow one to call custom methods on the component if any are exposed when defining it.
23
23
* Writing refs with inline function expressions means React will see a different function object on every update, `ref` will be called with null immediately before it's called with the component instance. I.e., When the referenced component is unmounted and whenever the `ref` changes, the old `ref` will be called with `null` as an argument.
0 commit comments