This repository has been archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathforms-rendering-router.html
223 lines (214 loc) · 28.2 KB
/
forms-rendering-router.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<title>Forms, Conditional Rendering, and React Router</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=BioRhyme:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css">
<link rel='stylesheet' type='text/css' href="../css/prism.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css">
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:0.5vw; line-height:1em; letter-spacing: 0.0001em; font-weight:700;'>
dddddddd
FFFFFFFFFFFFFFFFFFFFFF CCCCCCCCCCCCC d::::::d iiii tttt iiii lllllll
F::::::::::::::::::::F CCC::::::::::::C d::::::d i::::i ttt:::t i::::i l:::::l
F::::::::::::::::::::F CC:::::::::::::::C d::::::d iiii t:::::t iiii l:::::l
FF::::::FFFFFFFFF::::F C:::::CCCCCCCC::::C d:::::d t:::::t l:::::l
F:::::F FFFFFFooooooooooo rrrrr rrrrrrrrr mmmmmmm mmmmmmm ssssssssss C:::::C CCCCCC ooooooooooo nnnn nnnnnnnn ddddddddd:::::d iiiiiiittttttt:::::ttttttt iiiiiii ooooooooooo nnnn nnnnnnnn aaaaaaaaaaaaa l::::l
F:::::F oo:::::::::::oo r::::rrr:::::::::r mm:::::::m m:::::::mm ss::::::::::s C:::::C oo:::::::::::oo n:::nn::::::::nn dd::::::::::::::d i:::::it:::::::::::::::::t i:::::i oo:::::::::::oo n:::nn::::::::nn a::::::::::::a l::::l
F::::::FFFFFFFFFFo:::::::::::::::or:::::::::::::::::r m::::::::::mm::::::::::mss:::::::::::::s C:::::C o:::::::::::::::on::::::::::::::nn d::::::::::::::::d i::::it:::::::::::::::::t i::::i o:::::::::::::::on::::::::::::::nn aaaaaaaaa:::::a l::::l
F:::::::::::::::Fo:::::ooooo:::::orr::::::rrrrr::::::rm::::::::::::::::::::::ms::::::ssss:::::s C:::::C o:::::ooooo:::::onn:::::::::::::::nd:::::::ddddd:::::d i::::itttttt:::::::tttttt i::::i o:::::ooooo:::::onn:::::::::::::::n a::::a l::::l
F:::::::::::::::Fo::::o o::::o r:::::r r:::::rm:::::mmm::::::mmm:::::m s:::::s ssssss C:::::C o::::o o::::o n:::::nnnn:::::nd::::::d d:::::d i::::i t:::::t i::::i o::::o o::::o n:::::nnnn:::::n aaaaaaa:::::a l::::l
F::::::FFFFFFFFFFo::::o o::::o r:::::r rrrrrrrm::::m m::::m m::::m s::::::s C:::::C o::::o o::::o n::::n n::::nd:::::d d:::::d i::::i t:::::t i::::i o::::o o::::o n::::n n::::n aa::::::::::::a l::::l
F:::::F o::::o o::::o r:::::r m::::m m::::m m::::m s::::::s C:::::C o::::o o::::o n::::n n::::nd:::::d d:::::d i::::i t:::::t i::::i o::::o o::::o n::::n n::::n a::::aaaa::::::a l::::l
F:::::F o::::o o::::o r:::::r m::::m m::::m m::::mssssss s:::::s C:::::C CCCCCCo::::o o::::o n::::n n::::nd:::::d d:::::d i::::i t:::::t tttttt i::::i o::::o o::::o n::::n n::::na::::a a:::::a l::::l
FF:::::::FF o:::::ooooo:::::o r:::::r m::::m m::::m m::::ms:::::ssss::::::s ,,,,,, C:::::CCCCCCCC::::Co:::::ooooo:::::o n::::n n::::nd::::::ddddd::::::ddi::::::i t::::::tttt:::::ti::::::io:::::ooooo:::::o n::::n n::::na::::a a:::::a l::::::l
F::::::::FF o:::::::::::::::o r:::::r m::::m m::::m m::::ms::::::::::::::s ,::::, CC:::::::::::::::Co:::::::::::::::o n::::n n::::n d:::::::::::::::::di::::::i tt::::::::::::::ti::::::io:::::::::::::::o n::::n n::::na:::::aaaa::::::a l::::::l
F::::::::FF oo:::::::::::oo r:::::r m::::m m::::m m::::m s:::::::::::ss ,::::, CCC::::::::::::C oo:::::::::::oo n::::n n::::n d:::::::::ddd::::di::::::i tt:::::::::::tti::::::i oo:::::::::::oo n::::n n::::n a::::::::::aa:::al::::::l
FFFFFFFFFFF ooooooooooo rrrrrrr mmmmmm mmmmmm mmmmmm sssssssssss ,:::,, CCCCCCCCCCCCC ooooooooooo nnnnnn nnnnnn ddddddddd dddddiiiiiiii ttttttttttt iiiiiiii ooooooooooo nnnnnn nnnnnn aaaaaaaaaa aaaallllllll
,:::,
,,,,
dddddddd dddddddd
RRRRRRRRRRRRRRRRR d::::::d iiii d::::::d
R::::::::::::::::R d::::::d i::::i d::::::d
R::::::RRRRRR:::::R d::::::d iiii d::::::d
RR:::::R R:::::R d:::::d d:::::d
R::::R R:::::R eeeeeeeeeeee nnnn nnnnnnnn ddddddddd:::::d eeeeeeeeeeee rrrrr rrrrrrrrr iiiiiiinnnn nnnnnnnn ggggggggg ggggg aaaaaaaaaaaaa nnnn nnnnnnnn ddddddddd:::::d
R::::R R:::::R ee::::::::::::ee n:::nn::::::::nn dd::::::::::::::d ee::::::::::::ee r::::rrr:::::::::r i:::::in:::nn::::::::nn g:::::::::ggg::::g a::::::::::::a n:::nn::::::::nn dd::::::::::::::d
R::::RRRRRR:::::R e::::::eeeee:::::een::::::::::::::nn d::::::::::::::::d e::::::eeeee:::::eer:::::::::::::::::r i::::in::::::::::::::nn g:::::::::::::::::g aaaaaaaaa:::::an::::::::::::::nn d::::::::::::::::d
R:::::::::::::RR e::::::e e:::::enn:::::::::::::::nd:::::::ddddd:::::d e::::::e e:::::err::::::rrrrr::::::ri::::inn:::::::::::::::ng::::::ggggg::::::gg a::::ann:::::::::::::::nd:::::::ddddd:::::d
R::::RRRRRR:::::R e:::::::eeeee::::::e n:::::nnnn:::::nd::::::d d:::::d e:::::::eeeee::::::e r:::::r r:::::ri::::i n:::::nnnn:::::ng:::::g g:::::g aaaaaaa:::::a n:::::nnnn:::::nd::::::d d:::::d
R::::R R:::::Re:::::::::::::::::e n::::n n::::nd:::::d d:::::d e:::::::::::::::::e r:::::r rrrrrrri::::i n::::n n::::ng:::::g g:::::g aa::::::::::::a n::::n n::::nd:::::d d:::::d
R::::R R:::::Re::::::eeeeeeeeeee n::::n n::::nd:::::d d:::::d e::::::eeeeeeeeeee r:::::r i::::i n::::n n::::ng:::::g g:::::g a::::aaaa::::::a n::::n n::::nd:::::d d:::::d
R::::R R:::::Re:::::::e n::::n n::::nd:::::d d:::::d e:::::::e r:::::r i::::i n::::n n::::ng::::::g g:::::g a::::a a:::::a n::::n n::::nd:::::d d:::::d
RR:::::R R:::::Re::::::::e n::::n n::::nd::::::ddddd::::::dde::::::::e r:::::r i::::::i n::::n n::::ng:::::::ggggg:::::g ,,,,,, a::::a a:::::a n::::n n::::nd::::::ddddd::::::dd
R::::::R R:::::R e::::::::eeeeeeee n::::n n::::n d:::::::::::::::::d e::::::::eeeeeeee r:::::r i::::::i n::::n n::::n g::::::::::::::::g ,::::, a:::::aaaa::::::a n::::n n::::n d:::::::::::::::::d
R::::::R R:::::R ee:::::::::::::e n::::n n::::n d:::::::::ddd::::d ee:::::::::::::e r:::::r i::::::i n::::n n::::n gg::::::::::::::g ,::::, a::::::::::aa:::a n::::n n::::n d:::::::::ddd::::d
RRRRRRRR RRRRRRR eeeeeeeeeeeeee nnnnnn nnnnnn ddddddddd ddddd eeeeeeeeeeeeee rrrrrrr iiiiiiii nnnnnn nnnnnn gggggggg::::::g ,:::,, aaaaaaaaaa aaaa nnnnnn nnnnnn ddddddddd ddddd
g:::::g ,:::,
gggggg g:::::g ,,,,
g:::::gg gg:::::g
g::::::ggg:::::::g
gg:::::::::::::g
ggg::::::ggg
gggggg
RRRRRRRRRRRRRRRRR tttt RRRRRRRRRRRRRRRRR tttt
R::::::::::::::::R ttt:::t R::::::::::::::::R ttt:::t
R::::::RRRRRR:::::R t:::::t R::::::RRRRRR:::::R t:::::t
RR:::::R R:::::R t:::::t RR:::::R R:::::R t:::::t
R::::R R:::::R eeeeeeeeeeee aaaaaaaaaaaaa ccccccccccccccccttttttt:::::ttttttt R::::R R:::::R ooooooooooo uuuuuu uuuuuuttttttt:::::ttttttt eeeeeeeeeeee rrrrr rrrrrrrrr
R::::R R:::::R ee::::::::::::ee a::::::::::::a cc:::::::::::::::ct:::::::::::::::::t R::::R R:::::R oo:::::::::::oo u::::u u::::ut:::::::::::::::::t ee::::::::::::ee r::::rrr:::::::::r
R::::RRRRRR:::::R e::::::eeeee:::::eeaaaaaaaaa:::::a c:::::::::::::::::ct:::::::::::::::::t R::::RRRRRR:::::R o:::::::::::::::ou::::u u::::ut:::::::::::::::::t e::::::eeeee:::::eer:::::::::::::::::r
R:::::::::::::RR e::::::e e:::::e a::::ac:::::::cccccc:::::ctttttt:::::::tttttt R:::::::::::::RR o:::::ooooo:::::ou::::u u::::utttttt:::::::tttttt e::::::e e:::::err::::::rrrrr::::::r
R::::RRRRRR:::::R e:::::::eeeee::::::e aaaaaaa:::::ac::::::c ccccccc t:::::t R::::RRRRRR:::::R o::::o o::::ou::::u u::::u t:::::t e:::::::eeeee::::::e r:::::r r:::::r
R::::R R:::::Re:::::::::::::::::e aa::::::::::::ac:::::c t:::::t R::::R R:::::Ro::::o o::::ou::::u u::::u t:::::t e:::::::::::::::::e r:::::r rrrrrrr
R::::R R:::::Re::::::eeeeeeeeeee a::::aaaa::::::ac:::::c t:::::t R::::R R:::::Ro::::o o::::ou::::u u::::u t:::::t e::::::eeeeeeeeeee r:::::r
R::::R R:::::Re:::::::e a::::a a:::::ac::::::c ccccccc t:::::t tttttt R::::R R:::::Ro::::o o::::ou:::::uuuu:::::u t:::::t tttttte:::::::e r:::::r
RR:::::R R:::::Re::::::::e a::::a a:::::ac:::::::cccccc:::::c t::::::tttt:::::t RR:::::R R:::::Ro:::::ooooo:::::ou:::::::::::::::uu t::::::tttt:::::te::::::::e r:::::r
R::::::R R:::::R e::::::::eeeeeeeea:::::aaaa::::::a c:::::::::::::::::c tt::::::::::::::t R::::::R R:::::Ro:::::::::::::::o u:::::::::::::::u tt::::::::::::::t e::::::::eeeeeeee r:::::r
R::::::R R:::::R ee:::::::::::::e a::::::::::aa:::a cc:::::::::::::::c tt:::::::::::tt R::::::R R:::::R oo:::::::::::oo uu::::::::uu:::u tt:::::::::::tt ee:::::::::::::e r:::::r
RRRRRRRR RRRRRRR eeeeeeeeeeeeee aaaaaaaaaa aaaa cccccccccccccccc ttttttttttt RRRRRRRR RRRRRRR ooooooooooo uuuuuuuu uuuu ttttttttttt eeeeeeeeeeeeee rrrrrrr</pre>
<h2 class='date'> October 13th, 2018</h2>
</header>
<article>
<section id="todo">
<h1>To-Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Review</li>
<li>AJAX</li>
<li>Conditional Rendering</li>
<li>React Router</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Good morning, everyone! Today, we'll be continuing learning about React. Today's class will focus specifically on forms, conditionally rendering components,
making AJAX requests and routing. We'll be talking about some new class component syntax, the component lifecycle (receiving props, mounting, etc.) making requests with Axios, and topping it all off with
the React Router Library. All of the activities we'll be doing today require a clean boilerplate with <span class="mono">create-react-app</span> wherein
the <span class="mono">/src</span> directory will be swapped out repeatedly, so before we begin,
if you haven't already it would be a good idea to create a new React install and work from that directory.
</p>
</section>
<section>
<h1>Review</h1>
<p class='no-letter'>Today's lesson begin with a review activity to refresh everyone on their basic React syntax.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>A Formal Review</h3>
<p>In this activity, you will work to connect a simple form to a component's state.</p>
<p>Instructions are available at <span class="mono">01-Stu_FormalReview/README.md</span>. Note that we are working out of the second React folder,
i.e. <span class="mono">/20-react</span>.</p>
</div>
<div class="review"><h2>
A Formal Review, Review
</h2>
<p>The key aspects of this activity are the input tag props, the <span class="mono">onChange</span> method and the class method is links to,
and preventing the default event on form submission.</p></div>
<p>It seems weird that we still need to use <span class="mono">event.preventDefault()</span>, right? As a reminder, since React transpiles down to client-side
ES5 in the browser, we still have to take care of any potential weirdness we might get with the browser's default behavior. Plus, what if we want to define
that behavior? For instance, what if we want to make an AJAX request to a backend?</p>
<p>All those questions will be answered and more in the next section!</p>
</section>
<section>
<h1>AJAX</h1>
<p>I'll be demonstrating an application that uses Axios to make requests. Note that instead of using NPM, since we're already using Yarn I'll have to add
the <span class="mono">axios</span> library using <code class="language-bash">yarn add axios</code>. This demo uses the Giphy API to search and display the
results in the application. After this demo, we'll dive into the code, taking stock of which components are stateful and which are pure (dumb) components.
</p>
<p>So, why do we have smart components and dumb ones? <span class="note">Container components</span> are primarily concerned with how things <span class="bold">work</span> and render very
little, if any of their own markup. Instead, they mostly render other components and pass down the logic and data they need to work.
In contrast, <span class="note">presentational components</span> are concerned with how things <span class="bold">look</span> and typically don't contain any logic that doesn't have to
do with their own individual UI.</p>
<p>Smart components also take full advantage of the <span class="note">component lifecycle</span>. When a component is about to
receive props, about to be mounted, is about to unmount, etc., class components inherit special methods by extending
React components. <span class="mono">componentWillMount</span>, <span class="mono">componentWillReceiveProps</span>,
<span class="mono">componentDidMount</span>, and <span class="mono">componentWillUnmount</span> are all such methods.
We can thingk of <span class="mono">componentDidMount</span> like the React equivalent of <code class="language-js">$(document).ready</code>.
</p>
<p>Oftentimes, we'll want to run an AJAX request to fetch some data from an API. Since the constructor is run
synchronously,
we might not see any data when our component is rendered—the state won't update and trigger a render. If we put this call
in <span class="mono">componentDidMount</span>, we avoid this race condition entirely. We can update the state after the component
is rendered, triggering a re-render. These lifecycle methods are also useful in performing any cleanup we might need
after the component is unmounted, such as removing timeouts and intervals. More info is available in the React API docs.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>AJAX</h3>
<p>In this activity, you will create a simple React application with which users can query the OMDB API and display
information about the movie searched for.
</p>
<p><span class="mono">03-Stu_AJAX/README.md</span> has what you need.</p>
</div>
<div class="review">
<h2>AJAX Review</h2>
<p>Let's go over the steps necessary to get the behavior you need. We have to leverage component lifecycle methods
and Axios to make it happen.
</p>
</div>
<hr>
<h2>Conditional Rendering</h2>
<p>If you need a refresher on conditional rendering, the <a href="https://facebook.github.io/react/docs/conditional-rendering.html">Conditional Rendering API
doc</a> would be good to review. We'll be doing that next!</p>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Conditional Render</h3>
<p>In this activity, you will render one of four different components based upon a component's state.
We'll be investigating a different way to do this later in the class...</p>
<p>For now, <span class="mono">04-Stu_ConditionalRender/README.md</span> has what you need.</p>
</div>
<div class="review">
<h2>Conditional Render Review</h2>
<p>Let's go over this activity.</p>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>React Router</h1>
<p>So far, we've just been working with React applications with only one page of content, but in the real world, web
applications have multiple—often complex —pages and routes. Even single page applications will have different
subpaths. If you want to link to someone's profile page on your fictional React app, how do you do that?
A User would still have to navigate to the profile "page" on their own from scratch every time since the URL in our
address bar doesn't actually change as we click through the tabs.</p>
<p>This may seem trivial now, but what if our application was as large as Amazon.com? What if we wanted to share the URL
to a page containing one of millions of different products with someone? How would we get users to where we intend for
them to go?</p>
<p>Thankfully, we don't have to build the solution to this problem ourselves. In the wild, you'll be hard-pressed to find a React application
that doesn't use <a href="https://reacttraining.com/react-router/" target="_blank">React Router</a>. When we visit and poke around the docs,
we get a lot of great examples of what we can do. The most exciting part is seeing the URL change dynamically, linking
directly to the rendering of any component we wish. You don't have to know everything about this library—there's
a lot here.
</p>
<p>I'll show a quick example of this in action.
I'll also need to do <code class="language-js">yarn add react-router-dom</code>. React Router can be used in a variety of different environments.
Since we're going to be routing our application on the
web, more specifically, to the HTML DOM, we need to specifically install the <span class="mono">react-router-dom</span> library.</p>
<hr>
<div class="student-activity">
<h2>Partner activity!</h2>
<h3>Pupster App</h3>
<p>In this activity students will work with partners to create a full React application from scratch complete with routing
and AJAX requests to the <a href="https://dog.ceo/dog-api/" target="_blank">Dog Ceo API (https://dog.ceo/dog-api/)</a>.</p>
<p>Your instructions live at <span class="mono">06-Stu_PupsterApp/README.md</span></p>
</div>
<div class="review">
<h2>Pupster Review</h2>
<p>Let's go over this activity.</p>
</div>
</section>
<div class="page-break">
<h1>That's all for today, see you Monday!</h1>
</div>
</article>
</body>
<!-- Script to make code pretty -->
<script type='text/javascript' src="../js/prism.js"></script>
</html>