Skip to content

Commit 47ee227

Browse files
BunlongBunlong
committed
add pages
1 parent 103982c commit 47ee227

7 files changed

+397
-0
lines changed

‎accessing-a-child-component.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<html>
2+
<head>
3+
<title>Accessing a child component | React Patterns & Techniques</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
6+
<meta name="description" content="Accessing a child component. Accessing a child component from the parent.">
7+
<meta name="keywords" content="react-patterns, patterns, react, javascript, react-native, reactjs, component, components, front-end, frontend, front-end-development, frontend-web, frontend-webdevelopment, frontend-components, frontend-app, react-app, react-component, react-components, react-techniques, reactjs-patterns">
8+
<meta name="Code Facebook" content="[email protected]">
9+
<link href="css/styles.css" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div id="container">
13+
<header>
14+
<h1>
15+
<a href="/">React Patterns & Techniques</a>
16+
</h1>
17+
</header>
18+
<h3>Table of Contents</h3>
19+
<ul>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
<li><a href="accessing-a-child-component.html">Accessing a child component</a></li>
24+
<li><a href="functional-setstate-(pass-a-function-to-setstate).html">Functional setState (Pass a function to setState)</a></li>
25+
<li><a href="higher-order-component.html">Higher Order Component - Props proxy</a></li>
26+
<li><a href="higher-order-function.html">Higher order function</a></li>
27+
<li><a href="jsx-spread-attributes.html">JSX spread attributes</a></li>
28+
</ul>
29+
</ul>
30+
<h3>Accessing a child component</h3>
31+
<p>
32+
Accessing a child component from the parent. eg. Autofocus an input (controlled by parent component)
33+
</p>
34+
<p>
35+
eg. You have a sign-in form, you want to put the cursor in the user name filed once page render.
36+
</p>
37+
<p>
38+
Let take a look the child component.
39+
</p>
40+
<pre class="screen">
41+
class Input extends Component {
42+
focus() {
43+
this.el.focus();
44+
}
45+
46+
render() {
47+
return (
48+
&lt;input
49+
ref={el=> { this.el = el; }}
50+
/&gt;
51+
);
52+
}
53+
}
54+
</pre>
55+
<p>
56+
An Input component with a <code>focus()</code> method that focuses the HTML element.
57+
</p>
58+
<p>
59+
In the parent component, we can get a reference to the Input component and call its <code>focus()</code> method.
60+
</p>
61+
<pre class="screen">
62+
class CommentListContainer extends React.Component {
63+
state = { comments: [] };
64+
65+
componentDidMount() {
66+
fetchSomeComments(comments =>
67+
this.setState({ comments: comments }));
68+
}
69+
70+
render() {
71+
return <CommentList comments={this.state.comments} />;
72+
}
73+
}
74+
</pre>
75+
<p>
76+
Now, let’s rework CommentList to take comments as a prop.
77+
</p>
78+
<pre class="screen">
79+
class SignInModal extends Component {
80+
componentDidMount() {
81+
// Note that when you use ref on a component, it’s a reference to
82+
// the component (not the underlying element), so you have access to its methods.
83+
84+
this.InputComponent.focus();
85+
}
86+
87+
render() {
88+
return (
89+
&lt;div&gt;
90+
&lt;label&gt;User name: &lt;/label&gt;
91+
&lt;Input
92+
ref={comp => { this.InputComponent = comp; }}
93+
/&gt;
94+
&lt;/div&gt;
95+
)
96+
}
97+
}
98+
</pre>
99+
</div>
100+
</body>
101+
</html>

‎async-initialization-in-componentdidmount.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ <h3>Table of Contents</h3>
2020
<ul>
2121
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
2222
<li><a href="container-component.html">Container component</a></li>
23+
<li><a href="accessing-a-child-component.html">Accessing a child component</a></li>
24+
<li><a href="functional-setstate-(pass-a-function-to-setstate).html">Functional setState (Pass a function to setState)</a></li>
25+
<li><a href="higher-order-component.html">Higher Order Component - Props proxy</a></li>
26+
<li><a href="higher-order-function.html">Higher order function</a></li>
27+
<li><a href="jsx-spread-attributes.html">JSX spread attributes</a></li>
2328
</ul>
2429
</ul>
2530
<h3>Async initialization in componentDidMount()</h3>

