Komme i gang med React.js

React.js er en fleksibel og komponentbasert JavaScript-bibliotek for bygge interaktive brukergrensesnitt. Det var opprettet og åpnet av Facebook og brukes av mange ledende teknologibedrifter som Dropbox, AirBnB, PayPal og Netflix. React tillater utviklere å lag data-tunge apps som kan bli smertefritt oppdatert av gjengivelse bare de nødvendige komponentene.

React er den Se lag fra MVC programvare design mønster, og det hovedsakelig fokuserer på DOM manipulasjon. Som i dag snakker alle om React, i dette innlegget tar vi en titt på hvordan du kan Kom i gang med det.

Installer React

Du kan også installere React enten med npm pakkebehandling eller ved legge til nødvendige biblioteker manuelt til HTML-siden din. Det anbefales bruker React with Babel som tillater deg å bruk ECMAScript6 syntaks og JSX i React-koden din.

Hvis du vil Installer Reag manuelt, den offisielle dokken anbefaler å bruk denne HTML-filen. Du kan laste ned siden ved å klikke på Fil> Lagre side som ... menyen i nettleseren din. Skriptene du trenger (React, React DOM, Babel) vil også bli lastet ned i reagerer-example_files / mappe. Deretter legger du til følgende skriptkoder til delen av HTML-dokumentet ditt:

I stedet for å laste dem ned, kan du legge til React-skriptene fra CDN også.

Du kan også bruke minifiserte versjoner av de ovennevnte JavaScript-filene:

Hvis du vil installer React med npm, Den beste måten er å bruke Opprett React App Github repo opprettet av Facebook Incubator - dette er også løsningen som React docs anbefaler. Bortsett fra React, det også inneholder Webpack, Babel, Autoprefixer, ESLint og andre utviklerverktøy. For å komme i gang, bruk følgende CLI-kommandoer:

 npm installer -g create-react-app create-reager app min app min min app npm start

Når du er klar, kan du Få tilgang til den nye React-appen din på localhost: 3000 URL:

Hvis du vil lese mer på hvordan installere React, sjekk ut installasjonsveiledning av dokumentene.

React og JSX

Selv om det ikke er obligatorisk, kan du bruk JSX-syntaksen i dine React-apper. JSX står for JavaScript XML, og det transpilerer til vanlig JavaScript. Den store fordelen med JSX er den lar deg inkludere HTML i JavaScript-filene dine, derfor gjør det enklere å definere React-elementer.

Her er de viktigste tingene å vite om JSX:

Merker det begynn med små bokstaver (lavere kamel tilfelle) gjengis som vanlige HTML-elementer.
Merker det Begynn med store versjoner (øvre kamel tilfelle) gjengis som React-komponenter.
En hvilken som helst kode skrevet i krøllete braces ... tolkes som bokstavelig JavaScript.

Hvis du vil vite mer om hvordan du bruker JSX med React sjekk ut denne siden fra docs, og for standard JSX dokumentasjon Du kan se på JSX wiki.

Opprett React-elementer

React har a komponentbasert arkitektur der utviklere skaper gjenbrukbare komponenter for å løse forskjellige problemer. En React komponent er bygget opp av noen eller mange Reag elementer det er de minste enhetene av React apps.

Nedenfor kan du se et enkelt eksempel på et React-element som legger til en Klikk meg-knapp på en HTML-side. I HTML legger vi til en

beholder med "MyDiv" ID som vil være befolket med React-elementet. Vi lager vårt React-element i en

   Vi gjør vårt React-element med ReactDOM.render () metode hvilken tar to nødvendige parametere, de React element () og dens beholder (document.getElementById ( 'myDiv')). Du kan lese mer på hvordan React-elementer fungerer i “Rendering Elements” del av dokumentene.
 Lag komponenter
 Reag komponenter er gjenbrukbare, uavhengige brukergrensesnitt der du enkelt kan oppdatere dataene. En komponent kan være laget av ett eller mange React-elementer. Rekvisitter er vilkårlig inngang Du kan bruke til å sende data til en komponent. En React-komponent fungerer som JavaScript-funksjoner, hver gang den påberopes genererer en slags utgang.
 Du kan bruke enten klassisk funksjons syntaks eller den nye ES6 klasse syntaks til Definer en React-komponent. I denne artikkelen bruker jeg sistnevnte, slik Babel gir oss mulighet til å bruke ECMAScript 6. Hvis du er interessert i hvordan du oppretter en komponent uten ES6, kan du se på komponentene Komponenter og rekvisitter av dokumentene.
 Nedenfor kan du se enkel React komponent Vi skal lage som et eksempel. Det er et grunnleggende varsel som brukeren ser etter å logge på et nettsted. Det er tre deler av data som vil endre fra sak til sak: Brukerens navn, antall meldinger og antall varsler, vi vil passere disse som rekvisitter.
  
Hver React-komponent er en JavaScript-klasse som strekker seg React.Component grunnklassen. Vår komponent vil bli kalt Statistikk da det gir brukeren en grunnleggende statistikk. Først, vi opprett Statistikk klasse med Klassestats utvider React.Component ... syntaks, da vi Gjør det til skjermen ved å ringe ReactDOM.render () metode (vi har allerede brukt sistnevnte i forrige avsnitt).
  Klassestats utvider React.Component render () return (  Hei this.props.name, du har this.props.notifications nye varsler og this.props.messages nye meldinger. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Det første argumentet til ReactDOM.render () Metoden består av navnet på vår React-komponent (), og rekvisitter (Navn, varslinger, og meldinger) med sine verdier. Når vi erklærer verdiene til rekvisitter, skal strenger være vedlagt i anførselstegn (som "John Doe") og numeriske verdier innenfor krøllete parenteser (som 3).
 Merk at på grunn av JavaScript, vi Brukt klassenavn i stedet for klasse for å bestå en klasseattributt til en HTML-kode (classname = "Sammendrag").
 Den tilsvarende HTML-siden er følgende:
          
    
 I React docs er det mange andre kule eksempler på hvordan å bygge og administrere React-komponenter, og hva annet å vite om rekvisitter.
 Videre lesning
 Med React presenterte Facebook en ny type rammeverk inn i front-end utvikling som utfordrer MV * designmønsteret. Hvis du vil forstå bedre hvordan det fungerer og hva du kan og ikke kan oppnå med det, er det noen interessante artikler som kan hjelpe:
 Facebooks blogginnlegg på hvorfor de bygget React.
 Andrew Rays strålende blogginnlegg på det gode og det dårlige av React.
 Codementor på hvordan React og AngularJS sammenligner.
 FreeCodeCamps tenkemodell om MVC er død på forsiden.
 HackerNons artikkel på hvordan optimalisere reaksjonsrelatert ytelse.