What 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 Hello world

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 (

Hello World

); } } 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:

Hello World

7 The class extends s(cid:307)nta(cid:306) (cid:305)e used in our ﬁrst 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:

Welcome back Ari

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) ﬁ(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) ﬁ(cid:270)st React app. 9

The React app

Similar The React app