7 bästa gratis handledningar för att lära dig att reagera och göra webbappar

Annons

Just nu är inte bara React på höjden av sin popularitet, utan dess popularitet accelererar. Så långt som JavaScript webbutveckling är oroad Programmering vs. Webbutveckling: Vad är skillnaden?Du kanske tror att applikationsprogrammerare och webbutvecklare gör samma jobb, men det är långt ifrån sanningen. Här är de viktigaste skillnaderna mellan programmerare och webbutvecklare. Läs mer , React är ett av de enklaste ramverken att lära sig och ett av de mest effektiva för snabb och robust utveckling.

Så om du har bestämt dig för att lära dig det, klappa dig själv på axeln: du har gjort ett smart val.

Det enda problemet är att de flesta värdefulla React-kurser kommer med en rejäl prislapp. Till exempel den mycket hyllade Reagera för nybörjare-kurs är $89 (startversion) och $127 (masterversion). Gratiskurser är sällan lika omfattande och användbara – men vi har hittat flera som är det utmärkt och kommer att få dig igång på höger fot Vad gör en bra programmeringshandledning?Alla programmeringshandledningar görs inte lika. Vissa gynnar dig och andra slösar bort din tid. Här är vad du ska leta efter i en kvalitetsprogrammeringshandledning.

Läs mer .

1. React Trainings grundkurs

Tyler McGinnis är en välkänd React-utvecklare och instruktör som har undervisat och skrivit om React i flera år nu. Han har för närvarande fyra kurser tillgängliga på React Training [Inte längre tillgänglig], varav den första är helt gratis och fungerar som en ingångspunkt för de andra.

Reager Fundamentals är uppdelad i 32 videolektioner som summerar till tre hela timmars utbildning. Du lär dig allt du behöver för att få igång en grundläggande React-app (dvs. React ecosystem, NPM, Babel och Webpack), kärnkoncepten och livscykeln som driver React-appar, hur man skriver komponenter korrekt och hur man skickar data runt omkring.

Det är tätt. Det är informativt. Det är den perfekta introduktionen, och det faktum att McGinnis erbjuder det gratis är ganska fantastiskt. Detta bör vara ditt första stopp när du lär dig React.

Hemsida — React Fundamentals Course [Inte längre tillgänglig]

2. Hacka med React

Hacka med React är en e-bok som är helt gratis, pärm till pärm, om du läser webbversionen. Du kan ta en nedladdningsbar PDF-, EPUB- eller MOBI-version av den för $10 om du hellre vill ta den med dig och lära dig offline. Hur som helst, det är en fantastisk resurs för nybörjare som inte gillar videor.

Det börjar från början och förklarar grundläggande begrepp som JSX och komponenter och rekvisita, och håller din hand när du tar examen till mellanliggande ämnen som tillstånd, routing, tester, linting och Mer. Det är skrivet i ES6 från början till slut och du kommer att lära dig bästa praxis längs vägen, inklusive Babel, Webpack och ESLint.

Kommer det att göra dig till en React-expert? Nej, men det kommer få dig tillräckligt bekväm för att känna dig trygg och fortsätta lära dig. Åtminstone kommer du att veta mer än tillräckligt med React för att bestämma dig för om du ska spendera pengar på en avancerad premiumkurs någon annanstans.

Hemsida — Hacka med React

3. Den officiella React Tutorial

Du skulle tro att den officiella handledningen borde vara det första stället att leta efter för att lära dig React, men jag personligen tyckte det var lite för snabbt för helt nybörjare - det antog mycket mer kunskap än de flesta nybörjare har. Det är perfekt om du har tidigare erfarenhet av ett annat JavaScript-webbramverk.

Med det sagt, den officiella React-handledningen är fantastiskt när du har lärt dig kärnkoncepten i React och kämpar för att omsätta dem i praktiken. Den tar dig genom skapandet av en tic-tac-toe-webbapp som inte använder något annat än komponenter, rekvisita och tillstånd. Den överbryggar klyftan mellan abstrakt teori och praktisk tillämpning.

Jag rekommenderar också att kolla in officiell React-dokumentation, som förklarar varje bit av React i överraskande mängd detaljer. I synnerhet Tänker i React sida är som en mini-tutorial om att förstå de idiom som driver React. Var inte rädd för att gå tillbaka till React-dokumentationen om och om igen när du lär dig och skapar dina egna appar.

Hemsida — Den officiella React Tutorial och Tänker i React

4. Egghead's React Fundamentals Course

ägghuvud erbjuder dussintals kurser (hundratals lektioner) om olika webbutvecklingsämnen: JavaScript, Angular, React, RxJS, Node, TypeScript, etc. React är det tredje största ämnet på sajten, och även om de flesta av kurserna är för premiumanvändare, finns det fem tillgängliga gratis:

• Börja använda React för att bygga webbapplikationer
• Lägg till routing till React-appar med hjälp av React Router v4
• Komma igång med Redux
• Bygga React-applikationer med Idiomatic Redux
• Hantera komplexa tillstånd i React-appar med MobX

De två första är de viktigaste, men du kommer förmodligen att vilja ta dem alla någon gång (optimalt i den ordning som anges). Kurserna förutsätter att du redan kan JavaScript, så kolla in Eggheads JavaScript-kurser om du inte är bekväm med språket än 7 användbara knep för att bemästra ett nytt programmeringsspråkDet är okej att bli överväldigad när du lär dig koda. Du kommer förmodligen att glömma saker så fort du lär dig dem. Dessa tips kan hjälpa dig att bättre behålla all den nya informationen. Läs mer .

