Skip to content

Commit 40f6541

Browse files
BunlongBunlong
committed
add React - Composing Component
1 parent 6772d95 commit 40f6541

File tree

5 files changed

+89
-15
lines changed

5 files changed

+89
-15
lines changed

‎_posts/2018-05-15-react-composing-component.markdown

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: post
3+
title: React - Composing Component
4+
date: 2018-05-09
5+
description: Components is the best way to reuse code in React.
6+
img: react-composing-component.png
7+
tags: [react, reactjs, learn react]
8+
---
9+
10+
Components is the best way to reuse code in React, React components can make use of other React components. That is, when defining a component the render configuration function can contain references to other components. When a component contains another component it can be said that the parent component owns the child component.
11+
12+
In the code below the BadgeList component contains/owns the BadgeBill and BadgeTom component.
13+
14+
```javascript
15+
<!DOCTYPE html>
16+
<html>
17+
<head>
18+
<meta charset="UTF-8">
19+
<title>Learn React</title>
20+
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
21+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
22+
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
23+
</head>
24+
<body>
25+
<script type="text/jsx">
26+
class BadgeBill extends React.Component {
27+
render() {
28+
return <div>Bill</div>;
29+
}
30+
}
31+
32+
class BadgeTom extends React.Component {
33+
render() {
34+
return <div>Tom</div>;
35+
}
36+
}
37+
38+
class BadgeList extends React.Component {
39+
render() {
40+
return (
41+
<div>
42+
<BadgeBill/>
43+
<BadgeTom />
44+
</div>
45+
);
46+
}
47+
}
48+
49+
ReactDOM.render(<BadgeList />, document.body);
50+
</script>
51+
</body>
52+
</html>
53+
```
54+
55+
[Try it on CodePen](https://codepen.io/Bunlong/pen/VxXMEO).

‎_site/index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,18 @@ <h3 class="contact-title">Contact</h3>
110110
</aside> <!-- End Sidebar -->
111111
<div class="content-box clearfix">
112112

113+
<article class="post">
114+
115+
<a class="post-thumbnail" style="background-image: url(http://github.com/assets/img/react-composing-component.png)" href="/react-composing-component/"></a>
116+
117+
<div class="post-content">
118+
<h2 class="post-title"><a href="/react-composing-component/">React - Composing Component</a></h2>
119+
<p>Components is the best way to reuse code in React, React components can make use...</p>
120+
<span class="post-date">2018, May 09&nbsp;&nbsp;&nbsp;—&nbsp;</span>
121+
<span class="post-words">2 minute read</span>
122+
</div>
123+
</article>
124+
113125
<article class="post">
114126

115127
<a class="post-thumbnail" style="background-image: url(http://github.com/assets/img/react-component-lifecycle-unmounting.png)" href="/react-component-lifecycle-unmounting/"></a>
@@ -194,18 +206,6 @@ <h2 class="post-title"><a href="/react-ownership/">React - Ownership</a></h2>
194206
</div>
195207
</article>
196208

197-
<article class="post">
198-
199-
<a class="post-thumbnail" style="background-image: url(http://github.com/assets/img/react-state.png)" href="/react-state/"></a>
200-
201-
<div class="post-content">
202-
<h2 class="post-title"><a href="/react-state/">React - State</a></h2>
203-
<p>State The state object is internal to a component, it holds data which can change...</p>
204-
<span class="post-date">2018, May 05&nbsp;&nbsp;&nbsp;—&nbsp;</span>
205-
<span class="post-words">2 minute read</span>
206-
</div>
207-
</article>
208-
209209

210210
<div class="container">
211211
<nav class="pagination" role="pagination">

‎_site/sitemap.xml

+4
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@
5757
<lastmod>2018-05-08T00:00:00+07:00</lastmod>
5858
</url>
5959
<url>
60+
<loc>/react-composing-component/</loc>
61+
<lastmod>2018-05-09T00:00:00+07:00</lastmod>
62+
</url>
63+
<url>
6064
<loc>/</loc>
6165
</url>
6266
<url>

‎_site/tags/index.html

+18-3
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,13 @@ <h1>Tags in Blog</h1>
118118
<!-- cycles through tag list and creates header row of all tags used in site with accompanying per-tag counts...-->
119119

120120

121-
<li ><a href="#learn+react" class="tag">learn react <span>(14)</span></a></li>
121+
<li ><a href="#learn+react" class="tag">learn react <span>(15)</span></a></li>
122122

123123

124-
<li ><a href="#react" class="tag">react <span>(14)</span></a></li>
124+
<li ><a href="#react" class="tag">react <span>(15)</span></a></li>
125125

126126

127-
<li ><a href="#reactjs" class="tag">reactjs <span>(14)</span></a></li>
127+
<li ><a href="#reactjs" class="tag">reactjs <span>(15)</span></a></li>
128128

129129
</ul>
130130
<!--cycles through tag list and creates subheader for each tag name...-->
@@ -133,6 +133,11 @@ <h1>Tags in Blog</h1>
133133
<h2 id="learn+react">learn react</h2>
134134
<!-- lists all posts corresponding to specific tag...-->
135135

136+
<div class="tag-list">
137+
<span><a href="/react-composing-component/">React - Composing Component</a></span>
138+
<small><span>| 09 May 2018</span></small>
139+
</div>
140+
136141
<div class="tag-list">
137142
<span><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></span>
138143
<small><span>| 08 May 2018</span></small>
@@ -208,6 +213,11 @@ <h2 id="learn+react">learn react</h2>
208213
<h2 id="react">react</h2>
209214
<!-- lists all posts corresponding to specific tag...-->
210215

216+
<div class="tag-list">
217+
<span><a href="/react-composing-component/">React - Composing Component</a></span>
218+
<small><span>| 09 May 2018</span></small>
219+
</div>
220+
211221
<div class="tag-list">
212222
<span><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></span>
213223
<small><span>| 08 May 2018</span></small>
@@ -283,6 +293,11 @@ <h2 id="react">react</h2>
283293
<h2 id="reactjs">reactjs</h2>
284294
<!-- lists all posts corresponding to specific tag...-->
285295

296+
<div class="tag-list">
297+
<span><a href="/react-composing-component/">React - Composing Component</a></span>
298+
<small><span>| 09 May 2018</span></small>
299+
</div>
300+
286301
<div class="tag-list">
287302
<span><a href="/react-component-lifecycle-unmounting/">React - Component Lifecycle Unmounting</a></span>
288303
<small><span>| 08 May 2018</span></small>

‎assets/img/react-composing-component.png

441 KB
Loading

0 commit comments

Comments
 (0)