Share
React er et JavaScript-bibliotek for å bygge brukergrensesnitt (brukergrensesnitt). Den vedlikeholdes og utvikles av Facebook, og er et av de mest populære verktøyene for å lage webapps i dag.
Det har imidlertid vært litt omdømme for ikke å være veldig brukervennlig å sette opp en React-app, spesielt for nybegynnere. Problemet stammer fra når React først ble populært, og standardmetoden for å lage en React-app involvert komplisert manuell konfigurasjon av en hel rekke installasjonsfiler.
Mange opplæringsprogrammer som er ment å hjelpe nybegynnere i gang med React, introduserte ulike tilnærminger og verktøy for å sette opp en fungerende app. Selv med subtile forskjeller mellom foreslåtte byggemetoder var forvirring uunngåelig.
For å kunne opprette en React-app via manuell konfigurasjon krever en god forståelse av flere forskjellige teknologier.
Denne fleksibiliteten i oppsettet er faktisk en god ting. Du har full frihet til å velge de spesifikke verktøyene du vil bygge din React-app, og konfigurere dem nøyaktig etter behov.
Når du er komfortabel med disse verktøyene, vil du ha tillit til å bruke dem til sitt fulle potensiale og lage dybdegående komplekse apper. Inntil da er det fortsatt en inngangsbarriere for mange utviklere som ikke nødvendigvis har erfaring med kommandolinjeverktøyene som trengs for å lage React apps.
For å bidra til å lindre denne frustrasjonen, fokuserer denne opplæringsserien på ulike metoder for å sette opp React apps. Vi starter med den mest grunnleggende tilnærmingen og bygger opp til flere komplekse oppsett. La oss skape ting av, skjønt, ved å klargjøre mer detaljert typene React setup vi vil dekke.
Ved slutten av denne opplæringsserien, kan du sette opp React-apper på fire hovedveier:
Den første metoden demonstrerer hvordan du bruker en online kodeditor som CodePen til å sette opp en React-app veldig raskt. Ved å bruke denne metoden, vil du kodes din første app bokstavelig talt i sekunder!
Deretter fortsetter vi med å sette opp React i et lokalt utviklingsmiljø, og starter med å legge til skript direkte i en HTML-fil uten bruk av byggverktøy. De neste to oppsettmetodene fokuserer på hvordan du vil sette opp en typisk React-app i din daglige utvikling.
Som du ser, bruker du verktøyet Create-React-app, gjør det ekstremt enkelt å spinne opp React apps med bare en kommando! Til slutt dekker vi hvordan du setter opp en React-app via kommandolinjen helt fra grunnen av, den gamle skolen.
Hver oppsettsmetode har sitt sted, og det finnes ingen enkelt 'bedre' tilnærming, bare alternativer, avhengig av dine behov.
React er et fantastisk bibliotek for å bygge webapps med, og det er også mye moro! La oss ta en titt nå på opplæringsforutsetningene for å sikre at du er oppe i fart.
Den enkleste metoden for å sette opp en React-app krever ingenting mer enn en internettforbindelse. Men når vi går videre til mer komplekse oppsett, vil vi bevege oss mot å sette opp en React-app helt fra begynnelsen. Derfor anbefales det å få litt kunnskap om følgende emner.
Windows, MacOS og Linux gir alle tilgang til kommandolinjeverktøy. Disse brukes sterkt i moderne webutvikling for å fullføre komplekse oppgaver raskt og effektivt. Hvis du ikke har noen erfaring med å arbeide med kommandolinjen for å utføre operasjoner som å administrere filer / mapper, installere verktøy, løpeskript og så videre, så ville det være verdt tiden din minst å lære det grunnleggende.
Hvis du har gjort webutvikling for en viss tid, så er sjansen du har minst hørt om Node.js og npm. Node.js ble opprinnelig opprettet for å kjøre JavaScript på serveren, men er nå også mye brukt til å utvikle webapps, forenkle og automatisere vanlige oppgaver, alt under et enkelt miljø.
Det finnes bokstavelig talt hundrevis av tusenvis av Node.js-moduler, og npm ble introdusert som en dedikert pakkebehandling for å hjelpe installere, organisere og administrere alle de ulike modulene i webappen din. Siden npm er kombinert med Node.js, er alt du trenger å gjøre installert den nyeste versjonen av Node.js på systemet ditt for å gjøre det tilgjengelig via kommandolinjen din.
Et rimelig nivå med JavaScript kreves for å sette opp og utvikle React apps. Ellers vil du absolutt slite på et tidspunkt å opprette React apps av noe dybde eller kompleksitet. Dette inkluderer noen funksjoner i ES6 som pilfunksjoner, klasser og moduler. Jeg anbefaler å pusse opp på JavaScript-ferdighetene dine om nødvendig før du prøver å utvikle en React-app.
Denne opplæringsserien fokuserer på å sette opp React-apper i stedet for å utvikle dem, og så vil vi ikke dykke for dypt inn i Reager bestemte emner som komponenter, rekvisitter og stat. Det er imidlertid en god idé å ha grunnleggende kunnskaper om hva disse er, så i neste avsnitt skal vi dekke de grunnleggende funksjonene i React og utforske hvordan alle delene passer sammen for å danne en fungerende app.
Før vi dykker inn i vår første oppsettsmetode, la oss ta en rask gjennomgang av React.
I kjernen er det tre grunnleggende trekk ved React at de fleste apps består av. Disse er:
Dette er de viktigste funksjonene du må mestre for å skrive effektive React-apper. Når du har nådd det stadiet, vil du være veldig godt forberedt på å dykke mye dypere inn i React og utvikle mer komplekse apper.
Du kan bli hyggelig overrasket over å finne ut at React-komponenter, rekvisitter og stat er ikke så vanskelig å få hodet rundt. Min personlige erfaring var at React setup-prosessen var vanskeligere enn å lære React itself!
Byggeklossene til noen React-app er komponenter. Tenk på dem som gjenbrukbare kodeblokker som inkapslerer oppslag, oppførsel og stiler. De kan også være nestet i hverandre, noe som gjør dem svært gjenbrukbare. For eksempel kan du ha en
For å gjøre konstruksjonen enklere, ble JSX opprettet for å gi komponenter en HTML-lignende struktur. Hvis du er kjent med HTML eller XML, vil du være hjemme ved hjelp av JSX for å bygge komponenter. Det er verdt å merke seg at du ikke er pålagt å bruke JSX i det hele tatt i React, men det er nå blitt akseptert standard måte å definere komponenter på.
Props lar deg passere informasjon mellom komponenter. Og i React kan informasjon kun sendes via rekvisitter fra foreldrekomponenter til barnekomponenter.
Hvis du velger å bruke JSX i komponentdefinisjonene dine (og jeg anbefaler at du gjør det), er definisjonen av rekvisitter på en komponent bemerkelsesverdig som å legge til HTML-attributter. Dette er en av grunnene til at JSX er så populær! Å kunne bruke HTML-lignende syntaks for React-komponenter og rekvisitter gjør det veldig enkelt å raskt sette opp appen din.
La oss ta en nærmere titt på vår
Først, her er det
klasse BookIndex utvider React.Component render () return ()Liste over alle bøker
Deretter inne i hver
klassen utvider React.Component render () return ()This.props.title
Forfatter: this.props.author
Publisert: this.props.published
Hvis syntaxen ovenfor for å skape React-komponenter ser merkelig ut, ikke bekymre deg. Det er ganske greit. En ES6-klasse utvider basekomponentklassen, og deretter håndterer en (nødvendig) gjengemetode utdataene fra komponenten.
Stat gjør det mulig for oss å holde oversikt over alle dataene i en React-app. Vi må kunne oppdatere brukergrensesnittet når noe endres, og staten håndterer dette for oss. Når staten er endret, er React smart nok til å vite hvilke deler av appen du trenger å oppdatere. Dette gjør React veldig fort da det bare vil oppdatere delene som har endret seg.
Stat brukes vanligvis til komponenten på toppnivå i React-appen din, slik at den er tilgjengelig for alle barnkomponenter for å forbruke statlige data etter behov.
Det er det for vår hvirvelvindstur i React. Det er på ingen måte omfattende, og det er mye mer du trenger å lære før du kan lage fullverdige komplekse apper, men forståelse av komponenter, rekvisitter og tilstand vil gi deg en solid headstart.
I denne opplæringen lagde vi grunnlaget for å lære å sette opp et React-miljø. Resten av denne opplæringsserien fokuserer på de spesifikke metodene som trengs for å gjøre dette. Vi vil dekke installasjonsmetoder som spenner fra veldig enkle til mer komplekse metoder som krever manuell konfigurasjon.
I neste veiledning begynner vi å ta en titt på å bruke CodePen, en online kodeditor, for å konfigurere en React-app med bare noen få museklikk. Dette er uten tvil den enkleste og raskeste måten å få koding på i React!
Accentsconagua