Skip to content

Commit 7ad23f6

Browse files
author
Ari
committed
Wrapped days 2 through 7 in demo class
1 parent f4a6f0f commit 7ad23f6

File tree

5 files changed

+28
-85
lines changed

5 files changed

+28
-85
lines changed

‎day-2/public/index.html

+10-76
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,15 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7-
<title>React App</title>
8-
</head>
9-
<body>
10-
<p>In our previous article, we looked at what <a href="https://facebook.github.io/react/">React</a> is and discussed at a high-level how it works. In this article, we&#39;re going to look at one part of the React ecosystem: ES6 and JSX.</p>
11-
<h2 id="jsx-es5-es6-wtf-">JSX/ES5/ES6 WTF??!</h2>
12-
<p>In any cursory search on the Internet looking for React material, no doubt you have already run into the terms <code>JSX</code>, ES5, and ES6. These opaque acronyms can get confusing quickly.</p>
13-
<p>ES5 (the <code>ES</code> stands for ECMAScript) is basically &quot;regular JavaScript.&quot; The 5th update to JavaScript, ES5 was finalized in 2009. It has been supported by all major browsers for several years. Therefore, if you&#39;ve written or seen any JavaScript in the recent past, chances are it was ES5.</p>
14-
<p>ES6 is a new version of JavaScript that adds some nice syntactical and functional additions. It was finalized in 2015. ES6 is <a href="http://kangax.github.io/compat-table/es6/">almost fully supported</a> by all major browsers. But it will be some time until older versions of web browsers are phased out of use. For instance, Internet Explorer 11 does not support ES6 but has about 12% of the browser market share.</p>
15-
<p>In order to reap the benefits of ES6 today, we have to do a few things to get it to work in as many browsers as we can:</p>
16-
<ol>
17-
<li>We have to <em>transpile</em> our code so that a wider range of browsers understand our JavaScript. This means converting ES6 JavaScript into ES5 JavaScript.</li>
18-
<li>We have to include a <em>shim</em> or <em>polyfill</em> that provides additional functionality added in ES6 that a browser may or may not have.</li>
19-
</ol>
20-
<p>We&#39;ll see how we do this a bit later in the series.</p>
21-
<blockquote>
22-
<p>Most of the code we&#39;ll write in this series will be easily translatable to ES5. In cases where we use ES6, we&#39;ll introduce the feature at first and then walk through it.</p>
23-
</blockquote>
24-
<p>As we&#39;ll see, all of our React components have a <code>render</code> function that specifies what the HTML output of our React component will be. <strong>JavaScript eXtension</strong>, or more commonly <strong>JSX</strong>, is a React extension that allows us to write JavaScript that <em>looks like</em> HTML.</p>
25-
<blockquote>
26-
<p>Although in previous paradigms it was viewed as a bad habit to include JavaScript and markup in the same place, it turns out that combining the view with the functionality makes reasoning about the view straight-forward.</p>
27-
</blockquote>
28-
<p>To see what this means, imagine we had a React component that renders an <code>h1</code> HTML tag. JSX allows us to declare this element in a manner that closely resembles HTML:</p>
29-
<pre><code class="lang-javascript"><span class="token keyword">class</span> <span class="token class-name">Header</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
30-
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
31-
<span class="token keyword">return</span> <span class="token punctuation">(</span>
32-
<span class="token operator">&lt;</span>h1 className<span class="token operator">=</span><span class="token string">'large'</span><span class="token operator">></span>Hello World<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
33-
<span class="token punctuation">)</span><span class="token punctuation">;</span>
34-
<span class="token punctuation">}</span>
35-
<span class="token punctuation">}</span>
36-
</code></pre>
37-
<div id="demo1"></div>
383

