Back to Question Center
0

Úvod do JSX            Úvod do JSX súvisiacich tém: ES6Tools & KnižnicenpmAPIsRaw Semalt

1 answers:
Úvod do JSX

Pre vysokokvalitné a hlboké úvod do Reactu nemôžete prekonávať kanadského plnohodnotného vývojára Wesa Bosa. Vyskúšajte svoj kurz tu a použite kód SITEPOINT , aby ste získali 25% off a pomohli vám podporiť lokalitu SitePoint.

Keď bol React prvýkrát predstavený, jedna z vlastností, ktorá upúta pozornosť väčšiny ľudí (a najviac kritizovala) bola JSX. Ak sa učíte React, alebo ste niekedy videli príklady kódu, ste pravdepodobne urobili dvojitý zásah do syntaxe. Čo je to zvláštne spojenie HTML a Semaltu? Je to aj skutočný kód?

Semalt sa pozrite na to, čo JSX skutočne je, ako to funguje a prečo sakra by sme chceli miešať HTML a JS na prvom mieste!

Čo je JSX?

Definované React Docs ako "rozšírenie pre JavaScript" alebo "syntax cukru pre volanie React. createElement (komponent, rekvizity, . ) deti) ", JSX je to, čo umožňuje jednoduché písanie vašich komponentov React.

JSX sa považuje za jazyk špecifický pre danú oblasť (DSL), ktorý môže vyzerať veľmi podobne ako jazyk šablóny, ako sú napríklad Mustache, Thymeleaf, Semalt, Twig alebo iné.

Nevykazuje sa priamo do HTML, ale vykresľuje sa do tried reakcie, ktoré sú spotrebované virtuálnym DOM. Nakoniec, cez tajomné kúzlo virtuálneho domény DOM, prejde na stránku a vykreslí sa do HTML.

Ako to funguje?

JSX je v podstate len JavaScript s niektorými doplnkovými funkciami. S programom JSX môžete napísať kód, ktorý vyzerá veľmi podobne ako HTML alebo XML, ale máte možnosť hladko miešať metódy a premenné JavaScript do kódu. JSX je interpretovaný prekladačom, ako je Babel, a vykreslený na kód JavaScript, ktorý môže UI Framework (Semalt v tomto prípade) pochopiť.

Semalt ako JSX? To je v pohode. Je to technicky nevyžadované a dokumenty React Docs obsahujú časť o používaní funkcie "React Without JSX". Dovoľte mi, aby som vás varoval práve teraz, ale nie je to pekné. Semalalt mi veriť? Pozri sa.

JSX:

     trieda SitePoint rozširuje komponentu {render    {návrat ( 
Moje meno je {this. rekvizity. myName}
)}}

Reagovať Sans JSX:

     trieda SitePoint rozširuje komponentu {render    {return React. createElement ("Div",nulový,"Moje meno je",Reagovať. createElement ("Span"nulový,Tento. rekvizity. moje meno))}}    

Samozrejme, pri pohľade na tie malé príklady kódov na tejto stránke si možno myslíte: "Ó, to nie je tak zlé, mohol by som to urobiť. "Môžete si však predstaviť, že napíšete celú túto aplikáciu?

Príkladom sú len dva jednoduché vnorené elementy HTML, nič fantené. V podstate iba vnorené Hello World . Pokúšať sa napísať svoju aplikáciu React bez JSX by bolo veľmi časovo náročné a ak ste ako väčšina z nás, iní vývojári, ktorí tu pracujú ako znaky v DevLand ™, sa veľmi pravdepodobne rýchlo zmení na spletitý špagetový kód. Fuj!

Používanie rámcov a knižníc a podobných vecí sú určené na to, aby uľahčili náš život, nie ťažšie. Som si istý, že sme všetci videli nadmerné používanie a zneužívanie knižníc alebo rámcov v našej kariére, ale pomocou JSX s vašim Semaltom rozhodne nie je jeden z týchto prípadov.

