Merk: Enkelte nettlesere (for eksempel Chrome) mislykkes i å laste filen, med mindre den vises via HTTP, så sørg for at du bruker en lokal server. Jeg anbefaler browsersync-prosjektet.

Offline Transformation

Du kan også bruke kommandolinjegrensesnittet (CLI) til å transformere JSX-en din ved hjelp av babelkommandolinjeverktøyene. Dette er enkelt oppnådd via kommandoen npm:

$ sudo npm installer - global babel 

De --global eller -g flagg for kort vil installere babelpakken globalt slik at den er tilgjengelig overalt. Dette er en veldig god praksis med å bruke Node for flere prosjekter og kommandolinjeverktøy.

Nå som babel er installert, la oss gjøre oversettelsen av helloworld.js Vi har nettopp opprettet i trinnet før. Ved ledeteksten fra rotkatalogen hvor du pakket ut startpakken, kjører du:

$ babel src - watch - out-dir build 

Nå filen bygge / helloworld.js vil bli automatisk generert når du gjør en endring! Hvis du er interessert, les Babel CLI dokumentasjonen for å få en mer avansert kunnskap.

Nå som babel har generert bygge / helloworld.js, som inneholder bare rett opp JavaScript, oppdater HTML uten noen babelaktiverte skriptetiketter.

Så å samle, med babel kan vi laste JSX direkte inn i a manus tag via tekst / babel skriv attributt. Dette er bra for utviklingsformål, men for å gå til produksjon kan vi gi en generert JavaScript-fil som kan lagres på brukerens lokale maskin.

Generering av denne kopien er gjort på kommandolinjen, og da dette er en repeterende oppgave, anbefaler jeg deg å automatisere prosessen via bruk av --se flagg. Eller du kan gå et skritt videre og bruke Webpack og browsersync å automatisere din arbeidsflyt fullt ut. For å gjøre det på den enkleste banen mulig, kan vi automatisere oppsettet av et nytt prosjekt med en Yeoman-generator.

Installere med Yeoman Stillas

Yeoman er et veldig nyttig verktøy for å starte prosjekter raskt og med en optimal arbeidsflyt og verktøykonfigurasjon. Tanken er å la deg bruke mer tid på utvikling enn konfigurering av prosjektets arbeidsområde, og for å minimere gjentatte oppgaver (vær oppmerksom på dette. RSI er nummer én grunnen til at kodere stopper kodingen). Så som en god praksis, spare tid med verktøy og implementere D.R.Y (Gjenta ikke deg selv) i ditt daglige liv, vil øke din helse og effektivitet, og la deg bruke mer tid på å lage faktisk kode i stedet for konfigurasjon.

Det er mange stillas der ute, som kommer i mange smaker for forskjellige skalaer av prosjekt. For dette første eksempelet bruker vi reagere-fullstack stillas fra Yeoman generatorer; Du kan se en demonstrasjon av hva sluttresultatet ser ut.

Merk: Dette er en fullstack-konfigurasjon, som trolig er overkill for små prosjekter. Grunnen til at jeg velger denne stillaset er å gi deg et fullt oppsettmiljø, slik at du kan se hvordan startpakken kjeller ut i en større app. Det er en header og en footer, og du kan se hvor en brukerinnlogging og registreringsfunksjon vil gå, selv om de ikke er kodet ennå i eksemplet.

bruk

For å bruke yeoman, må du først installere det, og hvis du ikke har yeoman er nødvendige kolleger gulp, Lysthus og grynt-cli, installer dem som dette:

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

Installer nå React stillasene med:

$ sudo npm installere -g generator-reagere-fullstack 

Opprett nå en katalog for prosjektet ditt og cd til det:

$ mkdir reagere prosjektet $ cd reagere prosjektet 

Bruk endelig yo kommandoen med React-fullstack stillasgeneratoren for å lage din reageringsapp i katalogen:

$ yo reagerer fullstack 

Yeoman vil nå lage kataloger og filer som kreves; Du vil kunne se oppdateringer om dette i kommandolinjen.

Med stillasene som nå er satt opp, la oss bygge prosjektet vårt:

$ npm start 

Som standard starter vi inn debug modus, og å gå live legger vi bare til -- utgivelse flagg, f.eks. npm kjøre start - release.

Du vil nå se start og startpakke initialisering. Når dette er gjort, vil du se webpack-utdata som forteller deg detaljert informasjon om bygningen og nettadressene du vil få tilgang til fra.

Få tilgang til appen din via nettadressene som er oppført på slutten av utgangen, med nettleseren din som standard på http: // localhost: 3000. For å få tilgang til nettleserens synkroniseringsadministrasjonsgrensesnitt, gå til http: // localhost: 3001.

Merk: Du må kanskje åpne porten på serveren din for utviklingsporten. For ubuntu / debian brukere med ufw, gjør følgende:

$ ufw tillate 3001 / tcp $ ufw tillate 3000 / tcp 

Konvertere ditt eksisterende nettsted til JSX

Facebook gir et elektronisk verktøy hvis du bare trenger å konvertere en brikke av HTML til JSX.

For større krav er det et verktøy på NPM for det som heter htmltojsx. Last ned den med:

npm installere htmltojsx 

Å bruke det via kommandolinjen er så enkelt som:

$ htmltojsx -c MyComponent existing_code.htm 

Fordi htmltojsx er en nodemodul, du kan også bruke den direkte i koden, for eksempel:

var HTMLtoJSX = krever ('htmltojsx'); var converter = ny HTMLtoJSX (createClass: true, outputClassName: 'HelloWorld'); var output = converter.convert ('
Hei Verden!
'); 

Listeeksempel

La oss begynne å jobbe med å lage en grunnleggende oppgaveliste slik at du kan se hvordan React fungerer. Før du begynner, vennligst konfigurer din IDE. Jeg anbefaler at du bruker Atom.

Ved bash-prompten, installer linjene for React via apm:

apm installer linter linter-eslint reagerer Installere linter til /Users/tom/.atom/packages ✓ Installere linter-eslint til /Users/tom/.atom/packages ✓ Installere reager på /Users/tom/.atom/packages ✓ 

Merk: Den nyeste versjonen av linter-eslint gjorde MacBook Pro veldig sakte, så jeg deaktiverte den.

Når det er gjort, kan vi gå videre med å lage en grunnleggende liste innenfor stillasene vi laget i det forrige trinnet med Yeoman, for å vise deg et fungerende eksempel på datastrømmen.

Kontroller at serveren din er startet med npm start, og nå la oss begynne å gjøre noen endringer.

Først av alt er det tre jade malfiler som tilbys i denne stillas. Vi vil ikke bruke dem til eksempelet, så begynn med å rydde ut index.jade fil så det er bare en tom fil. Når du har lagret filen, må du sjekke nettleseren og terminalutgangen.

Oppdateringen vises øyeblikkelig, uten å måtte oppdateres. Dette er den webpack og browsersync-konfigurasjonen som stillasene har gitt, trer i kraft.

Åpne deretter komponentkatalogen og opprett en ny katalog:

$ cd komponenter $ mkdir UserList 

Nå inne i Userlist katalog, opprett en package.json fil med følgende:

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

Også, fortsatt inne i Userlist katalog, opprett UserList.js fil og legg til følgende:

// Import React Import React, PropTypes, Component fra 'reagere'; // Opprett UserList-komponentklassen UserList utvider komponent // Hovedmetoden gjengivelsen kalles i alle komponenter for visningsgjenvinning () // Uncent under for å se objektet inne i konsollen //console.log(this.props.data ); // Gjenta dataene som er oppgitt her var list = this.props.data.map (funksjon (element) return 
 Item.first  Item.last
 ); // Returner displayet retur ( 
 liste 
 );  // Gjør det tilgjengelig for resten av appen eksport standard UserList; 

Nå må vi legge til noen data for denne listen for å fullføre. Vi vil gjøre det inni komponenter / ContentPage / ContentPage.js. Åpne filen og sett innholdet slik:

/ *! React Starter Kit | MIT-lisens | http://www.reactstarterkit.com/ * / import React, PropTypes, Component fra 'reagere'; importer stiler fra './ContentPage.css'; importer medStyles fra '... / ... / decorators / withStyles'; importer brukerliste fra '... / brukerliste'; // Her importerer vi UserList-komponenten vi opprettet @withStyles (stiler) klasse ContentPage utvider komponent static propTypes = path: PropTypes.string.isRequired, innhold: PropTypes.string.isRequired, title: PropTypes.string; statisk kontekstTypes = onSetTitle: PropTypes.func.isRequired,; gjengivelse () // Definer noen data for listen var listData = [først: 'Peter', sist: 'Tosh', først: 'Robert', sist: 'Marley', først: 'Bunny' , sist: 'Wailer',]; this.context.onSetTitle (this.props.title); komme tilbake ( 
 
 this.props.path === '/'? null : 
 This.props.title
  
 // Bruk UserList-komponenten som JSX  
 
 );  eksport standard ContentPage; 

Nå når vi lagrer, vil webpakken gjenoppbygge og browsersync vil vise endringene i nettleseren din. Ta en titt på kildekoden for å se hvordan den ble gjengitt.

Sammendrag

Vi har brukt Yeoman stillas generator reagere-fullstack å starte en React web app basert på startpakken. For en ytterligere forklaring på fil- og katalogoppsettet, sjekk ut readme i reageringspakken git repo.

Herfra redigerte vi index.jade filen slik at den ble nullet ut og begynte å lage vår egen visningsvisning, og opprette en ny komponent som heter Userlist.

Innsiden komponenter / Userlist / UserList.js Vi definerer hvordan listen skal gjengis med:

var list = this.props.data.map (funksjon (element) return 
 Item.first  Item.last
 ); 

Her er det viktig å merke seg at React krever at alle itererte elementer har en unik identifikator gitt under nøkkel Egenskap.

For å vise listen inkluderer vi den inne i ContentPage.js filen med importer brukerliste fra '... / brukerliste'; og definer noen testdata med:

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

Innsiden ContentPage.js vi kaller Userlist komponent med JSX .

Nå Userlist komponent kan få tilgang til data attributt via this.props.data.

Hver gang vi sender en verdi med et attributt til en komponent, kan den nås via this.props. Du kan også definere typen data som må oppgis ved å bruke propTypes statisk variabel innenfor sin klasse.

Utvidede komponenter vs. React.createClass Syntax

Endelig er et viktig poeng å merke seg at dette eksempelet benyttet seg av utvidede komponenter. Dette har mange fordeler for semantisk strukturering av koden din. Men du vil kanskje få tilgang til en mer bare-ben-tilnærming, som mange andre eksempler gjør.

Så i stedet for Klassen Komponentnavn utvider komponent som du tidligere har sett i denne opplæringen, oppretter du en React-klasse med følgende syntaks, for eksempel:

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

Vel det bryter oss opp for denne introduksjonen til React. Du bør nå ha en god forståelse av følgende:

• får React
• hvordan du bruker Babel med React
• bruker JSX
• opprette en komponent via forlengelsesmetode
• bruker komponenten din og sender den data

I de kommende delene vil vi diskutere hvordan du bruker JSX videre, hvordan du arbeider med en database som en vedvarende datakilde, og hvordan React fungerer sammen med andre populære webteknologier som PHP, Rails, Python og .NET.