Table Of ContentWhat is React?
Edit this page on Github (https://github.com/fullstackreact/30-days-of-react/blob/day-1/post.md)
Today, we're starting out at the beginning. Let's look at what
React is and what makes it tick. We'll discuss why we want to
use it.
O(cid:304)e(cid:270) the ne(cid:306)t 3(cid:598) da(cid:307)s, (cid:307)ou'll get a good feel fo(cid:270) the (cid:304)a(cid:270)ious pa(cid:270)ts of the React
(cid:648)https://facebook.github.io/(cid:270)eact/(cid:649) (cid:305)eb f(cid:270)ame(cid:305)o(cid:270)k and its ecos(cid:307)stem.
Each da(cid:307) in ou(cid:270) 3(cid:598) da(cid:307) ad(cid:304)entu(cid:270)e (cid:305)ill build upon the p(cid:270)e(cid:304)ious da(cid:307)'s
mate(cid:270)ials, so b(cid:307) the end of the se(cid:270)ies, (cid:307)ou'll not onl(cid:307) kno(cid:305) the te(cid:270)ms,
concepts, and unde(cid:270)pinnings of ho(cid:305) the f(cid:270)ame(cid:305)o(cid:270)k (cid:305)o(cid:270)ks, but be able to use
React in (cid:307)ou(cid:270) ne(cid:306)t (cid:305)eb application.
Let's get sta(cid:270)ted. We'll sta(cid:270)t at the (cid:304)e(cid:270)(cid:307) beginning
(cid:648)https://(cid:305)(cid:305)(cid:305).(cid:307)outube.com/(cid:305)atch?(cid:304)=(cid:599)RW3nDRmu6k(cid:649) as it's a (cid:304)e(cid:270)(cid:307) good
place to sta(cid:270)t.
What is React?
React (cid:648)https://facebook.github.io/(cid:270)eact/(cid:649) is a Ja(cid:304)aSc(cid:270)ipt lib(cid:270)a(cid:270)(cid:307) fo(cid:270) building
use(cid:270) inte(cid:270)faces. It is the (cid:304)ie(cid:305) la(cid:307)e(cid:270) fo(cid:270) (cid:305)eb applications.
1
At the hea(cid:270)t of all React applications a(cid:270)e components. A component is a self-
contained module that (cid:270)ende(cid:270)s some output. We can (cid:305)(cid:270)ite inte(cid:270)face
elements like a button o(cid:270) an input field as a React component. Components
a(cid:270)e composable. A component might include one o(cid:270) mo(cid:270)e othe(cid:270) components
in its output.
B(cid:270)oadl(cid:307) speaking, to (cid:305)(cid:270)ite React apps (cid:305)e (cid:305)(cid:270)ite React components that
co(cid:270)(cid:270)espond to (cid:304)a(cid:270)ious inte(cid:270)face elements. We then o(cid:270)ganize these
components inside highe(cid:270)-le(cid:304)el components (cid:305)hich define the st(cid:270)uctu(cid:270)e of
ou(cid:270) application.
Fo(cid:270) e(cid:306)ample, take a fo(cid:270)m. A fo(cid:270)m might consist of man(cid:307) inte(cid:270)face elements,
like input fields, labels, o(cid:270) buttons. Each element inside the fo(cid:270)m can be
(cid:305)(cid:270)itten as a React component. We'd then (cid:305)(cid:270)ite a highe(cid:270)-le(cid:304)el component,
the fo(cid:270)m component itself. The fo(cid:270)m component (cid:305)ould specif(cid:307) the st(cid:270)uctu(cid:270)e
of the fo(cid:270)m and include each of these inte(cid:270)face elements inside of it.
Impo(cid:270)tantl(cid:307), each component in a React app abides b(cid:307) st(cid:270)ict data
management p(cid:270)inciples. Comple(cid:306), inte(cid:270)acti(cid:304)e use(cid:270) inte(cid:270)faces often in(cid:304)ol(cid:304)e
comple(cid:306) data and application state. The su(cid:270)face a(cid:270)ea of React is limited and
aimed at gi(cid:304)ing us the tools to be able to anticipate ho(cid:305) ou(cid:270) application (cid:305)ill
look (cid:305)ith a gi(cid:304)en set of ci(cid:270)cumstances. We dig into these p(cid:270)inciples late(cid:270) in
the cou(cid:270)se.
Okay, so how do we use it?
React is a Ja(cid:304)aSc(cid:270)ipt f(cid:270)ame(cid:305)o(cid:270)k. Using the f(cid:270)ame(cid:305)o(cid:270)k is as simple as
including a Ja(cid:304)aSc(cid:270)ipt file in ou(cid:270) HTML and using the React e(cid:306)po(cid:270)ts in ou(cid:270)
application's Ja(cid:304)aSc(cid:270)ipt.
Fo(cid:270) instance, the Hello world e(cid:306)ample of a React (cid:305)ebsite can be as simple as:
2
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-
dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello world</h1>,
document.querySelector('#app')
);
</script>
</body>
</html>
Although it might look a little sca(cid:270)(cid:307), the Ja(cid:304)aSc(cid:270)ipt code is a single line that
d(cid:307)namicall(cid:307) adds Hello world to the page. Note that (cid:305)e onl(cid:307) needed to
include a handful of Ja(cid:304)aSc(cid:270)ipt files to get e(cid:304)e(cid:270)(cid:307)thing (cid:305)o(cid:270)king.
How does it work?
Unlike man(cid:307) of its p(cid:270)edecesso(cid:270)s, React ope(cid:270)ates not di(cid:270)ectl(cid:307) on the b(cid:270)o(cid:305)se(cid:270)'s
Document Object Model (cid:648)DOM(cid:649) immediatel(cid:307), but on a virtual DOM. That is,
(cid:270)athe(cid:270) than manipulating the document in a b(cid:270)o(cid:305)se(cid:270) afte(cid:270) changes to ou(cid:270)
data (cid:648)(cid:305)hich can be (cid:269)uite slo(cid:305)(cid:649) it (cid:270)esol(cid:304)es changes on a DOM built and (cid:270)un
enti(cid:270)el(cid:307) in memo(cid:270)(cid:307). Afte(cid:270) the (cid:304)i(cid:270)tual DOM has been updated, React
intelligentl(cid:307) dete(cid:270)mines (cid:305)hat changes to make to the actual b(cid:270)o(cid:305)se(cid:270)'s DOM.
3
The React Vi(cid:270)tual DOM (cid:648)https://facebook.github.io/(cid:270)eact/docs/dom-
diffe(cid:270)ences.html(cid:649) e(cid:306)ists enti(cid:270)el(cid:307) in-memo(cid:270)(cid:307) and is a (cid:270)ep(cid:270)esentation of the
(cid:305)eb b(cid:270)o(cid:305)se(cid:270)'s DOM. Because of this, (cid:305)e (cid:305)hen (cid:305)e (cid:305)(cid:270)ite a React component,
(cid:305)e'(cid:270)e not (cid:305)(cid:270)iting di(cid:270)ectl(cid:307) to the DOM, but (cid:305)e'(cid:270)e (cid:305)(cid:270)iting a (cid:304)i(cid:270)tual component
that React (cid:305)ill tu(cid:270)n into the DOM.
In the ne(cid:306)t a(cid:270)ticle, (cid:305)e'll look at (cid:305)hat this means fo(cid:270) us as (cid:305)e build ou(cid:270) React
components and jump into JSX and (cid:305)(cid:270)iting ou(cid:270) fi(cid:270)st (cid:270)eal components.
4
What is JSX?
Edit this page on Github (https://github.com/fullstackreact/30-days-of-react/blob/day-2/post.md)
Now that we know what React is, let's take a look at a few terms
and concepts that will come up throughout the rest of the
series.
In ou(cid:270) p(cid:270)e(cid:304)ious a(cid:270)ticle, (cid:305)e looked at (cid:305)hat React
(cid:648)https://facebook.github.io/(cid:270)eact/(cid:649) is and discussed at a high-le(cid:304)el ho(cid:305) it
(cid:305)o(cid:270)ks. In this a(cid:270)ticle, (cid:305)e'(cid:270)e going to look at one pa(cid:270)t of the React ecos(cid:307)stem:
ES(cid:604) and JSX.
JSX/ES(cid:474)/ES(cid:475) WTF??!
In an(cid:307) cu(cid:270)so(cid:270)(cid:307) sea(cid:270)ch on the Inte(cid:270)net looking fo(cid:270) React mate(cid:270)ial, no doubt
(cid:307)ou ha(cid:304)e al(cid:270)ead(cid:307) (cid:270)un into the te(cid:270)ms JSX, ES(cid:603), and ES(cid:604). These opa(cid:269)ue
ac(cid:270)on(cid:307)ms can get confusing (cid:269)uickl(cid:307).
ES(cid:603) (cid:648)the ES stands fo(cid:270) ECMASc(cid:270)ipt(cid:649) is basicall(cid:307) "(cid:270)egula(cid:270) Ja(cid:304)aSc(cid:270)ipt." The (cid:603)th
update to Ja(cid:304)aSc(cid:270)ipt, ES(cid:603) (cid:305)as finalized in (cid:600)(cid:598)(cid:598)9. It has been suppo(cid:270)ted b(cid:307) all
majo(cid:270) b(cid:270)o(cid:305)se(cid:270)s fo(cid:270) se(cid:304)e(cid:270)al (cid:307)ea(cid:270)s. The(cid:270)efo(cid:270)e, if (cid:307)ou'(cid:304)e (cid:305)(cid:270)itten o(cid:270) seen an(cid:307)
Ja(cid:304)aSc(cid:270)ipt in the (cid:270)ecent past, chances a(cid:270)e it (cid:305)as ES(cid:603).
ES(cid:604) is a ne(cid:305) (cid:304)e(cid:270)sion of Ja(cid:304)aSc(cid:270)ipt that adds some nice s(cid:307)ntactical and
functional additions. It (cid:305)as finalized in (cid:600)(cid:598)(cid:599)(cid:603). ES(cid:604) is almost full(cid:307) suppo(cid:270)ted
(cid:648)http://kanga(cid:306).github.io/compat-table/es(cid:604)/(cid:649) b(cid:307) all majo(cid:270) b(cid:270)o(cid:305)se(cid:270)s. But it
5
(cid:305)ill be some time until olde(cid:270) (cid:304)e(cid:270)sions of (cid:305)eb b(cid:270)o(cid:305)se(cid:270)s a(cid:270)e phased out of use.
Fo(cid:270) instance, Inte(cid:270)net E(cid:306)plo(cid:270)e(cid:270) (cid:599)(cid:599) does not suppo(cid:270)t ES(cid:604), but has about (cid:599)(cid:600)% of
the b(cid:270)o(cid:305)se(cid:270) ma(cid:270)ket sha(cid:270)e.
In o(cid:270)de(cid:270) to (cid:270)eap the benefits of ES(cid:604) toda(cid:307), (cid:305)e ha(cid:304)e to do a fe(cid:305) things to get it
to (cid:305)o(cid:270)k in as man(cid:307) b(cid:270)o(cid:305)se(cid:270)s as (cid:305)e can:
(cid:599). We ha(cid:304)e to transpile ou(cid:270) code so that a (cid:305)ide(cid:270) (cid:270)ange of b(cid:270)o(cid:305)se(cid:270)s
unde(cid:270)stand ou(cid:270) Ja(cid:304)aSc(cid:270)ipt. This means con(cid:304)e(cid:270)ting ES(cid:604) Ja(cid:304)aSc(cid:270)ipt into
ES(cid:603) Ja(cid:304)aSc(cid:270)ipt.
(cid:600). We ha(cid:304)e to include a shim o(cid:270) polyfill that p(cid:270)o(cid:304)ides additional
functionalit(cid:307) added in ES(cid:604) that a b(cid:270)o(cid:305)se(cid:270) ma(cid:307) o(cid:270) ma(cid:307) not ha(cid:304)e.
We'll see ho(cid:305) (cid:305)e do this a bit late(cid:270) in the se(cid:270)ies.
Most of the code (cid:305)e'll (cid:305)rite in this series (cid:305)ill be easil(cid:307)
translatable to ES(cid:603). In cases (cid:305)here (cid:305)e use ES(cid:604), (cid:305)e'll
introduce the feature at first and then (cid:305)alk through it.
As (cid:305)e'll see, all of ou(cid:270) React components ha(cid:304)e a render function that
specifies (cid:305)hat the HTML output of ou(cid:270) React component (cid:305)ill be. JavaScript
eXtension, o(cid:270) mo(cid:270)e commonl(cid:307) JSX, is a React e(cid:306)tension that allo(cid:305)s us to
(cid:305)(cid:270)ite Ja(cid:304)aSc(cid:270)ipt that looks like HTML.
Although in pre(cid:304)ious paradigms it (cid:305)as (cid:304)ie(cid:305)ed as a bad habit
to include Ja(cid:304)aScript and markup in the same place, it turns
out that combining the (cid:304)ie(cid:305) (cid:305)ith the functionalit(cid:307) makes
reasoning about the (cid:304)ie(cid:305) straight-for(cid:305)ard.
6
To see (cid:305)hat this means, imagine (cid:305)e had a React component that (cid:270)ende(cid:270)s an
h1 HTML tag. JSX allo(cid:305)s us to decla(cid:270)e this element in a manne(cid:270) that closel(cid:307)
(cid:270)esembles HTML:
class HelloWorld extends React.Component {
render() {
return (
<h1 className='large'>Hello World</h1>
);
}
}
The render() function in the HelloWorld component looks like it's (cid:270)etu(cid:270)ning
HTML, but this is actuall(cid:307) JSX. The JSX is translated to (cid:270)egula(cid:270) Ja(cid:304)aSc(cid:270)ipt at
(cid:270)untime. That component, afte(cid:270) t(cid:270)anslation, looks like this:
class HelloWorld extends React.Component {
render() {
return (
React.createElement(
'h1',
{className: 'large'},
'Hello World'
)
);
}
}
While JSX looks like HTML, it is actuall(cid:307) just a te(cid:270)se(cid:270) (cid:305)a(cid:307) to (cid:305)(cid:270)ite a
React.createElement() decla(cid:270)ation. When a component (cid:270)ende(cid:270)s, it outputs a
t(cid:270)ee of React elements o(cid:270) a virtual representation of the HTML elements
this component outputs. React (cid:305)ill then dete(cid:270)mine (cid:305)hat changes to make to
the actual DOM based on this React element (cid:270)ep(cid:270)esentation. In the case of
the HelloWorld component, the HTML that React (cid:305)(cid:270)ites to the DOM (cid:305)ill
look like this:
<h1 class='large'>Hello World</h1>
7
The class extends s(cid:307)nta(cid:306) (cid:305)e used in our first React
component is ES(cid:604) s(cid:307)nta(cid:306). It allo(cid:305)s us to (cid:305)rite objects using a
familiar Object-Oriented st(cid:307)le. In ES(cid:604), the class s(cid:307)nta(cid:306)
might be translated as:
var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}
Because JSX is Ja(cid:304)aSc(cid:270)ipt, (cid:305)e can't use Ja(cid:304)aSc(cid:270)ipt (cid:270)ese(cid:270)(cid:304)ed (cid:305)o(cid:270)ds. This
includes (cid:305)o(cid:270)ds like class and for.
React gi(cid:304)es us the att(cid:270)ibute className . We use it in HelloWorld to set the
large class on ou(cid:270) h1 tag. The(cid:270)e a(cid:270)e a fe(cid:305) othe(cid:270) att(cid:270)ibutes, such as the for
att(cid:270)ibute on a label that React t(cid:270)anslates into htmlFor as for is also a
(cid:270)ese(cid:270)(cid:304)ed (cid:305)o(cid:270)d. We'll look at these (cid:305)hen (cid:305)e sta(cid:270)t using them.
If (cid:305)e (cid:305)ant to (cid:305)(cid:270)ite pu(cid:270)e Ja(cid:304)aSc(cid:270)ipt instead of (cid:270)el(cid:307) on a JSX compile(cid:270), (cid:305)e can
just (cid:305)(cid:270)ite the React.createElement() function and not (cid:305)o(cid:270)(cid:270)(cid:307) about the la(cid:307)e(cid:270)
of abst(cid:270)action. But (cid:305)e like JSX. It's especiall(cid:307) mo(cid:270)e (cid:270)eadable (cid:305)ith comple(cid:306)
components. Conside(cid:270) the follo(cid:305)ing JSX:
<div>
<img src="profile.jpg" alt="Profile photo" />
<h1>Welcome back Ari</h1>
</div>
The Ja(cid:304)aSc(cid:270)ipt deli(cid:304)e(cid:270)ed to the b(cid:270)o(cid:305)se(cid:270) (cid:305)ill look like this:
8
React.createElement("div", null,
React.createElement("img", {src: "profile.jpg", alt: "Profile
photo"}),
React.createElement("h1", null, "Welcome back Ari")
);
Again, (cid:305)hile (cid:307)ou can skip JSX and (cid:305)(cid:270)ite the latte(cid:270) di(cid:270)ectl(cid:307), the JSX s(cid:307)nta(cid:306) is
(cid:305)ell-suited fo(cid:270) (cid:270)ep(cid:270)esenting nested HTML elements.
No(cid:305) that (cid:305)e unde(cid:270)stand JSX, (cid:305)e can sta(cid:270)t (cid:305)(cid:270)iting ou(cid:270) fi(cid:270)st React
components. Join us tomo(cid:270)(cid:270)o(cid:305) (cid:305)hen (cid:305)e jump into ou(cid:270) fi(cid:270)st React app.
9
Description:src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js. ">.