‎container-component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@ <h3>Table of Contents</h3>
2020
<ul>
2121
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
2222
<li><a href="container-component.html">Container component</a></li>
23+
<li><a href="accessing-a-child-component.html">Accessing a child component</a></li>
24+
<li><a href="functional-setstate-(pass-a-function-to-setstate).html">Functional setState (Pass a function to setState)</a></li>
25+
<li><a href="higher-order-component.html">Higher Order Component - Props proxy</a></li>
26+
<li><a href="higher-order-function.html">Higher order function</a></li>
27+
<li><a href="jsx-spread-attributes.html">JSX spread attributes</a></li>
2328
</ul>
2429
</ul>
2530
<h3>Container component</h3>

‎functional-setstate-(pass-a-function-to-setstate).html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<html>
2+
<head>
3+
<title>Functional setState (Pass a function to setState) | React Patterns & Techniques</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
6+
<meta name="description" content="Functional setState (Pass a function to setState). React has popularized functional programming in JavaScript.">
7+
<meta name="keywords" content="react-patterns, patterns, react, javascript, react-native, reactjs, component, components, front-end, frontend, front-end-development, frontend-web, frontend-webdevelopment, frontend-components, frontend-app, react-app, react-component, react-components, react-techniques, reactjs-patterns">
8+
<meta name="Code Facebook" content="[email protected]">
9+
<link href="css/styles.css" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div id="container">
13+
<header>
14+
<h1>
15+
<a href="/">React Patterns & Techniques</a>
16+
</h1>
17+
</header>
18+
<h3>Table of Contents</h3>
19+
<ul>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
<li><a href="accessing-a-child-component.html">Accessing a child component</a></li>
24+
<li><a href="functional-setstate-(pass-a-function-to-setstate).html">Functional setState (Pass a function to setState)</a></li>
25+
<li><a href="higher-order-component.html">Higher Order Component - Props proxy</a></li>
26+
<li><a href="higher-order-function.html">Higher order function</a></li>
27+
<li><a href="jsx-spread-attributes.html">JSX spread attributes</a></li>
28+
</ul>
29+
</ul>
30+
<h3>Functional setState (Pass a function to setState)</h3>
31+
<p>
32+
React has popularized functional programming in JavaScript. So today I reveal to you a new functional gold in React is <strong> Functional setState</strong>.
33+
</p>
34+
<p>
35+
Assume that you have a User component as below.
36+
</p>
37+
<pre class="screen">
38+
class User {
39+
state = {
40+
score : 0,
41+
};
42+
43+
render () {
44+
return (
45+
&lt;div&gt;This user scored {this.state.score}&lt;/div&gt;
46+
);
47+
}
48+
}
49+
</pre>
50+
<p>
51+
To manage the state, React provides a special method called setState(). You use it like this.
52+
</p>
53+
<pre class="screen">
54+
class User {
55+
...
56+
57+
increaseScore () {
58+
this.setState({score : this.state.score + 1});
59+
}
60+
61+
...
62+
}
63+
</pre>
64+
<p>
65+
Note how <code>setState()</code> works. You pass it an object containing part(s) of the state you want to update. In other words, the object you pass would have keys corresponding to the keys in the component state, then <code>setState()</code> updates or sets the state by merging the object to the state. Thus, “set-State”.
66+
</p>
67+
<p>
68+
Instead of passing an object, you could pass a function to setState as well.
69+
</p>
70+
<p>
71+
<code>setState()</code> also accepts a function. The function accepts the previous state and current props of the component which it uses to calculate and return the next state. See it below:
72+
</p>
73+
<pre class="screen">
74+
function increment(state, props) {
75+
return {
76+
value: state.value + props.step,
77+
};
78+
}
79+
80+
function decrement(state, props) {
81+
return {
82+
value: state.value - props.step,
83+
}
84+
}
85+
86+
class Counter extends React.Component {
87+
state = { value: 0 };
88+
89+
handleIncrement = () => {
90+
this.setState(increment);
91+
}
92+
93+
handleDecrement = () => {
94+
this.setState(decrement);
95+
}
96+
97+
render() {
98+
return (
99+
&lt;div&gt;
100+
&lt;button onClick={this.handleIncrement}&gt;+&lt;/button&gt;
101+
&lt;h1&gt;{this.state.value}</h1>
102+
&lt;button onClick={this.handleDecrement}&gt;-&lt;/button&gt;
103+
&lt;/div&gt;
104+
)
105+
}
106+
}
107+
</pre>
108+
</div>
109+
</body>
110+
</html>

