-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
284 lines (265 loc) · 9.83 KB
/
index.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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Documentation</title>
<link rel="icon" type="image/x-icon" href="./img/react.png" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav id="navbar">
<header>React Documentation</header>
<a
href="#React_Documentation"
class="nav-link"
style="
text-align: center;
display: block;
margin: 0 auto;
background-color: black;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 10%;
"
>React Documentation</a
>
<a href="#Introduction_JSX" class="nav-link">Introduction JSX</a>
<a href="#Components" class="nav-link">Components</a>
<a href="#State_Lifecycle" class="nav-link">State Lifecycle</a>
<a href="#Handling_Events" class="nav-link">Handling Events</a>
<a href="#Forms" class="nav-link">Forms</a>
<a href="#Reference" class="nav-link">Reference</a>
<a href="#LearnReact" class="nav-link">Learn React!</a>
</nav>
<main id="main-doc">
<section class="main-section" id="React_Documentation">
<header class="intro-react header__main">React Documentation</header>
<h4 class="intro-react">Introduction to React</h4>
<img
src="./img/react.png"
alt="React Introduction Picture"
class="react-intro"
/>
<p>
React is a Javascript library that is made for building single page
applications. React was created in 2011 by a Facebook employee and its
purpose was to improve performance and simplify code maintenance.
React is also an application made by components, components we can
easily rehuse in our application to reduce code. The good thing about
components is that they can be reused in the whole application at any
time. Before we jump in React JS, I would highly encourage you have
some foundation with JavaScript like:
</p>
<p>Some key features that I like about React:</p>
<ol>
<li>
SPA | Single Page Application | Main benefit is that is very fast
and the website doesn't refresh when navigating on it.
</li>
<li>
Virtual DOM | It's a simplified and optimized version of the real
DOM and it helps React to make the updates that it needs by passing
props or states
</li>
<li>
JSX | JavaScript XML It is call like that because it's a syntax
extension to Javascript and it allows us to write HTML in
JavaScript.
</li>
</ol>
<p>
One of the only things that I dislike about React is that is a library
and because of that, you need to add many external libraries to make
your application work.
</p>
<header>
<h3>JavaScript Requirements:</h3>
</header>
<ul>
<li>
<code>
Callbacks | This is very important when it comes to fetch data.
</code>
</li>
<li>
<code
>Objects & Arrays | React uses these two to for storing and
manipulating data. It is essential to also know how to destructure
and also some array methods like the popular "map"</code
>
</li>
<li>
<code>
Functions & Classes | React components are based in returning
functions and classes with JSX syntax.
</code>
</li>
</ul>
</section>
<section class="main-section" id="Introduction_JSX">
<header>
<h4>Introduction JSX</h4>
</header>
<p class="components__Jsx">
JSX is a way to write html in our JavaScript. It is called JSX, and it
is a syntax extension to JavaScript. We recommend using it with React
to describe what the UI should look like. JSX may remind you of a
template language, but it comes with the full power of JavaScript.
</p>
<img
src="https://miro.medium.com/max/720/1*rJB4Tcz_ZZnliNxYmdfGqw.jpeg"
alt="react__jsx"
class="jsx__img"
/>
</section>
<section class="main-section" id="Components">
<header>
<h2>Components</h2>
</header>
<p class="components__p">
React components implement a render() method that takes input data and
returns what to display. This example uses an XML-like syntax called
JSX. Input data that is passed into the component can be accessed by
<span class="bg__code"> render() via this.props. </span>
</p>
<img
src="img/reactcomponent.PNG"
alt="component"
class="component__img"
/>
</section>
<section class="main-section" id="State_Lifecycle">
<header>
<h2>State Lifecycle</h2>
</header>
<ul class="state__ul">
<li>
<code>
componentWillMount: Immediately before initial rendering.
</code>
</li>
<li>
<code>
shouldComponentUpdate: Before rendering, after receiving new props
or state.</code
>
</li>
<li>
<code>
componentWillReceiveProps: When component receives new props.
</code>
</li>
<li>
<code>componenDidMount: Immediately after initial rendering. </code>
</li>
</ul>
</section>
<section class="main-section" id="Handling_Events">
<header>
<h2>Handling Events</h2>
</header>
<p class="components__Jsx">
Handling events with React elements is very similar to handling events
on DOM elements. There are some syntax differences:
</p>
<p class="components__Jsx">
<code> For example, the HTML: </code>
</p>
<p>
<img src="img/state.PNG" alt="state" class="component__img" />
</p>
<p class="components__Jsx">
<code> is slightly different in React: </code>
</p>
<img src="img/state2.PNG" alt="state2" class="component__img" />
<p class="components__Jsx">
Another difference is that you cannot return false to prevent default
behavior in React. You must call preventDefault explicitly. For
example, with plain HTML, to prevent the default form behavior of
submitting, you can write:
</p>
<img src="img/state3.PNG" alt="state3" class="component__img" />
<ul class="state__ul">
<li>
<code>
React events are named using camelCase, rather than lowercase.
</code>
</li>
<li>
<code>
With JSX you pass a function as the event handler, rather than a
string.
</code>
</li>
</ul>
</section>
<section class="main-section" id="Forms">
<header>
<h2>Forms</h2>
</header>
<p class="components__Jsx">
HTML form elements work a bit differently from other DOM elements in
React, because form elements naturally keep some internal state. For
example, this form in plain HTML accepts a <code> single name: </code>
</p>
<img src="img/forms.PNG" alt="forms" class="component__img" />
<p class="components__Jsx">
This form has the default HTML form behavior of browsing to a new page
when the user submits the form. If you want this behavior in React, it
just works. But in most cases, it’s convenient to have a JavaScript
function that handles the submission of the form and has access to the
data that the user entered into the form. The standard way to achieve
this is with a technique called “controlled components”.
</p>
</section>
<section class="main-section" id="LearnReact">
<header>
<h2>Learn React!</h2>
</header>
<div class="container">
<div class="box1">
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/SqcY0GlETPk"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
<div class="box2">
<iframe
width="100%"
height="100%"
src="https://www.youtube.com/embed/bMknfKXIFA8"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</div>
</section>
<section class="main-section footer" id="Reference">
<header>
<h2>Reference</h2>
</header>
<ul>
<li>
All the documentation in this page is a mix of own words and
information that be found at:
<a href="https://reactjs.org/" target="_blank">React</a>
</li>
</ul>
</section>
<footer class="text-center p-3 text-light footercopy">
<img src="./img/logoNestor.png" alt="logo" />
<small> 2023 Nestor Garcia Copyright </small>
</footer>
</main>
</body>
</html>