39-
<p>The <code>render()</code> function in the <code>HelloWorld</code> component looks like it&#39;s returning HTML, but this is actually JSX. The JSX is <em>translated</em> to regular JavaScript at runtime. That component, after translation, looks like this:</p>
40-
<pre><code class="lang-javascript"><span class="token keyword">class</span> <span class="token class-name">HelloWorld</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
41-
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
42-
<span class="token keyword">return</span> <span class="token punctuation">(</span>
43-
React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span>
44-
<span class="token string">'h1'</span><span class="token punctuation">,</span>
45-
<span class="token punctuation">{</span>className<span class="token punctuation">:</span> <span class="token string">'large'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
46-
<span class="token string">'Hello World'</span>
47-
<span class="token punctuation">)</span>
48-
<span class="token punctuation">)</span><span class="token punctuation">;</span>
49-
<span class="token punctuation">}</span>
50-
<span class="token punctuation">}</span>
51-
</code></pre>
52-
<p>While JSX looks like HTML, it is actually just a terser way to write a <code>React.createElement()</code> declaration. When a component renders, it outputs a tree of React elements or a <strong>virtual representation</strong> of the HTML elements this component outputs. React will then determine what changes to make to the actual DOM based on this React element representation. In the case of the <code>HelloWorld</code> component, the HTML that React writes to the DOM will look like this:</p>
53-
<pre><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>large<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
54-
</code></pre>
55-
<blockquote>
56-
<p>The <code>class extends</code> syntax we used in our first React component is ES6 syntax. It allows us to write objects using a familiar Object-Oriented style.
57-
In ES6, the <code>class</code> syntax might be translated as:</p>
58-
<pre><code class="lang-javascript"><span class="token keyword">var</span> HelloWorld <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
59-
Object<span class="token punctuation">.</span><span class="token keyword">extends</span><span class="token punctuation">(</span>HelloWorld<span class="token punctuation">,</span> React<span class="token punctuation">.</span>Component<span class="token punctuation">)</span>
60-
HelloWorld<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>render <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
61-
</code></pre>
62-
</blockquote>
63-
<p>Because JSX is JavaScript, we can&#39;t use JavaScript reserved words. This includes words like <code>class</code> and <code>for</code>.</p>
64-
<p>React gives us the attribute <code>className</code>. We use it in <code>HelloWorld</code> to set the <code>large</code> class on our <code>h1</code> tag. There are a few other attributes, such as the <code>for</code> attribute on a label that React translates into <code>htmlFor</code> as <code>for</code> is also a reserved word. We&#39;ll look at these when we start using them.</p>
65-
<p>If we want to write pure JavaScript instead of rely on a JSX compiler, we can just write the <code>React.createElement()</code> function and not worry about the layer of abstraction. But we like JSX. It&#39;s especially more readable with complex components. Consider the following JSX:</p>
66-
<pre><code class="lang-javascript"><span class="token operator">&lt;</span>div<span class="token operator">></span>
67-
<span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string">"profile.jpg"</span> alt<span class="token operator">=</span><span class="token string">"Profile photo"</span> <span class="token operator">/</span><span class="token operator">></span>
68-
<span class="token operator">&lt;</span>h1<span class="token operator">></span>Welcome back Ari<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
69-
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
70-
</code></pre>
71-
<p>The JavaScript delivered to the browser will look like this:</p>
72-
<pre><code class="lang-javascript">React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
73-
React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>src<span class="token punctuation">:</span> <span class="token string">"profile.jpg"</span><span class="token punctuation">,</span> alt<span class="token punctuation">:</span> <span class="token string">"Profile photo"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
74-
React<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"h1"</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">"Welcome back Ari"</span><span class="token punctuation">)</span>
75-
<span class="token punctuation">)</span><span class="token punctuation">;</span>
76-
</code></pre>
77-
<p>Again, while you can skip JSX and write the latter directly, the JSX syntax is well-suited for representing nested HTML elements.</p>
78-
<p>Now that we understand JSX, we can start writing our first React components. Join us tomorrow when we jump into our first React app.</p>
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
8+
<title>React App</title>
9+
</head>
10+
11+
<body>
12+
<h3>No demo today</h3>
13+
</body>
7914

80-
</body>
8115
</html>

‎day-3/public/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313

1414
<body>
1515
<div id="app"></div>
16+
<div class="demo">
17+
<div id="demo1"></div>
18+
<div id="demo2"></div>
19+
</div>
1620
<script type="text/babel">
1721
var app = <h1>Hello world</h1>
1822
var mountComponent = document.querySelector('#app');

‎day-5/public/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
</head>
1010

1111
<body>
12-
<div id="demo1"></div>
13-
12+
<div class="demo">
13+
<div id="demo1"></div>
14+
</div>
1415
</body>
1516

1617
</html>

‎day-6/public/index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
</head>
1010

1111
<body>
12-
<div id="demo1"></div>
13-
<div id="demo2"></div>
14-
<div id="demo3"></div>
12+
<div class="demo">
13+
<div id="demo1"></div>
14+
<div id="demo2"></div>
15+
<div id="demo3"></div>
16+
</div>
1517
</body>
1618

1719
</html>

‎day-7/public/index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@
99
</head>
1010

1111
<body>
12-
<div id="demo1"></div>
13-
<div id="fetchedTimeline"></div>
14-
<div id="requestRefresh"></div>
15-
<div id="clock"></div>
12+
<div class="demo">
13+
<div id="demo1"></div>
14+
<div id="fetchedTimeline"></div>
15+
<div id="requestRefresh"></div>
16+
<div id="clock"></div>
17+
</div>
1618
</body>
1719

1820
</html>

0 commit comments

Comments
 (0)