‎higher-order-component.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<html>
2+
<head>
3+
<title>Higher Order Component - Props proxy | React Patterns & Techniques</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
6+
<meta name="description" content="Higher Order Component - Props proxy. Higher Order components in React follow the important concept of Composition.">
7+
<meta name="keywords" content="react-patterns, patterns, react, javascript, react-native, reactjs, component, components, front-end, frontend, front-end-development, frontend-web, frontend-webdevelopment, frontend-components, frontend-app, react-app, react-component, react-components, react-techniques, reactjs-patterns">
8+
<meta name="Code Facebook" content="[email protected]">
9+
<link href="css/styles.css" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div id="container">
13+
<header>
14+
<h1>
15+
<a href="/">React Patterns & Techniques</a>
16+
</h1>
17+
</header>
18+
<h3>Table of Contents</h3>
19+
<ul>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
<li><a href="accessing-a-child-component.html">Accessing a child component</a></li>
24+
<li><a href="functional-setstate-(pass-a-function-to-setstate).html">Functional setState (Pass a function to setState)</a></li>
25+
<li><a href="higher-order-component.html">Higher Order Component - Props proxy</a></li>
26+
<li><a href="higher-order-function.html">Higher order function</a></li>
27+
<li><a href="jsx-spread-attributes.html">JSX spread attributes</a></li>
28+
</ul>
29+
</ul>
30+
<h3>Higher Order Component - Props proxy</h3>
31+
<p>
32+
Higher Order components in React follow the important concept of Composition. In React, Large Components can be composed of smaller components to implement separation of concerns. Any React App can be seen as a composition of Hierarchical Components.
33+
</p>
34+
<p>
35+
Higher Order Component in ReactJS is similar to HOF and can be defined as any function that takes a Component as Argument and returns another Component. The returned component will contain/compose the initial argument passed in the argument to the function.
36+
</p>
37+
<pre class="screen">
38+
export default HOC(ComposedComponent) {
39+
return class WrapperComponent extends React.Component {
40+
componentDidMount(){
41+
this.newProps = transformationFunc(this.props);
42+
}
43+
44+
render(){
45+
&lt;ComposedComponent {...this.props} {...this.newProps} /&gt;
46+
}
47+
}
48+
}
49+
</pre>
50+
<p>
51+
In the above code, we have created a Function that takes a Component to be composed and returns us a WrapperComponent which includes the ComposedComponent in its render method. The HOC/WrapperComponent can add new props or modify the existing props also. It can also get hooks to the lifecycle methods of the ComposedComponents. The props are passed as it is using the ES6 spread operator.
52+
</p>
53+
</div>
54+
</body>
55+
</html>

‎higher-order-function.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<html>
2+
<head>
3+
<title>Higher order function - Props proxy | React Patterns & Techniques</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
6+
<meta name="description" content="Higher order function. Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.">
7+
<meta name="keywords" content="react-patterns, patterns, react, javascript, react-native, reactjs, component, components, front-end, frontend, front-end-development, frontend-web, frontend-webdevelopment, frontend-components, frontend-app, react-app, react-component, react-components, react-techniques, reactjs-patterns">
8+
<meta name="Code Facebook" content="[email protected]">
9+
<link href="css/styles.css" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div id="container">
13+
<header>
14+
<h1>
15+
<a href="/">React Patterns & Techniques</a>
16+
</h1>
17+
</header>
18+
<h3>Table of Contents</h3>
19+
<ul>
20+
<ul>
21+
<li><a href="async-initialization-in-componentdidmount.html">Async initialization in componentDidMount()</a></li>
22+
<li><a href="container-component.html">Container component</a></li>
23+
<li><a href="accessing-a-child-component.html">Accessing a child component</a></li>
24+
<li><a href="functional-setstate-(pass-a-function-to-setstate).html">Functional setState (Pass a function to setState)</a></li>
25+
<li><a href="higher-order-component.html">Higher Order Component - Props proxy</a></li>
26+
<li><a href="higher-order-function.html">Higher order function</a></li>
27+
<li><a href="jsx-spread-attributes.html">JSX spread attributes</a></li>
28+
</ul>
29+
</ul>
30+
<h3>Higher order function</h3>
31+
<p>
32+
Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. 
33+
</p>
34+
<p>
35+
Functions and they take other functions as arguments and operate on them. Also, the second candidate for Higher Order Functions are Closures which return any function. The below given function can be termed as a Higher Order Function.
36+
</p>
37+
<pre class="screen">
38+
// Getting a Specific Getter from Generic get
39+
function get(prop){
40+
return function(obj){
41+
return obj[prop];
42+
}
43+
}
44+
45+
let getName = get("name");
46+
let name = getName({"name": "Bunlong"});
47+
console.log(name);
48+
</pre>
49+
</div>
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)