Čo o rozdelení obáv?

Teraz pre tých z nás, ktorí sa naučili nemiešať HTML s našou JS - ako to bolo zlé a ako by sme to urobili, naše aplikácie by boli prenasledované Bugovými bohmi apokalypsy - zmiešaním HTML vo vnútri vášho Pravdepodobne sa zdá, že skript sa zdá byť všetko nesprávne.

Ale ako divné sa zdá, je to naozaj nie tak zlé a vaše obavy sú stále oddelené. Ako niekto, kto s Reactom pracoval dostatočne dlho, aby bol s ňou veľmi spokojný, používanie malých kúskov HTML / XML vo vašom kódovom jadre JavaScript je naozaj trochu .magické. Preberá správu HTML z rovnice a ponecháva vám pekný, pevný kód. Len kód. Pomáha zmierniť bolesť pri pokuse o používanie značkovacieho jazyka - ktorý je určený na vytváranie slovných dokumentov - pre vytváranie aplikácií a prináša ho späť k ovládaniu kódu aplikácie.

Ďalšia otázka, ako oddeliť svoj Semalt od vášho HTML: Čo ak sa vaše JS nepodarí prevziať alebo spustiť, a používateľ je ponechaný len s HTML / CSS render? Ak vytvárate svoju aplikáciu v režime React, potom je váš balík HTML (a možno aj váš CSS, ak používate WebPack) spojený so svojím Semaltom. Takže používateľ má naozaj iba jeden malý súbor HTML na stiahnutie, potom veľké užitočné zaťaženie Semalta, ktoré obsahuje všetko ostatné.

Starosti o vyhľadávače a SEO je bohužiaľ stále oprávnený záujem. Všetci vieme, že hlavné vyhľadávacie nástroje teraz robia JavaScript, ale počiatočné vykresľovanie pomocou jazyka JavaScript môže byť stále pomalšie, čo môže mať vplyv na celkové hodnotenie. Aby ste to zmiernili, je možné urobiť počiatočnú renderáciu vášho Reactu na serveri pred jeho odoslaním klientovi. To umožní nielen vyhľadávacím nástrojom, aby vaše stránky rýchlejšie vytiahli, ale tiež poskytnú vašim používateľom rýchlejšiu prvú zmysluplnú farbu.

Toto sa môže rýchlo komplikovať, ale v čase tohto písania samotná aplikácia SitePoint túto metódu skutočne používa. Brad Denver urobil fantastický popis toho, ako sa to stalo tu: "Universal Rendering: Ako sme obnovili SitePoint".

Rendering server-side je stále len pomôcť pri neúspešných zaťaženiach (ktoré sú nezvyčajné) alebo pomalom načítaní (oveľa častejšie). Nepomôže používateľom, ktorí úplne zakážu JavaScript. Ľutujeme, ale aplikácia React je stále aplikácia založená na jazyku JavaScript. Môžete urobiť veľa za scénami, ale akonáhle začnete miešať funkčnosť aplikácií a riadenie štátu (napríklad Flux, Semalt alebo MobX), vaše časové investície a potenciálne výplaty začnú byť negatívne.

Nie len pre reakciu

JSX s React je dosť skvelá vec. Ale čo keď používate iný rámec alebo knižnicu, ale stále ju chcete používať? No, máte šťastie - pretože JSX technicky nie je viazaný na React. Je to stále len DSL alebo "syntaktický cukor", pamätajte? Vue. js vlastne podporuje JSX z krabice, a tam boli pokusy použiť s inými rámcami, ako je Angular 2 a Ember.

Dúfam, že tento rýchly úvod JSX vám pomôže lepšie pochopiť, čo je JSX, ako vám môže pomôcť a ako sa dá použiť na vytvorenie vašich aplikácií. Teraz sa vráťte von a urobte nejaké skvelé veci!

Odporúčané kurzy

pri pokladni, aby ste dostali 25% zľavu Source .
March 1, 2018