Kom i gang med React.js

React.js er en fleksibel og komponentbaseret JavaScript bibliotek til opbygning af interaktive brugergrænseflader. Det var oprettet og åbnet af Facebook og bruges af mange førende tech virksomheder som Dropbox, AirBnB, PayPal og Netflix. React tillader udviklere at opret data-tunge apps Det kan smerteligt opdateres af gentag kun de nødvendige komponenter.

Reag er den Se lag fra MVC software design mønster, og det hovedsageligt fokuserer på DOM manipulation. Som i dag taler alle om React, i dette indlæg tager vi et kig på, hvordan du kan Kom i gang med det.

Installer reaktion

Du kan også installere React enten med npm pakke manager eller ved tilføjer de nødvendige biblioteker manuelt til din HTML-side. Det anbefales ved hjælp af React with Babel det giver dig mulighed for brug ECMAScript6 syntaks og JSX i din React-kode.

Hvis du vil Installer Reag manuelt, de officielle dokumenter anbefaler at Brug denne HTML-fil. Du kan downloade siden ved at klikke på Fil> Gem side som ... menu i din browser. De scripts, du har brug for (React, React DOM, Babel) vil også blive downloadet i reagerer-example_files / folder. Tilføj derefter følgende script tags til afsnit af dit HTML-dokument:

I stedet for at downloade dem kan du tilføje React scripts fra CDN såvel.

Du kan også bruge miniverede versioner af ovenstående JavaScript-filer:

Hvis du hellere vil installere Reage med npm, Den bedste måde er at bruge Opret React App Github repo oprettet af Facebook Incubator - dette er også den løsning, som React docs anbefaler. Bortset fra React, det også indeholder Webpack, Babel, Autoprefixer, ESLint og andre udvikler værktøjer. For at komme i gang skal du bruge følgende CLI-kommandoer:

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

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

Hvis du vil læse mere om Sådan installeres React, tjek den installationsvejledning af dokumenterne.

React og JSX

Selvom det ikke er obligatorisk, kan du brug JSX-syntaksen i dine React apps. JSX står for JavaScript XML, og det transpilerer til almindelig JavaScript. Den store fordel ved JSX er det lader dig inkludere HTML i dine JavaScript-filer, derfor gør det lettere at definere reaktionselementer.

Her er de vigtigste ting at vide om JSX:

Tags det Start med små bogstaver (nederste kamel tilfælde) gøres som almindelige HTML-elementer.
Tags det Start med store bogstaver (øvre kamel tilfælde) gøres som reaktorkomponenter.
Enhver kode skrevet indenfor krøllet armbånd ... fortolkes som bogstavelig JavaScript.

Hvis du vil vide mere om hvordan man bruger JSX med React Tjek denne side fra docs og til standard JSX dokumentation Du kan se på JSX wiki.

Opret React-elementer

React har a komponentbaseret arkitektur hvor udviklere opretter genanvendelige komponenter for at løse forskellige problemer. En reaktorkomponent er opbygget af nogle eller mange Reager elementer som er de mindste enheder af React apps.

Nedenfor kan du se et simpelt eksempel på et React element der tilføjer en Click me-knap til en HTML-side. I HTML'en tilføjer vi en

container med "MyDiv" ID, der vil være befolket med reaktionselementet. Vi opretter vores reaktionselement inden for en

   Vi gør vores reaktionselement med ReactDOM.render () metode hvilken tager to nødvendige parametre, det Reagement () og dens container (document.getElementById ( 'myDiv')). Du kan læse mere om hvordan reaktionselementer virker i “Rendering Elements” sektion af dokumenterne.
 Opret komponenter
 Reag komponenter er genanvendelige, uafhængige brugergrænseflader hvor du nemt kan opdatere dataene. En komponent kan være lavet af et eller mange React-elementer. Rekvisitter er vilkårlig indgange Du kan bruge til at videregive data til en komponent. En React-komponent fungerer som JavaScript-funktioner, hver gang den påberåbes genererer en slags output.
 Du kan bruge enten klassisk funktionssyntax eller den nye ES6 klassesyntax til definere en React komponent. I denne artikel bruger jeg sidstnævnte, som Babel giver os mulighed for at bruge ECMAScript 6. Hvis du er interesseret i at oprette en komponent uden ES6, skal du kigge på siden Komponenter og rekvisitter af docs.
 Nedenfor kan du se enkel React komponent Vi skal skabe som et eksempel. Det er en grundlæggende anmeldelse, som brugeren ser efter at logge ind på et websted. Der er tre stykker data, der vil skift fra sag til sag: Brugerens navn, antallet af meddelelser og antallet af meddelelser, vi vil videregive disse som rekvisitter.
  
Hver React-komponent er en JavaScript-klasse der udvider React.Component base klasse. Vores komponent vil blive kaldt Stats da det giver brugeren en grundlæggende statistik. Først, vi Opret Stats klasse med Klassestatistik udvider React.Component ... syntaks, så vi gør det til skærmen ved at ringe til ReactDOM.render () metode (vi har allerede brugt sidstnævnte i det foregående afsnit).
  klassestatistik udvider React.Component render () return (  Hej this.props.name, du har this.props.notifications nye meddelelser og this.props.messages nye meddelelser. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Det første argument af ReactDOM.render () Metoden består af Navnet på vores React-komponent (), og dets rekvisitter (navn, underretninger, og Beskeder) med deres værdier. Når vi erklærer værdien af rekvisitterne, skal der være strenge indeholdt i citatmærker (synes godt om "John Doe") og numeriske værdier inden for krøllet parentes (synes godt om 3).
 Bemærk at på grund af JavaScript, vi Brugt className i stedet for klasse for at kunne bestå en klasseattribut til en HTML-kode (className = "summary").
 Den tilsvarende HTML-side er følgende:
          
    
 I React docs er der mange andre seje eksempler på hvordan man opbygger og styrer React-komponenter, og hvad mere at vide om rekvisitter.
 Yderligere læsning
 Med React introducerede Facebook en ny slags ramme ind i front-end udvikling som udfordrer MV * design mønster. Hvis du vil forstå bedre hvordan det virker, og hvad du kan og ikke kan opnå med det, her er nogle interessante artikler, der kan hjælpe:
 Facebooks blogindlæg på hvorfor de byggede React.
 Andrew Rays strålende blogindlæg på det gode og det dårlige i React.
 Codementor på hvordan React og AngularJS sammenligner.
 FreeCodeCamps tænke stykke om MVC er død i fronten.
 HackerNons artikel om hvordan man optimerer reaktionsrelateret ydeevne.