Share
React är ett JavaScript-bibliotek för att bygga användargränssnitt (UI). Den underhålls och utvecklas av Facebook, och är ett av de mest populära verktygen för att skapa webbapplikationer idag.
Men det har fått lite rykte för att inte vara väldigt användarvänligt att skapa en React-app, särskilt för nybörjare. Problemet härstammar från när React först blev populär, och standardmetoden för att skapa en React-app innebar komplicerad manuell konfiguration av en hel mängd installationsfiler.
Många handledningar som syftar till att hjälpa nybörjare att komma igång med React introducerade olika metoder och verktyg för att skapa en fungerande app. Även med subtila skillnader mellan föreslagna byggnadsmetoder var förvirring oundviklig.
För att kunna skapa en React-app via manuell konfiguration krävs en god förståelse för flera olika tekniker.
Denna flexibilitet i installationen är faktiskt en bra sak. Du har fullständig frihet att välja de specifika verktyg som du vill bygga din React-app och konfigurera dem exakt efter behov.
När du är bekväm med dessa verktyg får du förtroende för att använda dem till sin fulla potential och skapa djupgående komplexa appar. Fram till dess finns det fortfarande ett inträdeshinder för många utvecklare som inte nödvändigtvis har erfarenhet av de kommandoradsverktyg som behövs för att skapa React apps.
För att hjälpa till att lindra den här frustrationen fokuserar den här handledningsserien på olika metoder för att konfigurera React apps. Vi börjar med det mest grundläggande tillvägagångssättet och bygger sedan upp till mer komplexa inställningar. Låt oss dock sparka av saker genom att förtydliga mer detaljerat de typer av React setup vi kommer att täcka.
I slutet av den här handledningsserien kan du konfigurera React apps på fyra olika sätt:
Den första metoden visar hur man använder en online-kodredigerare som CodePen för att skapa en React-app mycket snabbt. Med den här metoden kodar du din första app bokstavligen i sekunder!
Sedan fortsätter vi med att ställa in React i en lokal utvecklingsmiljö, och börjar med att direkt lägga till skript i en HTML-fil utan att använda några byggverktyg alls. De följande två installationsmetoderna fokuserar på hur du skapar en typisk React-app i din dagliga utveckling.
Som du ser, använder verktyget skapa-reagera app det extremt enkelt att snurra upp React apps med bara ett enda kommando! Slutligen täcker vi hur du sätter upp en React-app via kommandoraden helt från början, på grundskolans sätt.
Varje installationsmetod har sin plats, och det finns inget enda "bättre" tillvägagångssätt, bara alternativ beroende på dina behov.
React är ett fantastiskt bibliotek för att bygga webbapps med, och det är också mycket roligt! Låt oss ta en titt nu på handledningens förutsättningar för att se till att du är snabb.
Den enklaste metoden för att skapa en React-app kräver inget annat än en internetanslutning. Men när vi går vidare till mer komplexa inställningar flyttar vi oss mot att skapa en React-app helt från början. Därför rekommenderas lite kunskap om följande ämnen.
Windows, MacOS och Linux ger alla tillgång till kommandoradsverktyg. Dessa används kraftigt i modern webbutveckling för att snabbt och effektivt slutföra komplexa uppgifter. Om du inte har någon erfarenhet av att arbeta med kommandoraden för att utföra operationer som att hantera filer / mappar, installera verktyg, löpande skript och så vidare, skulle det vara värt din tid åtminstone att lära dig grunderna.
Om du har gjort webbutveckling under en viss tid så är chansen att du åtminstone hört talas om Node.js och npm. Node.js skapades ursprungligen för att köra JavaScript på servern, men används också ofta för att utveckla webbapps, förenkla och automatisera vanliga uppgifter, allt under en enda miljö.
Det finns bokstavligen hundratusentals Node.js-moduler, och npm introducerades som en dedikerad pakethanterare för att hjälpa till att installera, organisera och hantera alla olika moduler i din webbapp. Eftersom npm är buntad med Node.js, behöver du bara installera den senaste versionen av Node.js på ditt system för att göra det tillgängligt via din kommandorad.
En rimlig nivå av JavaScript krävs för att skapa och utveckla React apps. Annars kommer du säkert att kämpa vid något tillfälle för att skapa React apps av något djup eller komplexitet. Detta inkluderar vissa funktioner i ES6 som pilfunktioner, klasser och moduler. Jag rekommenderar att du borstar upp dina JavaScript-färdigheter om det behövs innan du försöker utveckla en React-app.
Denna tutorial-serie fokuserar på att konfigurera React apps istället för att utveckla dem, så vi kommer inte att delva för djupt i React specifika ämnen som komponenter, rekvisita och tillstånd. Det är dock en bra idé att ha viss grundläggande kunskaper om vad dessa är, så i nästa avsnitt kommer vi att täcka de grundläggande funktionerna i React och utforska hur alla delar passar ihop för att bilda en fungerande app.
Innan vi dyker in i vår första installationsmetod, låt oss ta en snabb rundtur i React.
I sin kärna finns tre grundläggande egenskaper för React som de flesta appar består av. Dessa är:
Det här är de viktigaste funktionerna du behöver för att kunna skriva effektiva React-appar. När du väl har nått det här laget kommer du att vara väldigt väl förberedd att dyka mycket djupare in i React och utveckla mer komplexa appar.
Du kan bli glatt överraskad att finna att React-komponenter, rekvisita och tillstånd inte är så svåra att ta sig runt. Min personliga erfarenhet var att React setup processen var svårare än att lära sig React själv!
Byggstenarna i någon React-app är komponenter. Tänk på dem som återanvändbara block av kod som inkapslar markup, beteende och stilar. De kan också nästas inuti varandra, vilket gör dem mycket återanvändbara. Du kan till exempel ha en
För att göra komponenterna enklare konstruerades JSX för att ge komponenter en HTML-liknande struktur. Om du är bekant med HTML eller XML så kommer du vara hemma med JSX för att bygga komponenter. Det är värt att notera att du inte är skyldig att använda JSX alls i React, men det har nu blivit det accepterade vanliga sättet att definiera komponenter.
Props kan du skicka information mellan komponenter. Och i React kan information endast skickas via rekvisita från föräldrakomponenter till barnkomponenter.
Om du väljer att använda JSX i dina komponentdefinitioner (och jag rekommenderar starkt att du gör det) så definierar du rekvisita på en komponent märkbart som att lägga till HTML-attribut. Detta är en av anledningarna till att JSX är så populär! Att kunna använda HTML-liknande syntax för React-komponenter och rekvisita gör det mycket enkelt att snabbt bygga upp din app.
Låt oss ta en närmare titt på vårt
Först här är det
klass BookIndex utökar React.Component render () return ()Lista över alla böcker
Sedan inuti varje
klassens bok sträcker sig React.Component render () return ()This.props.title
Författare: this.props.author
Publicerad: this.props.publicated
Om ovanstående syntax för att skapa React-komponenter ser konstigt ut, oroa dig inte-det är ganska enkelt. En ES6-klass förlänger baskomponentklassen och sedan hanterar en (krävs) återvinningsmetod komponentens utgång.
State gör att vi kan hålla reda på alla data i en React app. Vi måste kunna uppdatera användargränssnittet när något ändras, och staten hanterar detta för oss. När staten ändras är React tillräckligt smart för att veta vilka delar av appen som behöver uppdateras. Detta gör React väldigt snabbt eftersom det bara uppdaterar de delar som har ändrats.
Stat appliceras vanligtvis på komponenten på toppnivå i din React-app, så att den är tillgänglig för varje barnkomponent för att konsumera statliga data efter behov.
Det är det för vår virvelvindsturné i React. Det är inte heltäckande, och det finns mycket mer du behöver lära dig innan du kan skapa heltäckta komplexa appar, men förståelse av komponenter, rekvisita och tillstånd kommer att ge dig en solid huvudstart.
I denna handledning lagde vi grunden för att lära sig hur man ställer in en React-miljö. Resten av denna handledningsserie fokuserar på de specifika metoder som behövs för att göra detta. Vi täcker installationsmetoder från mycket enkla till mer komplexa metoder som kräver manuell konfiguration.
I nästa handledning börjar vi titta på att använda CodePen, en online kodredigerare, för att skapa en React-app med några få musklick. Detta är överlägset det enklaste och snabbaste sättet att få kodning i React!
Accentsconagua