Obs! Vissa webbläsare (till exempel Chrome) kommer inte att ladda filen om den inte visas via HTTP, så se till att du använder en lokal server. Jag rekommenderar browsersync-projektet.

Offline Transformation

Du kan också använda kommandoradsgränssnittet (CLI) för att omvandla din JSX via hjälp av babelkommandon-verktyg. Detta är enkelt att förvärva via kommandot npm:

$ sudo npm installera - global babel 

De --global eller -g flagga för kort kommer att installera babelpaketet globalt så att det är tillgängligt överallt. Det här är en mycket bra övning med att använda nod för flera projekt och kommandoradsverktyg.

Nu när babel är installerad, låt oss göra översättningen av helloworld.js Vi skapade just i steget före. Vid kommandotolken från rotkatalogen där du startade upp startpaketet kör du:

$ babel src - watch - out-dir build 

Nu filen bygga / helloworld.js kommer automatiskt att genereras när du gör en förändring! Om du är intresserad, läs Babel CLI-dokumentationen för att få en mer avancerad kunskap.

Nu har babel genererat bygga / helloworld.js, som innehåller just straight-up JavaScript, uppdaterar HTML utan några babel-aktiverade skript taggar.

Så att återskapa, med babel kan vi ladda JSX direkt inuti a manus tagga via text / babel typ attributet. Detta är bra för utvecklingsändamål, men för att gå till produktion kan vi tillhandahålla en genererad JavaScript-fil som kan cachas på användarens lokala maskin.

Generering av denna kopia görs på kommandoraden, och eftersom det här är en repetitiv uppgift rekommenderar jag starkt att automatisera processen genom att använda --Kolla på flagga. Eller du kan gå ett steg längre och utnyttja Webpack och browsersync för att automatisera din utvecklings arbetsflöde. För att göra det på den enklaste vägen kan vi automatisera installationen av ett nytt projekt med en Yeoman-generator.

Installera med Yeoman Stillahavs

Yeoman är ett mycket användbart verktyg för att starta projekt snabbt och med ett optimalt arbetsflöde och verktygskonfiguration. Tanken är att låta dig spendera mer tid på utveckling än konfiguration av projektets arbetsområde och för att minimera repetitiva uppgifter (var medveten om detta. RSI är den främsta orsaken till att kodarna stoppar kodningen). Så som en bra metod, spara tid med verktyg och implementera D.R.Y (Repeat Yourself) i ditt dagliga liv kommer att öka din hälsa och effektivitet, och låta dig spendera mer tid på att göra faktisk kod snarare än konfiguration.

Det finns många byggnadsställningar där ute, som kommer i många smaker för olika skalaer av projekt. För det här första exemplet kommer vi att använda reagerar-fullstack byggnadsställningar från Yeoman-generatorer; Du kan se en demonstration av vad slutresultatet ser ut.

Obs! Det här är en fullstack-konfiguration, vilket förmodligen är överkill för alla små projekt. Anledningen till att jag väljer denna byggnadsställning är att ge dig en helt uppställd miljö så att du kan se hur startpaketet köks ut i en större app. Det finns en sidhuvud och sidfot, och du kan se var en användarinloggning och registreringsfunktion kommer att gå, även om de inte är kodade ännu i exemplet.

Användande

För att använda yeoman installerar du först det, och om du inte har yeoman erfordrade motsvarigheter klunk, lövsal och grunt-cli, installera dem som så:

$ sudo npm installera -g yo bower grunt-cli gulp 

Installera nu React ställningen med:

$ sudo npm installera -g generator-reagera-fullstack 

Skapa nu en katalog för ditt projekt och CD till det:

$ mkdir reagera projekt $ cd reaktionsprojekt 

Använd slutligen yo kommandot med React-fullstack ställningsgenerator för att skapa din reagera app i katalogen:

$ yo reagera fullstack 

Yeoman kommer nu skapa kataloger och filer som krävs Du kommer att kunna se uppdateringar om detta på kommandoraden.

Med byggnadsställningen som nu är uppbyggd, låt oss bygga vårt projekt:

$ npm starta 

Som standard börjar vi in debug läge, och för att gå live lägger vi bara till -- släpp flagga, t.ex.. npm kör start - release.

Du kommer nu att se start och initialisering av startpaketet. När det här är klart kommer du att se webpackutgången som berättar detaljerad information om byggnaden och webbadresserna för åtkomst från.

Öppna din app via de URL-adresser som anges i slutet av utmatningen, med webbläsaren som standard på http: // localhost: 3000. För att komma åt administratörsgränssnittet för webbläsare, gå till http: // localhost: 3001.

Obs! Du kan behöva öppna porten på din server för utvecklingsporten. För användare av ubuntu / debian med ufw, gör följande:

$ ufw tillåter 3001 / tcp $ ufw tillåter 3000 / tcp 

Konvertera din befintliga webbplats till JSX

Facebook tillhandahåller ett onlineverktyg om du bara behöver konvertera en kod av HTML till JSX.

För större krav finns ett verktyg på npm för det som heter htmltojsx. Ladda ner det med:

npm installera htmltojsx 

Att använda det via kommandoraden är så enkelt som:

$ htmltojsx -c MyComponent existing_code.htm 

Därför att htmltojsx är en nodmodul, du kan också använda den direkt i koden, till exempel:

var HTMLtoJSX = kräver ('htmltojsx'); var converter = ny HTMLtoJSX (createClass: true, outputClassName: 'HelloWorld'); var output = converter.convert ('
Hej världen!
'); 

Lista exempel

Låt oss börja arbeta med att skapa en grundläggande uppgiftslista så att du kan se hur React fungerar. Innan vi börjar bör du konfigurera din IDE. Jag rekommenderar att du använder Atom.

Vid bash-prompten installerar du linjerna för React via apm:

apm installation linter linter-eslint reagera Installera linter till /Users/tom/.atom/packages ✓ Installera linter -eslint till /Users/tom/.atom/packages ✓ Installera reagerar på /Users/tom/.atom/packages ✓ 

Obs: Den senaste versionen av linter-eslint gjorde min MacBook Pro väldigt långsam, så jag inaktiverade den.

När det är klart kan vi gå vidare med att skapa en grundläggande lista inom ställningarna som vi gjorde i det tidigare steget med Yeoman, för att visa dig ett fungerande exempel på dataflödet.

Se till att din server startas med npm start, och nu börjar vi göra några ändringar.

Först och främst finns det tre jade malfiler som finns i denna byggnadsställning. Vi kommer inte att använda dem till exemplet, så börja med att rensa ut index.jade fil så det är bara en tom fil. När du har sparat filen, kolla din webbläsare och terminalutgång.

Uppdateringen visas direkt utan att behöva uppdateras. Detta är konfigurationen av webpack och browsersync som byggnadsställningen har gett i kraft.

Öppna sedan katalogen för komponenter och skapa en ny katalog:

$ cd-komponenter $ mkdir Användarlista 

Nu, inuti Userlist katalog, skapa en package.json fil med följande:

"namn": "UserList", "version": "0.0.0", "privat": true, "main": "./UserList.js" 

Också, fortfarande inuti Userlist katalog, skapa UserList.js fil och lägg till följande:

// Import React Import React, PropTypes, Component från "reagera"; // Skapa komponenten UserList-komponent UserList utökar komponent // Huvudmetoden görs kallas i alla komponenter för display render () // Ovanstående nedan för att se objektet inuti konsolen //console.log(this.props.data ); // Iterera data som tillhandahålls här var list = this.props.data.map (funktion (item) return 
Item.first Item.last
 ); // Återgå visningsavkastningen ( 
 lista 
 );  // Gör det tillgängligt för resten av appens standard-användarlista; 

För att slutföra måste vi lägga till några data för den här listan. Vi ska göra det inuti komponenter / ContentPage / ContentPage.js. Öppna den filen och ställ in innehållet enligt följande:

/ *! React Starter Kit | MIT-licens | http://www.reactstarterkit.com/ * / import React, PropTypes, Component från 'reagera'; importera stilar från './ContentPage.css'; importera withStyles från '... / ... / decorators / withStyles'; importera UserList från '... / UserList'; // Här importerar vi UserList-komponenten vi skapade @withStyles (styles) class ContentPage utökar komponent static propTypes = path: PropTypes.string.isRequired, content: PropTypes.string.isRequired, title: PropTypes.string; statiska contextTypes = onSetTitle: PropTypes.func.isRequired,; render () // Definiera vissa data för listan var listData = [först: 'Peter', sist: 'Tosh', först: 'Robert', sist: 'Marley', first: 'Bunny' , senast: 'Wailer',]; this.context.onSetTitle (this.props.title); lämna tillbaka ( 
 
 this.props.path === '/'? null : 
This.props.title
  
 // Använd komponenten UserList som JSX  
 
 );  exportera standard ContentPage; 

Nu när vi sparar, kommer webpacken att återuppbyggas och browsersync visar ändringarna i din webbläsare. Ta en titt på källkoden för att se hur den gjordes.

Sammanfattning

Vi har använt Yeoman ställningsgenerator reagerar-fullstack för att starta en React-webbapp baserat på startpaketet. För en ytterligare förklaring av filen och kataloglayouten, kolla in readme i React starter kit git repo.

Härifrån redigerade vi index.jade fil så det var nollställt och började skapa vår egen visningsvy, vilket gör en ny komponent som heter Userlist.

Inuti komponenter / Userlist / UserList.js vi definierar hur listan kommer att göras med:

var list = this.props.data.map (funktion (objekt) returnera 
Item.first Item.last
 ); 

Här är det viktigt att notera att React kräver att alla itererade objekt har en unik identifierare som tillhandahålls under nyckel- attribut.

För att visa listan tar vi den in i ContentPage.js fil med importera UserList från '... / UserList'; och definiera vissa testdata med:

 var listData = [första: 'Peter', senast: 'Tosh', först: 'Robert', sist: 'Marley', första: 'Bunny', sist: 'Wailer',]; 

Inuti ContentPage.js vi kallar Userlist komponent med JSX .

Nu den Userlist komponent kan komma åt data attribut via this.props.data.

När vi passerar ett värde med en attribut av en komponent kan den nås via this.props. Du kan också definiera vilken typ av data som måste tillhandahållas genom att använda propTypes statisk variabel inom sin klass.

Extended Components vs React.createClass Syntax

Slutligen är en viktig punkt att notera att det här exemplet utnyttjade utökade komponenter. Detta har många fördelar för att strukturera din kod semantiskt. Men du kanske vill få tillgång till en mer benägen strategi, som många andra exempel gör.

Så istället för klass Komponentnamn utökar komponent som du tidigare sett i den här handledningen skapar du en React-klass med följande syntax till exempel:

var MyListItem = React.createClass (render: function () return 
This.props.data.text
; ); var MyNewComponent = React.createClass (render: function () return ( 
 this.props.results.map (funktion (resultat) return ; ) 
 ); ); 

Tja, det bryter oss för denna introduktion till React. Du borde nu ha en god förståelse för följande:

• få reaktion
• hur man använder Babel med React
• använder JSX
• skapa en komponent via förlängningsmetod
• använder din komponent och skickar den data

I de kommande delarna kommer vi att diskutera hur man använder JSX vidare, hur man arbetar med en databas som en beständig datakälla och hur React fungerar med annan populär webbteknologi som PHP, Rails, Python och .NET.