Observera att premiumkurserna också är ganska bra, och de är värda att kolla in om du har råd med Pro-prenumerationen: $40 per månad eller $200 per år.

Hemsida — Egghead's React Fundamentals Course

5. Lär dig React och Redux med Cabin

Även om Redux inte är en del av kärnan i React-ramverket, används de så ofta tillsammans att du verkligen borde lära dig det. Och även om du så småningom flyttar bort från Redux kan du ta med dig koncepten och tillämpa dem på vad du än använder i stället.

Stuga är en handledningsserie i 10 delar som lär dig hur du skapar en förenklad social nätverksapp från början: installera Node/React/Webpack, förstå hur React fungerar, med Redux, hantera sociala nätverksfunktioner som flöden och aviseringar, bearbeta bilder och filter som Instagram och Mer.

Den sista delen är en översikt över "bästa praxis" som inte bara lär dig det mest effektiva sättet att använda och organisera React/Redux, men också vanliga misstag att undvika, hur man designar en skalbar app och hur man använder tredjepartsverktyg för att underlätta din utveckling arbetsflöde.

Hemsida — Lär dig React och Redux med Cabin

6. LearnCode Academys React Course

Under de senaste åren, LearnCode Academy har utmärkt sig som en av de bästa programkanalerna på YouTube De 17 bästa YouTube-programmeringsguidernaI det här inlägget vill vi tipsa dig om några av de bästa YouTube-programserierna vi har hittat. Alla dessa är tillräckliga för att få dina fötter blöta som nybörjarprogrammerare. Läs mer . Den specialiserade sig på webbutveckling och täcker alla typer av ämnen från HTML, CSS och JavaScript till specifika ramverk som Angular och React. Och allt är gratis.

Kursen är uppdelad i tre sektioner: åtta videor om centrala React-koncept, sex videor om hur man använder Flux för dataarkitektur och sju videor om hur man använder Redux för att hantera tillstånd. Allt detta görs med hjälp av uppdaterad praxis, inklusive ES6 och Webpack.

Observera att detta inte är en heltäckande kurs, och Flux och Redux är båda avancerade koncept som inte är en del av kärnan React framework, så vi rekommenderar att du använder den här kursen som ett sätt att se över och cementera begrepp som lärts i kurserna ovan.

Hemsida — LearnCode Academys React Course

7. React-konventionen

Vissa programmerare föredrar att koda efter konvention - det vill säga att följa en viss uppsättning designbeslut ("konventioner") från projekt till projekt för att minimera komplexiteten och påskynda utvecklingsprocessen, särskilt i det tidiga skedet av nya projekt. Denna e-bok online syftar till att presentera en typ av konvention som React-utvecklare kan följa.

Innan du dyker in i detta bör du dock redan vara väl insatt i ES6, bekväm med React-ramverket och förstå grunderna i Redux. Den här e-boken är inte för nybörjare i sig. Snarare är det användbart för intermediärer som känner sig överväldigade och inte är säkra på hur de ska omvandla sin React/Redux-kunskap till webbappar från grunden.

Handledningen börjar med ett startkit-projekt och visar dig hur du ändrar det. Genom att följa denna konvention i framtida projekt behöver du inte slösa tid på att återskapa allt.

Hemsida — React-konventionen

Så du har lärt dig Reagera: Vad nu?

Med dessa handledningar under bältet bör du vara mer än kunnig nog att börja skapa dina egna webbappar med React. Vid det här laget är allt som återstår att öva, öva, öva. Och det som är särskilt coolt är att du kan senare använd React Native för att skapa mobilappar För att bygga en Android-app måste du lära dig dessa 7 programmeringsspråkVilket programmeringsspråk är rätt för att skapa Android-appar? Det handlar om din programmeringshistorik och vilka språk du känner dig mest bekväm med att använda. Lyckligtvis har du alternativ. Läs mer – men gå inte före dig själv. Håll dig till webbappar tills du är säker.

Det kommer att bli en tuff väg, så vi rekommenderar att du kollar in vår artikel om lära sig programmera utan stress Hur man lär sig programmering utan all stressKanske har du bestämt dig för att satsa på programmering, vare sig det är för en karriär eller bara som en hobby. Bra! Men du kanske börjar känna dig överväldigad. Inte så bra. Här är hjälp för att underlätta din resa. Läs mer . Bara för att du kämpar betyder det inte du är inte utbildad att vara programmerare 6 tecken på att du inte är menad att vara en programmerareAlla är inte utsmyckade för att vara programmerare. Om du inte är helt säker på att du är tänkt att vara en programmerare, här är några tecken som kan peka dig i rätt riktning. Läs mer !

För mer lärande, kolla in de bästa kurserna värda att betala för på Coursera De 11 bästa webbplatserna för gratis onlinekurser i datorprogrammeringGenom att använda dessa gratis onlinekurser i datorprogrammering kan du bli en bra kodare utan en datavetenskaplig examen. Läs mer .

Förhoppningsvis hjälpte dessa gratis tutorials! Om du känner till några andra gratis React-resurser som vi missat, vänligen meddela oss i en kommentar nedan.

Bildkredit: guteksk7 via Shutterstock.com