Skip to content

Commit de0c1bf

Browse files
pozymasikapozymasika
committed
Image paths should resolve in the markdown into this repository closes #47 
1 parent bfacacf commit de0c1bf

File tree

15 files changed

+576
-592
lines changed

15 files changed

+576
-592
lines changed

Diff for: ‎day-04/post.md

+99-97
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ description: >-
88
start building a more complex interface.
99
hero_image: /assets/images/series/30-days-of-react/headings/4.jpg
1010
imageUrl: /assets/images/series/30-days-of-react/headings/4.jpg
11-
dayDir: '04'
11+
dayDir: "04"
1212
day: 4
1313
introBannerUrl: /assets/images/series/30-days-of-react/headings/4_wide.jpg
14-
date: 'Fri Oct 07 2016 21:29:42 GMT-0700 (PDT)'
14+
date: "Fri Oct 07 2016 21:29:42 GMT-0700 (PDT)"
1515
imagesDir: /assets/images/series/30-days-of-react/day-4
1616
includeFile: ./../_params.yaml
1717
---
@@ -27,7 +27,11 @@ A common web element we might see is a user timeline. For instance, we might hav
2727
> However, we want to make sure the timeline you build looks similar to ours. If you include the following CSS as a `<link />` tag in your code, you're timeline will look similar and will be using the same styling ours is using:
2828
>
2929
> ```html
30-
> <link href="https://cdn.jsdelivr.net/gh/fullstackreact/30-days-of-react@master/day-04/src/components/Timeline/Timeline.css" rel="stylesheet" type="text/css" />
30+
> <link
31+
> href="https://cdn.jsdelivr.net/gh/fullstackreact/30-days-of-react@master/day-04/src/components/Timeline/Timeline.css"
32+
> rel="stylesheet"
33+
> type="text/css"
34+
> />
3135
> ```
3236
>
3337
> And make sure to surround your code in a component with the class of `demo` (we left it this way purposefully as it's the _exact_ same code we use in all the demos here). Check out the [https://jsfiddle.net/auser/zwomnfwk/](https://jsfiddle.net/auser/zwomnfwk/) for a working example.
@@ -37,88 +41,96 @@ A common web element we might see is a user timeline. For instance, we might hav
3741
> In addition, in order to make the timeline look _exactly_ like the way ours does on the site, you'll need to include [font-awesome](http://fontawesome.io/) in your web application. There are multiple ways to handle this. The simplest way is to include the link styles:
3842
>
3943
> ```html
40-
> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
44+
> <link
45+
> href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
46+
> rel="stylesheet"
47+
> type="text/css"
48+
> />
4149
> ```
4250
>
4351
> _All_ the code for the examples on the page is available at the [github repo (at https://github.com/fullstackreact/30-days-of-react)](https://github.com/fullstackreact/30-days-of-react).
4452
4553
We _could_ build this entire UI in a single component. However, building an entire application in a single component is not a great idea as it can grow huge, complex, and difficult to test.
4654
4755
```html
48-
class Timeline extends React.Component {
49-
render() {
50-
return (
51-
<div className="notificationsFrame">
52-
<div className="panel">
53-
<div className="header">
56+
class Timeline extends React.Component { render() { return (
57+
<div className="notificationsFrame">
58+
<div className="panel">
59+
<div className="header">
60+
<div className="menuIcon">
61+
<div className="dashTop"></div>
62+
<div className="dashBottom"></div>
63+
<div className="circle"></div>
64+
</div>
5465
55-
<div className="menuIcon">
56-
<div className="dashTop"></div>
57-
<div className="dashBottom"></div>
58-
<div className="circle"></div>
59-
</div>
66+
<span className="title">Timeline</span>
6067
61-
<span className="title">Timeline</span>
68+
<input type="text" className="searchInput" placeholder="Search ..." />
6269
63-
<input
64-
type="text"
65-
className="searchInput"
66-
placeholder="Search ..." />
70+
<div className="fa fa-search searchIcon"></div>
71+
</div>
72+
<div className="content">
73+
<div className="line"></div>
74+
<div className="item">
75+
<div className="avatar">
76+
<img
77+
alt="doug"
78+
src="http://www.croop.cl/UI/twitter/images/doug.jpg"
79+
/>
80+
</div>
6781
68-
<div className="fa fa-search searchIcon"></div>
69-
</div>
70-
<div className="content">
71-
<div className="line"></div>
72-
<div className="item">
73-
74-
<div className="avatar">
75-
<img
76-
alt='doug'
77-
src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
78-
</div>
79-
80-
<span className="time">
81-
An hour ago
82-
</span>
83-
<p>Ate lunch</p>
84-
</div>
85-
86-
<div className="item">
87-
<div className="avatar">
88-
<img
89-
alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
90-
</div>
91-
92-
<span className="time">10 am</span>
93-
<p>Read Day two article</p>
94-
</div>
95-
96-
<div className="item">
97-
<div className="avatar">
98-
<img
99-
alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
100-
</div>
101-
102-
<span className="time">10 am</span>
103-
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
104-
</div>
105-
106-
<div className="item">
107-
<div className="avatar">
108-
<img
109-
alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
110-
</div>
111-
112-
<span className="time">2:21 pm</span>
113-
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
114-
</div>
82+
<span className="time">
83+
An hour ago
84+
</span>
85+
<p>Ate lunch</p>
86+
</div>
11587
116-
</div>
88+
<div className="item">
89+
<div className="avatar">
90+
<img
91+
alt="doug"
92+
src="http://www.croop.cl/UI/twitter/images/doug.jpg"
93+
/>
11794
</div>
95+
96+
<span className="time">10 am</span>
97+
<p>Read Day two article</p>
11898
</div>
119-
)
120-
}
121-
}
99+
100+
<div className="item">
101+
<div className="avatar">
102+
<img
103+
alt="doug"
104+
src="http://www.croop.cl/UI/twitter/images/doug.jpg"
105+
/>
106+
</div>
107+
108+
<span className="time">10 am</span>
109+
<p>
110+
Lorem Ipsum is simply dummy text of the printing and typesetting
111+
industry.
112+
</p>
113+
</div>
114+
115+
<div className="item">
116+
<div className="avatar">
117+
<img
118+
alt="doug"
119+
src="http://www.croop.cl/UI/twitter/images/doug.jpg"
120+
/>
121+
</div>
122+
123+
<span className="time">2:21 pm</span>
124+
<p>
125+
Lorem Ipsum has been the industry's standard dummy text ever since the
126+
1500s, when an unknown printer took a galley of type and scrambled it
127+
to make a type specimen book.
128+
</p>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
) } }
122134
```
123135
124136
<div class="demo" id="demo1"></div>
@@ -132,11 +144,11 @@ Looking at this component, there are 2 separate parts to the larger component as
132144
1. The title bar
133145
2. The content
134146

135-
<img class="wide" src="/assets/images/series/30-days-of-react/day-4/breakdown.png" />
147+
<img class="wide" src="../images/04/breakdown.png" />
136148

137149
We can chop up the content part of the component into individual places of concern. There are 3 different _item_ components inside the content part.
138150

139-
<img class="wide" src="/assets/images/series/30-days-of-react/day-4/breakdown-2.png" />
151+
<img class="wide" src="../images/04/breakdown-2.png" />
140152

141153
> If we wanted to go one step further, we could even break down the title bar into 3 component parts, the _menu_ button, the _title_, and the _search_ icon. We could dive even further into each one of those if we needed to.
142154
>
@@ -157,11 +169,9 @@ class App extends React.Component {
157169
render() {
158170
return (
159171
<div className="notificationsFrame">
160-
<div className="panel">
161-
{/* content goes here */}
162-
</div>
172+
<div className="panel">{/* content goes here */}</div>
163173
</div>
164-
)
174+
);
165175
}
166176
}
167177
```
@@ -190,14 +200,11 @@ class Header extends React.Component {
190200
</div>
191201
<span className="title">Timeline</span>
192202

193-
<input
194-
type="text"
195-
className="searchInput"
196-
placeholder="Search ..." />
203+
<input type="text" className="searchInput" placeholder="Search ..." />
197204

198205
<div className="fa fa-search searchIcon"></div>
199206
</div>
200-
)
207+
);
201208
}
202209
}
203210
```
@@ -217,24 +224,20 @@ class Content extends React.Component {
217224
<div className="item">
218225
<div className="avatar">
219226
<img
220-
alt='Doug'
221-
src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
227+
alt="Doug"
228+
src="http://www.croop.cl/UI/twitter/images/doug.jpg"
229+
/>
222230
Doug
223231
</div>
224232

225-
<span className="time">
226-
An hour ago
227-
</span>
233+
<span className="time">An hour ago</span>
228234
<p>Ate lunch</p>
229-
<div className="commentCount">
230-
2
231-
</div>
235+
<div className="commentCount">2</div>
232236
</div>
233237

234238
{/* ... */}
235-
236239
</div>
237-
)
240+
);
238241
}
239242
}
240243
```
@@ -246,6 +249,7 @@ class Content extends React.Component {
246249
> ```html
247250
> <!-- this is a comment in HTML -->
248251
> ```
252+
>
249253
> the React version of the comment must be in brackets:
250254
>
251255
> ```html
@@ -266,7 +270,7 @@ class App extends React.Component {
266270
<Content />
267271
</div>
268272
</div>
269-
)
273+
);
270274
}
271275
}
272276
```
@@ -276,16 +280,14 @@ class App extends React.Component {
276280
> Note!
277281
>
278282
> Don't forget to call `ReactDOM.render` to place your app on the page
283+
>
279284
> ```javascript
280-
> var mountComponent = document.querySelector('#app');
285+
> var mountComponent = document.querySelector("#app");
281286
> ReactDOM.render(<App />, mountComponent);
282287
> ```
283-
>
284-
>
285288
286289
With this knowledge, we now have the ability to write multiple components and we can start to build more complex applications.
287290
288291
However, you may notice that this app does not have any user interaction nor custom data. In fact, as it stands right now our React application isn't that much easier to build than straight, no-frills HTML.
289292
290293
In the next section, we'll look how to make our component more dynamic and become _data-driven_ with React.
291-

0 commit comments

Comments
 (0)