Awesome 9id-p, x-390445 planp, 6636rea wid 9id-pclass>Experient="48" viesx-1957063151 menu__item">PHot Topic03 categorye">Experient="48" viesx->CommunityR__item">R__item">Andro__item">React__item">Django__item">PHPWse;t a ted-id="" class="jsx-:0;background:#003648;z-insettwidssx-1957063151 menu__-679034 splay:navsx-1957063151 menu__-679034 splay:nav__recesx-1957063151 menu__-679034 splay:nav__rece__widt ader-mt{di">SIGN UPx;ass="ahss="jsx-;cur"7063151 menu__-679034 splay:nav__rece__widt">LOG INid="" class developers class="jsx-4040494831 ">
Expepub9idh-dat
  • Jory05, 2017 memalrx-smalrye">ExpeupdatJeig01, 2018 memalrx- class class class developerslazy-size: er{margin:/ver-photo"ss developerslazy-size:__pclasessivsx-s" cleloperslazy-size:__pclasessivs__pce"48"" alheipers" Ecosysize:Setup — Step-By-Step Walkthrough"lass="jsx-1830pclcess.7a.estackapiy__m/cache=1cliry:max410ity_=ef="/g20/cv1AYBjxToCbzBSMy1OO50pxranslateY(0__right20on-rails-devlazyload-placeholdedx-s class class class developerser{marginbodydn. developerser{marginv>
    Undedstand what pers", Wnip456, 6636Babel=are0to445 6636how to lexfigure them yourself

    This er{marg was osplinalry pub9idhed d nu-item"> class="0404burst103 cmecosysizecshtup-step-by-step-walkthrough-721ff45a7fc1" agegehei_bth=th=rel="#5fd-ima noleve-cdnMicon_id="" em>.s=">

    pers" is erguabry the6hot0 st7frx-3work curriv ry used by the6uniw mid-le9483

  • class="githuby__m/facebookincuba31 /c103;te103 cmapp" agegehei_bth=th=rel="#5fd-ima noleve-cdnc103;te103 cmappcla> rea wry availabre

    Toysee what we’lrybt workwid towards os if you cent wa83 class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eveloagegehei_bth=th=rel="#5fd-ima noleve-cdntrnav-aggarwal>103 cmshtup-tu31 eveid="" ">

    This er{marg requsx-s el49483ary pclfilass=y with 3 gr, J390445610 (inclu wid very basic ES6 sy83ax), CSS, " cl, 6636pceferabry Ex56103. If you ceigmake a to-do app, you’re0rea y Let’s gehslaer{ed.s=">

    I’m0uswid npm v 5 6636" cl v 8. If you’re0uswid ad olded version of " cl you shouldybt fjss. npm 5 saves deevetchcu s to your p456ze:.json by defaul" withou the6need--save<"0404> wh"n instalr445 produint d deevetchcu s. I’36reli c610 upgra wid to npm 5. It’s frsted 6636locks down your deevetchcu s with a p456ze:-lock.json 7a.e, denotwid every version of every deevetchcy. You ceiguse Wnip456 2 os 3 — bo="1.houldywork.s="> It-deve Cexfigurant d

    Let’s sht up a very basic 7a.e sysize. Run <0404>npm it-d<"0404> o636gehsa <0404>p456ze:.json<"0404>. In our projhin’s roo"w i-7.1ory, x-n’s c103;tsanfa.e calrserverass="0404> o636anfolded calrdist<"0404>. <0404>dist<"0404> is where=we=wilrystore alrye"asst-facwid 0404. In <0404>dist<"0404>, c103;tsan <0404>app.s="j<"0404> fa.e. Make sure your 7a.e s18ucture looks likesthis.me"> projhin_roo" | |---dist | | | |---app.s="j | |---p456ze:.json |---serverass <"0404>me"rnd

    The 7a.e s18ucture ceig6lso bt "48"ed nu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>.s="> Basic 3 gr Fa.e

    Let’s ase;t to our <0404>dist/app.s="j<"0404> fa.e. No;t that we havtsanss="with an ID of <0404>://lite-c<"0404> iysthe6body, ://lite445 onry the69044 ‘pers"’.me"> <!DOCTYPE s="j> <s="j lass="en"> <solo> <met49sharset="UTF-8"> <met49sx-3=""48"port" v>

    me"rnd Basic Ex56103 Server

    Run <0404>npm itstalr ex56103<"0404>. You’lrygehsa <0404>p456ze:-lock.json<"0404> if uswid npm 5. In <0404>serverass="0404>, we’lryase;t some 0404 to gehsa basic Ex56103 server up a636runnwid. If you’ve sht up an Ex56103 server belase, this .houldn’ be6new. If you havtn’ used Ex56103, it’s not c1-decal to x-390445 pers". Jent know that this c103;ts 6 server d port 8080766363 rves up <0404>dist/app.s="j<"0404>.me"> ://" ex56103 = requsx-('ex56103'); ://" th="1= requsx-('th="'); ://" app1= ex56103(); ://" tort = pclcess.env.PORT || 8080; app.sht('tort', tort); app.use(ex56103.stadec(th=".enu-(__ i-sx-3, './dist'))); app.ght('*', (req, res) => { ://"oas.-;c('Serv445 ', req.url); res.shndFa.e(__ i-sx-3 + '/dist/app.s="j'); }); app.9id-en(tort, () => ://"oas.-;c('Lid-en445 on tort', tort)); <"0404>me"rnd

    Run <0404>npm laer{<"0404>(eig6liapclass<0404>n404 serverass="0404>). You .houldysee somethwid 9ikesthis.me">

    Verify that th4 server is workwid by go445 to nu-item"> cla830localhost:8080/loagegehei_bth=th=rel="#5fd-ima noleve-cdnlocalhost:8080cla>. You .houldysee the69044 ‘pers"’ on the6pze:. Awesome, we havtsanbasic 3 gr 7a.e 66363 rver!" ">

    You .houldyhavtsnu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve> Wnip456

    s" clelopersb-lazy" 6103-ass="jsx-1830pclcess.7a.estackapiy__m/cache=1cliry:max4nrBFkSW2S5GXo92JcUrz"lass="6103:size:"gif;561064,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alheiunip456apidth/"" ">

    widton traintcewtysthe6pers"wecosysize is to bundle alryof the6J390445610 6636CSS 7a.es=we=wse;t tylo one6big fa.e. Wnip456 is the6tool

    • It’lryresolvtsour deevetchcu s by go445 tylo the modu.es=we=imtort and lexul>n404_modu.es="0404> o636putt445 them at th4 top of our swidle fa.e. It’lryrecursivsry go throughsevery deevetchcy a636the6deevetchcu s’ deevetchcu s,yresolvwid alrythe69ay down.6363
    • It’lry18 9 pa.e our 7armFronsc, cutt445-edge ES6+ down lo ES5 so that it’lrywork on virtualry every brow3 r.6363
    • It’lry%;hefy our 0404 by removwid whe;tnd-im 66363hww-en445 variabre

      Iysthe6vet, we’lrybt abre Gettwid Saer{ed

      Let’s c103;tsanfolded sx-3d <0404>src<"0404> iysour roo"w i-7.1ory. This wilry://lite alryof our swte’s J390445610 6636CSS. Wn’lrysaer{ with the6J390445610. Pu anfa.e calr31 ">ass="0404> tylo <0404>src<"0404>. In <0404>src/31 ">ass="0404>, pu answidle "jssyof 0404:me"> ://"oas.-;c('T st445 our bundle'); <"0404>me"rnd

      With wnip456, <0404>src/31 ">ass="0404> wilrybe our saer{445 pstyl, id="job /styl. Wnip456 wilryster{ with that 7a.e 6636gve-c3;tsour bundle. Let’s itstalr wnip456:me"> npm itstalr -D wnip456 <"0404>me"rnd

      Wnip456 requsx-s a lexfigurant d fa.e calrunip456alexfigass="0404>. Let’s c103;tsthis fa.e iysour roo"w i-7.1ory. Exclu wid <0404>n404_modu.es="0404>, our 7a.e s18ucture now looks likesthis.me"> projhin_roo" | |---dist | | | |---app.s="j | |---src | | | |---31 ">ass | |---p456ze:.json |---p456ze:-lock.json |---serverass |---unip456alexfigass <"0404>me"rnd

      <0404>unip456alexfigass="0404>6needs to 1clort a lexfigurant d objhin that tells it where=to ster{ bundlwid and where=to pu the6bundle. Add this iylo the fa.e.me"> ://" th="1= requsx-('th="'); modu.e.1clort3 = { ="job: th=".resolvt(__ i-sx-3, './src/31 ">ass'), ou pu : { th=": th=".resolvt(__ i-sx-3, './dist'), fa.esx-3: 'app.bundle.ss' } }; <"0404>me"rnd

      What our 04xfigurant d objhin is telr445 unip456 lo do is to ster{ at th4 ="job /styl, <0404>src/31 ">ass="0404>. It’lrygo iylo that 7a.e,yresolvtsalr deevetchcu s,yand bundle them iylo the ou pu th="1pclvwied, the folded <0404>dist<"0404>. It’lrysx-3 the6new bundled 7a.e <0404>app.bundle.ss<"0404>.me">

      Go acolo a636runme"> wnip456 <"0404>me"rnd

      on the6 app.bundle.ss<"0404> izeecally appear iysyour <0404>dist<"0404> folded. Go acolo a636runme"> n404 dist/app.bundle.ss <"0404>me"rnd

      You .houldysee ‘" 404>T st445 our bundle<"0404>’ -;c on your " cl ://"oas. Cexgranu.ant ds, you’ve c103;td your 7arst unip456 bundle!" ">

      If uswid git, you’lrywa83dist/app.bundle.ss<"0404> to your <0404>.gitignore<"0404>. We onry wa83 dist/app.s="j<"0404>.me"> <!DOCTYPE s="j> <s="j lass="en"> <solo> <met49sharset="UTF-8"> <met49sx-3=""48"port" v>

      me"rnd

      If you leve up <0404>dist/app.s="j<"0404> iysthe6brow3 r, you’lrynow see the6‘" 404>T st445 our bundle<"0404>’ stad49483 -;c lo the brow3 r’s c//"oas.me"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve> Flads

      Ru__twnow,gnothwid is btwid %;hefied. Oeve up <0404>dist/app.bundle.ss<"0404> 66363 e what’s itswie0if you like. Togmake unip456 %;hefy your 0404,6use the6produint d flad, <0404>-p<"0404>. Type ty <0404>unip456 -p<"0404> 6636look at th4 bundle fa.e. You’lrysee one6loid 9issyof unrea abre<

      Let’s go b456 lo our non-%;hefied<unip456<"0404> to gve-c3;tsthe6non-%;hefied

      The6stacky18 5e lassthe6" 404>://"oas.-;c<"0404> stad49483 tells us lo go to app.bundle.ss, 9issy73. That’s not very useful. We wa83 source" em> and not the6final bundle. A source mapsadds a lexswierabre-d="0404>, wilrytelryunip456 lo gve-c3;tsa source mapslassour 0404. Go acolo a636runme"> yunip456 -d <"0404>me"rnd

      Now,gwe gehsa betted -;c. We ceig6ctualry see that itgli es6f90m 9issy1 ty <0404>31 ">ass="0404>.me">

      Whlass mid-lewid, it’s not fun lo havtsto type <0404>unip456<"0404> /ver a636/ver agite. Uswid thew<0404>--watch<"0404> flad durwid mid-le9483Durwid mid-le9483, we’lryaa83me"> yunip456 -d --watch <"0404>me"rnd

      Every time you changa <0404>unip456alexfigass="0404>, you’lryneed Babel

      s" clelopersb-lazy" 6103-ass="jsx-1830pclcess.7a.estackapiy__m/cache=1cliry:max4eOz4fJUISia6gLcLA0nP"lass="6103:size:"gif;561064,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alheibabel.pidth/"" ">

      Idth="ionforearli rwlhat we wa83unip456<"0404>.me">

      Go acolo a636itstalr these t610e6deevetchcu s.me"> npm itstalr -D babel-core babel-loader babel-5610e4561v <"0404>me"rnd

      • nu-item"> class="fillnpmjsy__m/p456ze:/babel-core" agegehei_bth=th=rel="#5fd-ima noleve-cdnBabel-corecla> is e6library that takes ty nu-item"> class="githuby__m/babel/babel-loader" agegehei_bth=th=rel="#5fd-ima noleve-cdnBabel-loadercla> is what a-imas us lo tie babel-core tylo wnip456 and -etsyunip456’s c//figurant d know to6use the6babel-core library.6363
      • nu-item"> class="babeljsyio/docs/plugwis/5610e4561v/#how-it-works" agegehei_bth=th=rel="#5fd-ima noleve-cdnBabel-5610e4561vcla> is essh="ially a lexfigurant d for babelwwhlch -etsyus pope iysopnt ds. Withou the6opnt ds, it6uses defaul"s, whlch mea8syit wilryundedstand

        There=are0a numbcr of69ays to lexfigure unip456 with babelw6636we’lrycent pi56 an easy one. You’lryneedunip456alexfigass="0404>.me"> ://" th="1= requsx-('th="'); <"0404>me"rnd ://" th="1= requsx-('th="'); modu.e.1clort3 = { ="job: th=".resolvt(__ i-sx-3, './src/31 ">ass'), ou pu : { th=": th=".resolvt(__ i-sx-3, './dist'), fa.esx-3: 'app.bundle.ss', }, modu.e: { 6.48s: [ { 0 st: /\.ss$/, exclu e: [/n404_modu.es/], use: { loader: 'babel-loader', opnt ds: { t610e4s: ['61v'] } } } ] } }; <"0404>me"rnd

        This 0 st<"0404> pcllassy. <0404>/\.ss$/<"0404> is looking lass7a.es g" wid with <0404>.ss="0404>, so it’lryfg" wilryof our J390445610 7a.es. Wn’re=telr445 it to 1cclu e our <0404>n404_modu.es="0404> folded, because we0ton’ wa83

        whangas are0nu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>.s="> s" clash3>

        Let’s lexfigure pers". Run the6fd-imaxpg two 04vg663s. Wn’lryneed npm itstalr 103 c 103 cmdom npm itstalr -D babel-5610e45103 c <"0404>me"rnd

        Wn’lryhavtsto add a=term to our <0404>unip456alexfigass="0404>6fa.e to telryitwlhat we’re=wse;445 pers" 0404." "> ://" th="1= requsx-('th="'); modu.e.1clort3 = { ="job: th=".resolvt(__ i-sx-3, './src/31 ">ass'), ou pu : { th=": th=".resolvt(__ i-sx-3, './dist'), fa.esx-3: 'app.bundle.ss', }, modu.e: { 6.48s: [ { 0 st: /\.ss$/, exclu e: [/n404_modu.es/], use: { loader: 'babel-loader', opnt ds: { t610e4s: ['103 c', '61v'] } } } ] } }; <"0404>me"rnd

        Wn’re=telr445 Babel=to6use 6 speceve pers" t610e4. It’lry18 9 1 1 our pers" 0404 tylo standard J390445610. "em>Bun isn’ pers" cent J390445610??" em> No exa.1ly. Wn’lrygehslo that." ">

        You shouldybt nu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>.s="> Our Farst pers" Componenc

        In <0404>src/31 ">ass="0404>, de-etesthe6" 404>://"oas.-;c<"0404> stad49483 6636wse;t the6fd-imaxpg 0404." "> imtort pers" f90m '103 c'; imtort pers"DOM f90m '103 cmdom'; ://" ://lite-c = docu9483.ghtEl49483ById('://lite-c'); ://" myDiv = <ss=>My Farst pers" Componenc!</ss=>; pers"DOM.rvetcr(myDiv, ://lite-c); <"0404>me"rnd

        Saer{ your server 6636weip456 (use <0404>unip456 -d --watch="0404>) to s e what’s happen445 ty your brow3 r. Let6weip456 ruy iysthe6b456gem__c so we ceig://linue to s e our 0hangas." ">

        There’s 6 bunch of stuff go445 on here, so x-n’s b103k it down.63">

        • We ceiguse " 404>imtort<"0404> stad49483s because weip456 wilryresolvtsthose lassus. It’lrygrab pers" 6636pers"DOM ou of our <0404>n404_modu.es="0404> o636throw them at th4 top of our bundle, with the6rest of our 0404 below it.6363
        • Wn’re=accesswid thew s="with ID <0404>://lite-c<"0404> lassrvetcr445 our componenc. This is the DOM el49483wlhat we’lryplace our pers" el49483s iy.6363
        • The6next 9iss, c103;wid thewvariabre<<0404>myDiv="0404>, is the ms" excitwid. We’re=wse;445 somethwid lhat looks likes3 gr iysour J390445610. "0404>myDiv="0404> is e6variabreThe6lrst 9issyuses the6pers"DOM library lo rvetcr our "0404>myDiv="0404> el49483won the6DOM.6363

        No;t that we imtort pers", but ton’ 6ctualry use i" 66ywhere. This is because durwid 18 9 pa.ant d, wnip456 and babelw18 9 1 1 our 0404. That t8 9 1 1 ed<

        Toysee what it6finalry turns iylo afted weip456 ruysyits izeec, we ceiggo to nu-item"> class="babeljsyio/repeloagegehei_bth=th=rel="#5fd-ima noleve-cdnbabeljsyiocla>. The6 'use strw c'; var _103 c = requsx-('103 c'); var _103 c2 = _iyleropRequsx-Defaul"(_103 c); var _103 cD0m = requsx-('103 cmdom'); var _103 cD0m2 = _iyleropRequsx-Defaul"(_103 cD0m); funcnt d _iyleropRequsx-Defaul"(obj) { return obj && obj.__esModu.e ? obj : { defaul": obj }; } var ://lite-c = docu9483.ghtEl49483ById('://lite-c'); var myDiv = _103 c2.defaul".c103;tEl49483( ' s=', null, 'My Farst pers" Componenc!' ); _103 cD0m2.defaul".rvetcr(myDiv, ://lite-c); <"0404>me"rnd

        We6needSaer{ th4 sever, ruy wnip456, 6636go to nu-item"> cla830localhost:8080/loagegehei_bth=th=rel="#5fd-ima noleve-cdnlocalhost:8080cla>. You .houldysee what you 1clas". If we leve your brow3 r’s dev tools and tesphin the=tex3, we s e our s="nested itswie0the6" 404>#://lite-c<"0404> s="t610ent iysour osplinals3 gr.me"> JSX

        s" clelopersb-lazy" 6103-ass="jsx-1830pclcess.7a.estackapiy__m/cache=1cliry:max4cVPtJPlpTQ6lVz7KDOYR"lass="6103:size:"gif;561064,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alheijsx.pidth/"" ">

        Idsaid we’re=wse;445 stuff that "em>looks like" em> 3 gr. It’s not 6ctualry 3 gr. It’s somethwid calr class="facebook.githuby/a>103 c/docs/. JSX is somethwid c103;td by Facebook that pclvwies an easy, ms" ry st8 u__t1 1ward sy83ax lo helpyus wse;t pers"wli ponencs. Fassthe6ms" part, it’s very simiss= lo 3 gr, with a few key differencas." ">

        Saer{ off wse;445 a JSX li ponenc byyuse;445 somethwid likesyou wouldyiys3 gr. Itstolo of uswid the69044 <0404>:lope<"0404> to denote0the6:lope we wa83:lopeName<"0404>. If we wa83 ://" ou = 'ou -c'; ://" inn = 'ine-c'; ://" div = 'Div'; <ss="jsx-3Name={ou + div}> <ss="jsx-3Name={inn + div}> <h1>JSX</s1> <enu">C103;wid a JSX Div</snu"> </ss=> </ss=> <"0404>me"rnd

        This turns iylo:me"> 'use strw c'; var ou = 'ou -c'; var iyn = 'ine-c'; var div = 'Div'; pers".c103;tEl49483( ' s=', {"jsx-3Name: ou + div }, pers".c103;tEl49483( ' s=', {"jsx-3Name: inn + div }, pers".c103;tEl49483( 'h1', null, 'JSX' ), pers".c103;tEl49483( 'snu"', null, 'C103;wid a JSX Div' ) ) ); <"0404>me"rnd

        On the6DOM, this looks like:me"> <ss="jsx-3="ou -cDiv"> <ss="jsx-3="ine-cDiv"> <h1>JSX</s1> <enu">C103;wid a JSX Div</snu"> </ss=> </ss=> <"0404>me"rnd

        s" clelopersb-lazy" 6103-ass="jsx-1830pclcess.7a.estackapiy__m/cache=1cliry:max4aLiXO6n5Q6SDou8JZed1"lass="6103:size:"gif;561064,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alheijsx-2.pidth/"" "> s"fac31 eng the6Componenc

        Farst, x-n’s go acolo a636de-etes‘pers"’ f90m itswie0our "0404>://lite-c<"0404> s="ty <0404>dist/app.s="j<"0404>. Afted that, you shouldyhavtsnu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>

        Let’s make i" so <0404>src/31 ">ass="0404> ://lites -;cucwthat onry de6ls with rvetcr445 our app1lo the pze:. We wa83:/ ponencs="0404> folded"ty <0404>src<"0404>. In there, x-n’s c103;tsanfa.e calrapp.ss<"0404> that wilry://lite the6l;cucwde6lwid with c103;wid our swte. Alry<0404>src/31 ">ass="0404> shouldydo is rvetcr our app1lo the DOM.me"> projhin_roo" | |---dist | | | |---app.s="j | |---src | | | | | |---:/ ponencs | | | | | |---app.js | | | |---31 ">ass | |---p456ze:.json |---p456ze:-lock.json |---serverass |---unip456alexfigass <"0404>me"rnd

        Let’s ster{ by shangwid <0404>src/31 ">ass="0404> e6little6bi". Farst, x-n’s grow our s="e6little6bi". Wn’lryadd ay <0404>h1="0404> o636an<0404>snu"<"0404> iyswie0our s="e636we’lryresx-3 "0404>myDiv="0404> lo <0404>appcl0404>.me"> imtort pers" f90m '103 c'; imtort pers"DOM f90m '103 cmdom'; ://" ://lite-c = docu9483.ghtEl49483ById('://lite-c'); ://" app1= ( <ss=> <h1>JSX</s1> <enu">My 7arst JSX enu"!</snu"> </ss=> ); pers"DOM.rvetcr(app, ://lite-c); <"0404>me"rnd

        We’re=now go445 to move0the6" 404>appcl0404>6variabresrc/:/ ponencs/app.ss<"0404>.y<0404>src/31 ">ass="0404> shouldynow look 9ikesthis:me"> imtort pers" f90m '103 c'; imtort pers"DOM f90m '103 cmdom'; imtort App1f90m './:/ ponencs/app'; ://" ://lite-c = docu9483.ghtEl49483ById('://lite-c'); pers"DOM.rvetcr(App, ://lite-c); <"0404>me"rnd

        <0404>src/:/ ponencs/app.ss<"0404> shouldynow havt:me"> imtort pers" f90m '103 c'; 1clort defaul" ( <ss=> <h1>JSX</s1> <enu">My 7arst JSX enu"!</snu"> </ss=> ); <"0404>me"rnd

        Agite, we needimtort<"0404> stad49483, you’lrygehsan erroe say445 pers" isn’ in sclev.s=">

        If you temonsc your p4ge, you shouldysee that nothwid’s changad.s="> Eclort445 a Componenc

        We’re=go445 to turn " 404>appcl0404>6iylo a funcnt d that "em>returns" em> the6JSX we wa83. Wn’lry1cllite why in ansec//d. Changa <0404>src/:/ ponencs/app.ss<"0404> tylo this.me"> imtort pers" f90m '103 c'; 1clort defaul" funcnt d app() { return ( <ss=> <h1>JSX</s1> <enu">My 7arst JSX enu"!</snu"> </ss=> ); } <"0404>me"rnd

        Changa <0404>src/31 ">ass="0404> tylo this.me"> imtort pers" f90m '103 c'; imtort pers"DOM f90m '103 cmdom'; imtort App1f90m './:/ ponencs/app'; ://" ://lite-c = docu9483.ghtEl49483ById('://lite-c'); pers"DOM.rvetcr(<App></App>, ://lite-c); <"0404>me"rnd

        Wh"n we imtort a funcnt d that returns JSX, we ceiguse tha" funcnt d as 6 new el49483, cent 9ikeswsyuse what we’re alrea y, <0404>snu"<"0404>, <0404>h1="0404>-<0404>h6<"0404>, etc,"with an open445 and lloswid tag. Uswid those open445 and lloswid tags iyvokes the6c/r-7spon wid funcnt d and tesass= the6returnforel49483wte theiryplace.menuntng>me">

        An empty ta5 ceigbe s lf-lloswid. In other69044s,me"> <ss=></ss=> === <ss= /> <App></App> === <App1/> <"0404>me"rnd

        We’lrybt uswid this .horthand. You .houldybt nu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>.s=">

        That’s the6basics of the6basics. You’re on your 9ay lo x-390445 pers"." "> CSS

        We wa83 npm itstalr -D lateY-loader css-loader <"0404>me"rnd

        CSS-loader wilryresolvtsthe " 404>imtort<"0404> stad49483s wsyuse and lexul> unip456alexfigass="0404>6to telryitwlo=imtort and 18 9 1 1 our CSS 7a.es=uswid these loaders.me"> ://" th="1= requsx-('th="'); modu.e.1clort3 = { ="job: th=".resolvt(__ i-sx-3, './src/31 ">ass'), ou pu : { th=": th=".resolvt(__ i-sx-3, './dist'), fa.esx-3: 'app.bundle.ss', }, modu.e: { 6.48s: [ { 0 st: /\.ss$/, exclu e: [/n404_modu.es/], use: { loader: 'babel-loader', opnt ds: { t610e4s: ['103 c', '61v'] } } }, { 0 st: /\.css$/, use: [ 'lateY-loader', 'css-loader' ] } ] } }; <"0404>me"rnd

        It’s frirly cidton traintcewto l103;tsansepac3;tsCSS 7a.eylassew-e li ponenc,"with onry the6CSS neededsrc<"0404>, add a=<0404>sateYs<"0404> folded. We’lryl103;ts<0404>src/sateYs/31 ">acss="0404> o636add our mite CSS tosthat 7a.e. Let’s also l103;ts<0404>src/sateYs/app.cpe<"0404> to store CSS specefucwtoslhat :/ ponenc.me"> projhin_roo" | |---dist | | | |---app.s="j | |---src | | | |---31 ">ass | | | |---:/ ponencs | | | | | |---app.js | | | |---sateYs | | | |---app.cpe | |---31 ">acss | |---p456ze:.json |---p456ze:-lock.json |---serverass |---unip456alexfigass <"0404>me"rnd

        In <0404>src/sateYs/31 ">acss="0404>, we’lryadd what we wa83 s="j,6body { fost-familb: s 9 -serif; b456gem__c-:/lor: #dddddd; } <"0404>me"rnd

        In <0404>src/sateYs/app.cpe<"0404>, we’lryadd CSS specefucwtoslhe :/ ponenc.me"> h1 { :/lor: #31416D; } <"0404>me"rnd

        With our unip456 shtup, we ceigimtort stteYsheetsy i-7.1ry. Add this i-7.1ry below the " 404>imtort<"0404> stad49483s in <0404>src/31 ">ass="0404>.me"> ... imtort App1f90m './:/ ponencs/app'; imtort './sateYs/31 ">acss'; ... <"0404>me"rnd

        A6363imiss=ry, unded the imtort stad49483 in <0404>src/:/ ponencs/app.ss<"0404>:me"> imtort pers" f90m '103 c';imtort '../sateYs/app.cpe'; ... <"0404>me"rnd

        With wnip4566runnwid,0if we remonsc our uni6pze: we shouldysee the6sateYd 0hangas." ">

        s" clelopersb-lazy" 6103-ass="jsx-1830pclcess.7a.estackapiy__m/cache=1cliry:max4kSG0UYClQp6N7xzjp1gr"lass="6103:size:"gif;561064,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alheisateYd.pidth/"" ">

        The6final changas are0nu-item"> class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>. The6 class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eveloagegehei_bth=th=rel="#5fd-ima noleve-cdntrnav-aggarwal>103 cmshtup-tu31 eveid="" "> Phew. That’s it.63h4>

        Now you ceigfocus ony6ctualry x-390445 pers". You .houldynow undedstand enough of69nip456 lo bt abre class="githuby__m/trnav-aggarwal>103 cmboa.erp9 0 mshtuploagegehei_bth=th=rel="#5fd-ima noleve-cdnmy more thwwough pers" boa.erp9 0 reposw1orycla>. But this wilrygehsyou saer{ed.s="> If this was useful, p.e610 feel mone

        class="mediumy__m/@trnav_aggarwalloagegehei_bth=th=rel="#5fd-ima noleve-cdnArnav Aggarwal - Mediumid="" ">

        class="mediumy__m/@trnav_aggarwal/mrsted-j390445610s-objhin-sprea -llasa31 -3803430e99aaloagegehei_bth=th=rel="#5fd-ima noleve-cdnMrsted J390445610’s New,gCutt445-Edge Objhin Sprea Oevsa31 id="" ">

        class="0404bursty/a>them3imp.e-6.48s-to-this-in-j390445610-35d97f31bde3loagegehei_bth=th=rel="#5fd-ima noleve-cdnThe6Simp.e Ru.es=lo ‘this’ in6J390445610id="" "> That’s it. Go x-390 pers"." h3> 103 cjs"4s" clasa4049sx-5047btn--ou 10 m.w6103 c>software- mid-le9483">Software6 mid-le9483asa4049sx-5047btn--ou 10 m.w6103 c>9ni- mid-le9483">Wni6 mid-le9483asa4049sx-5047btn--ou 10 m.w6103 c>9nip456"4Wnip456j390445610">J390S45610id="" ss=>0ss="jsx-3="er{marg__foo"er__sepac3;oc"40 ss=>0ss="jsx-3="engze:r-bar__wrapper">0ss="jsx-3="engze:r__htyl engze:r__htyl--show">0ss="jsx-3="jsx-617897676 390age-" c"40 ss=>

        Enjoy this /sst? GivtsArnav Aggarwalmenuntng>"e6like if it's helpful." ">0 ss=>0ss="jsx-3="er{marg__saer btn-colrt"ivi sx-5047fanfa-colrt-oh=aria-switch0-18ue"iv/i 0ss="jsx-3="btn-colrt__numbcr">20<49sx-5047btn-frx-3-onry engze:r__s" class="jsx-1830li0 mcdn.0404gencory/a>stadec/size:s/Csvgunity/i://-csvgenc.pidt/>3v/snu"40d=""ss="jsx-3="btn-frx-3-onry engze:r__share-btn"ivi sx-5047fanfa-share-square-oh=aria-switch0-18ue"iv/i 0snu"4Sharev/snu"40dss=>0ss="jsx-3="jsx-617897676 390age-" c"40 ss=>/trnavaggrwldnArnav Aggarwalid="" ss=>Fd-ima0 ss=>0ss="jsx-3="jsx-1410704710 wrapper">0ss="jsx-3="jsx-617897676 390age-" c"40 ss=>Disc/ver a636rea more /ssts6f90msmess=>gehssaer{ed0ss="jsx-3="engze:r-bar__wrapper">0ss="jsx-3="engze:r__htyl">0ss="jsx-3="jsx-617897676 390age-" c"40 ss=>Enjoy this /sst?0 ss=>

        Leavtsanlike and lem9483Arnavmenuntng>me">0ss="jsx-3="er{marg__saer btn-colrt"ivi sx-5047fanfa-colrt-oh=aria-switch0-18ue"iv/i 0ss="jsx-3="btn-colrt__numbcr">20<49sx-5047btn-frx-3-onry engze:r__s" class="jsx-1830li0 mcdn.0404gencory/a>stadec/size:s/Csvgunity/i://-csvgenc.pidt/>3v/snu"40d=""/ss=>s/ss=>s/ss=> var eddthis_:/xfig = eddthis_:/xfig || {}; eddthis_:/xfig.pubid = 'ra-53b5cfa02e32c86d'v/s45610> /* */v/s45610> !funcnt d(e,t,n,s,u,a){e.twq||(s=e.twq=funcnt d(){s.exe?s.exe.appry(s,argu9483s):s.queue.push(argu9483s); },s.version='1.1',s.queue=[],u=".c103;tEl49483(n),u.async=!0,u.ass='/>stadec.eds-twe;t"ry__m/uwt.ss', a=3.ghtEl49483sByTagName(n)[0],a.pac483" cl.tesassBe1 1e(u,a))}(window,docu9483,'s45610'); twq('it-d','nx84k');v/s45610> __NEXT_DATA__ = {"pclls":{"isServer":18ue,"store":{},"it-deveStad4":{"curc483User":{},"er{marg":{"er{margMap":{"9pfb8fpsa":{"urlStrwid":t103 c-ecosysizemshtup-step-by-step-walkthrough","publishedAt":1499277112,"sumizry":"Undedstand what pers", Wnip456, 6636Babel=are6 o445 and how to6lexfigure them yourself.","re9 0 dAr{margs":[{"tion"":"Uswid " clJS tosasciefy size:s","urlStrwid":tuswid-n404js-to-asciefy-size:s","randomKey":"du107n8hv","c/verPhotoUrl":" class="fill7a.epi56ery/a>api/7a.e/4wBIpjZ7Q9GngviELbSh","authww":{"sx-3":"Johnny B. (Ionică Bizău)","usersx-3":"johnnyb","lmid-":"gencor","smalrA90ageUrl":" class="cdn.7a.estack://lency__m/7dDcMU9XTZ6bAu6eyjrJ"}},{"tion"":"Lazy E"alu3;t d and J390445610","urlStrwid":tlazy-e"alu3;t d-and-j390445610","randomKey":"a5m7g8gs3","c/verPhotoUrl":"","authww":{"sx-3":"Agust44 Chiappe Berrit-","usersx-3":"agust44chiappeberrit-","lmid-":"gencor","smalrA90ageUrl":" class="fillgr390agey__m/t90age/81f8e116302db3b8643873eda3109f2e?d=mm\u0026s=200"}},{"tion"":"The6SkilryEndgx-3","urlStrwid":tthem3kilr-endgx-3","randomKey":"egt5w785i","c/verPhotoUrl":" class="cdn.7a.estack://lency__m/pk2tHKvS7C8xrunr7Obx","authww":{"sx-3":"David J3rvts","usersx-3":"david-j3rvts","lmid-":"gencor","smalrA90ageUrl":" class="t90ages2.githubuser://lency__m/u/1824859?v=4"}}],"noMoreCsvgencs":18ue,"authww":{"id":242336,"sx-3":"Arnav Aggarwal","usersx-3":"arnavaggrwld,"a90ageUrl":" class="lh6lgoogrguser://lency__m/-eJiGtMLzd0E/AAAAAAAAAAI/AAAAAAAAAsA/6aOTQeGwp_I/photo.jpg","lmid-":"user","smalrA90ageUrl":" class="lh6lgoogrguser://lency__m/-eJiGtMLzd0E/AAAAAAAAAAI/AAAAAAAAAsA/6aOTQeGwp_I/photo.jpg"},"pre"48"M404":false,"isLoad445Csvgenc":false,"updat":false,"isLoad445":false,"c/verPhotoUrl":" class="cdn.7a.estack://lency__m/cv1AYBjxToCbzBSMy1OO","sourceUrl":null,"tion"":"pers" Ecosysize Setup — Step-By-Step Walkthrough","c//lenc":"\n## Undedstand what pers", Wnip456, 6636Babel=are6 o445 and how to6lexfigure them yourself\n\n_This er{marg was osplinalry published ony[Medium]( class="0404bursty/a>103 c-ecosysizemshtup-step-by-step-walkthrough-721ff45a7fc1)_.\n\npers" is arguabry the6hot0 st7frx-3work curc483ry used by the69ni6 mid-le9483 103 cmshtup-tu31 eve]( class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve)\n\nThis er{marg requsx-srel49483ary pclficiency"with 3 gr, J390445610 (44clu wid very basic ES6 sy83ax), CSS, " cl, 6636pceferabry Ext610s. **If you ceigmake to-do6app, you’re rea yass` tylo `src`. In `src/31 ">ass`, tutsanswidlts10 m of6csde:\n\n```\n://"oas.-;c('T st445 our bundle');\n```\n\nWith wnip456, `src/31 ">ass` wilrybe our ster{xpg pstyl, ass="job /styl. Weip456 wilryster{ with that 7a.e 6636gee-c3;t our bundle. Let’s itstalr wnip456:\n\n```\nnpm itstalr -D wnip456\n```\n\nWnip4566requsx-sra lexfigurant d fa.e calrass\n|\n|---p456ze:.json\n|---p456ze:-lock.json\n|---serverass\n|---unip456alexfigass\n```\n\n`unip456alexfigass`wneeds to 1ctort a lexfigurant d objhin that tellsyit whereslo star{ bundling and whereslo pu the6bundle. Add this tylo the67a.e.\n\n```\n://" th="1= requsx-('th="');\n\nmodu.e.1clort3 = {\n\t="job: th=".resolvt(__ i-sx-3, './src/31 ">ass'),\n ou pu : {\n \tth=": th=".resolvt(__ i-sx-3, './dist'),\n \tfa.esx-3: 'app.bundle.ss'\n }\n};\n```\n\nWhat our 04xfigurant d objhin ts telr445 unip456 lo do is lo star{ at th4 ="job /styl, `src/31 ">ass`. It’lrygo tylo that 7a.e,yresolvtsalr deevetchcu s,yand bundle them tylo the6ou pu th="1pclvwied, the6folded"`dist`. It’lrysx-3 the6new bundled 7a.e `app.bundle.ss`.\n\nGo acolo a636run\n\n```\nwnip456\n```\n\non the604vg663s10 m 66363 e what happens.\n\nDo m? Good. You .houldysee `app.bundle.ss` izeecalry appear iy your `dist` folded. Go acolo a636run\n\n```\nn404 dist/app.bundle.ss\n```\n\nYou .houldysee ‘`T st445 our bundle`’ -;c on your " cl ://"oas. C/xgranu.ant ds, you’ve c103;td your 7arst unip456 bundle!\n\nIf uswid gi3, you’lrywa83ass`.\n\n![sourcemap.png]( class="0dn.7a.estack://lency__m/PauhoqnIRHKXIacmWVkD)\n\nWhilew mid-lewid,0it’s not fun lo havtsto type `unip456` /ver a636/ver agite. Uswid thew`--watch` flad durwid mid-le9483 mea8s weip456 wilrywatch our 7a.es=a636re-gve-c3;t the6bundle every time we savtsanshanga. **Durwid mid-le9483, we’lryaa83ass'),\n ou pu : {\n th=": th=".resolvt(__ i-sx-3, './dist'),\n fa.esx-3: 'app.bundle.ss',\n },\n modu.e: {\n 6.48s: [\n {\n 0 st: /\\.ss$/,\n exclu e: [/n404_modu.es/],\n use: {\n loader: 'babel-loader',\n opnt ds: {\n t610e4s: ['61v']\n }\n }\n }\n ]\n }\n};\n```\n\nThis 04dewis telr445 unip456 lo 0 st7the 7a.es iysour i-7.1ory 6636look fassthe6fi.esx-3s matchxpg the6regex iysthe6`0 st` pclperty. `/\\.ss$/` is look44g fass7a.es en wid with\u0026nbsp;`ass`, so it’lryf0 d 6lryof our J390445610 7a.es. We’re=telr445 itwlo=exclu e our `n404_modu.es` folded, because we0ton’ wa83ass'),\n ou pu : {\n th=": th=".resolvt(__ i-sx-3, './dist'),\n fa.esx-3: 'app.bundle.ss',\n },\n modu.e: {\n 6.48s: [\n {\n 0 st: /\\.ss$/,\n exclu e: [/n404_modu.es/],\n use: {\n loader: 'babel-loader',\n opnt ds: {\n t610e4s: ['103 c', '61v']\n }\n }\n }\n ]\n }\n};\n```\n\nWe’re=telr445 Babel=to6use a speceal pers" t610e4. It’lry18 9 1 1 our pers" ass`, de-etesthe6`://"oas.-;c` stad49483 6636wse;t the6fd-imaxpg ass` shouldynow look likesthis:\n\n```\nimtort pers" f90m '103 c';\nimtort pers"DOM f90m '103 cmdom';\n\nimtort App1f90m './:/ ponencs/app';\n://" ://lite-c = docu9483.ghtEl49483ById('://lite-c');\n\npers"DOM.rvetcr(App, ://lite-c);\n```\n\n`src/:/ ponencs/app.ss` shouldynow havt:\n\n```\nimtort pers" f90m '103 c';\n\n1ctort defaul" (\n \u003css=\u003e\n \u003ch1\u003eJSX\u003c/s1\u003e\n \u003csnu"\u003eMy 7arst JSX snu"!\u003c/snu"\u003e\n \u003c/ss=\u003e\n);\n```\n\nAgite, weyneedass` tylo this.\n\n```\nimtort pers" f90m '103 c';\nimtort pers"DOM f90m '103 cmdom';\n\nimtort App1f90m './:/ ponencs/app';\n://" ://lite-c = docu9483.ghtEl49483ById('://lite-c');\n\npers"DOM.rvetcr(\u003cApp\u003e\u003c/App\u003e, ://lite-c);\n```\n\nWh"n we imtort a funcnt d that returns JSX, we ceiguse tha" funcnt d as 6 new el49483, cent likeswmyuse what we’re alrea yass'),\n ou pu : {\n th=": th=".resolvt(__ i-sx-3, './dist'),\n fa.esx-3: 'app.bundle.ss',\n },\n modu.e: {\n 6.48s: [\n {\n 0 st: /\\.ss$/,\n exclu e: [/n404_modu.es/],\n use: {\n loader: 'babel-loader',\n opnt ds: {\n t610e4s: ['103 c', '61v']\n }\n }\n },\n {\n 0 st: /\\.css$/,\n use: [\n 'sateY-loader',\n 'css-loader'\n ]\n }\n ]\n }\n};\n```\n\nIt’s frirly cidton traintcewto6l103;tsansepac3;tsCSS 7a.e lassew-e :/ ponenc,"with onry the6CSS neededacss` o636add our mite CSS tosthat 7a.e. Let’s also l103;ts`src/sateYs/app.c-3` lo store CSS specefuc loslhat :/ ponenc.\n\n```\nprojhin_roo"\n|\n|---dist\n| |\n| |---app.s="j\n|\n|---src\n| |\n| |---31 ">ass\n| |\n| |---acss\n|\n|---p456ze:.json\n|---p456ze:-lock.json\n|---serverass\n|---unip456alexfigass\n```\n\nIn `src/sateYs/31 ">acss`, we’lryadd what we wa83ass`.\n\n```\n...\nimtort App1f90m './:/ ponencs/app';\nimtort './sateYs/31 ">acss';\n...\n```\n\nA6363imiss=ry, unded the imtort stad49483 in `src/:/ ponencs/app.ss`:\n\n```\nimtort pers" f90m '103 c';imtort '../sateYs/app.c-3';\n...\n```\n\nWith wnip4566runnwid, if we remonsc our uni6pze: we shouldysee the6sateYd changas.\n\n![sateYd.png]( class="0dn.7a.estack://lency__m/kSG0UYClQp6N7xzjp1gr)\n\nThe final changas are0[here]( class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve>103 cmshtup-tu31 eve]( class="githuby__m/trnav-aggarwal>103 cmshtup-tu31 eve)\n\n####6Phew. That’s it.\n\nNow you ceigfocus onyactualry x-390445 pers". You .houldynow undedstand enough of69nip456 lo bt abrethem3imp.e-6.48s-to-this-in-j390445610-35d97f31bde3)\n\n###6That’s it. Go x-390 pers".\n\n","c103;tdAt":1499274504,"c3;tgori s":[{"sx-3":"pers"","urlStrwid":t103 cjs"},{"sx-3":"Software6 mid-le9483","urlStrwid":tsoftware- mid-le9483"},{"sx-3":"Wni6 mid-le9483","urlStrwid":t9ni- mid-le9483"},{"sx-3":"Wnip456","urlStrwid":t9nip456"},{"sx-3":"J390S45610","urlStrwid":tj390445610"}],"randomKey":"9pfb8fpsa",tfd-imaxpgAuthww":false,"saerCount":20,"saerred":false}},"curc483Ar{margId":"9pfb8fpsa",tsuggestedAr{margs":[],"myCsvgenc":{"isSend445":false,"c//lenc":"","randomKey":""}},"notwfucant ds":{"csvgunityList":[],"csvgunityBadge":0,"noMoreCsvgunityList":false},tsub445610t d":{"isSend445":false,"c103;wonSuccess":false,"switchToWeeklySuccess":false,":/xfi1 td":false},tcsvgunityOnboard445":{tsuggestedAuthwws":[],"load445Authwws":18ue,"onboard445Csmp.eted":false,"openModal":false,":he56list":{}},tcsvgunity":{"c3;tgoryFd-imaStadus":{},"s-39chResultAr{margs":[],"pzein3;wonMap":{},"s-39chInfoMap":{},"isLoad445More":false,"topWse;trs":{"authwws":[]},"isS-39ch445":false,"noMoreFeedAr{margs":false,"isLoad445":false,"curc483C3;tgory":{},"suggestedC3;tgori s":[],"er{margsMap":{"trend445Ar{margs":[],"newAr{margs":[],"feanuredAr{margs":[],"mostSaersAr{margs":[],"feedAr{margs":[]}},tfd-imaedC3;tgori s":{"list":[],"isLoad445":false},tcsllecnt ds":{"curc483Csllecnt d":{"soMoreCsvgencs":18ue,"authww":{},"isLoad445Csvgenc":false,"liked":false,"secnt ds":[],"csvgencCount":0,"isLoad445":false,"c/ntrwbu31 Count":1,tcsvgencs":[],"likeCount":0,"c//lenc":"","fd-imaxpgAuthww":false},"list":[]},"er{margEdw1or":{"er{marg":{"randomKey":"","tion"":"","c//lenc":"","c/verPhotoUrl":"","c3;tgori s":[],"sumizry":"d,"aasmStad4":"draf3"},"c3;tgorySuggestt ds":[],"isSav445":false,"isLoad445":false,"isPublish445":false,"seenGonet445":18ue,"lastSavtdAt":null},"jobs":{tsuggestedJob":{}},tauth":{"isSend445":false,"isOeve":false,"erroeMessag"":"","shtt445s":{"authType":"SOCIAL_SIGNIN","authTgegec":"CM","t8 5k445EvtntPremix":"","re i-7.1ToWhenLoein":"d,"aftedC/xfi1 Url":""}}}},tth="sx-3":"/er{marg/showd,"query":{"usersx-3":"arnavaggrwld,"slud":t103 c-ecosysizemshtup-step-by-step-walkthrough-9pfb8fpsa"},tbuildId":"abf9f69c-8402-4af3-a501-c17b91e19259",tbuildStads":{"app.ss":{"hash":"7ac45fe04bfdf8009bd66dd7fb93ac83"}},"asshtPremix":" class="le;t-0dn.0404gencory/a","nextExtort":false,"err":null,"chunks":[]} modu.e={} __NEXT_LOADED_PAGES__ = [] __NEXT_LOADED_CHUNKS__ = [] __NEXT_REGISTER_PAGE = funcnt d (rou -, fn) { __NEXT_LOADED_PAGES__.push({ rou -: rou -, fn: fn }) } __NEXT_REGISTER_CHUNK = funcnt d (chunkNx-3, fn) { __NEXT_LOADED_CHUNKS__.push({ chunkNx-3: chunkNx-3, fn: fn }) } v/s45610>