Hé emberek!
Ez az útmutató azoknak szól, akik a React alkalmazással kezdenek. Gondosan gondoztam az egyes szakaszok legjobb videóit és cikkeit, hogy megkönnyítsem a tanulást.
Megjegyzés: Nem vagyok társítva az alábbiakban említett webhelyekkel. Tisztán az én véleményem.
Előfeltételek
- HTML, CSS és JavaScript alapismeretek.
- Az ES6 jellemzőinek alapvető ismerete. Íme a cikkem, amely elmagyarázza az ES6 néhány funkcióját.
A kezdéshez ismernie kell legalább a következő szolgáltatásokat:
1. Legyen
2. Const
3. Nyílfüggvények
4. Import és Export
5. Osztályok
- Az npm használatának alapvető ismerete.
Elkezdeni
Használhat online kódszerkesztőket a gyakorláshoz, vagy használhatja a Create React App alkalmazást.
Fejlesztői környezetet telepítettem a JSFiddle-ben és a Codepen-ben.
A React összes alapértelmezésének megismeréséhez kezdje el a következő oktatóanyagokat:
Reagáljon a hivatalos dokumentációra
Kent C. Dodds kezdőknek szóló útmutatója a React-hez
A reakció alapjai Samer Buna
Mostanra már rendelkeznie kell egy alapgondolattal a React alapjairól. Elég egyszerű webalkalmazásokat kezdeni fejleszteni a React-ben.
Most nézze meg a React hivatalos bemutatóját:
React React hivatalos bemutatója
Ez egy jól megírt cikk, amely a React alapjait tartalmazza. És nagyon világosan megmagyarázza a konkrét témákat is.
Végül, de nem utolsósorban, megtanulhatja, hogyan csatlakozzon az API-khoz a React alkalmazásokkal:
API lekérése a React.js segítségével Ethan Jarrell által
Kezdjen el néhány projektet felépíteni
- Egyszerű todo-app
- Egyszerű számológép alkalmazás
- Építsen bevásárlókosarat
- A GitHub felhasználói statisztikáinak megjelenítése a GitHub API használatával
React Router
A React Router segít útvonalak létrehozásában az egyoldalas alkalmazásokhoz. Nagyon hatékony és könnyen használható a React alkalmazással.
Kezdés:
React Router oktatóanyag Paul Sherman
Reagáljon a Routerre és az Intro-ra a Learn Code Academy által
React alkalmazások átirányítása a Scotch.io webhelyről
Ezek a cikkek bőven elegendőek a React útválasztás megkezdéséhez.
Projektek
- Egy egyszerű CURD alkalmazás
- Hacker News klón
Ha valóban érdekelne sokat a Routerről, nézze meg a következő útmutatót:
A React Router teljes útmutatója a React Training segítségével
Webpack
A Webpack egy híres JavaScript modulcsomagoló. A Webpack segít fenntartani a függőségeket statikus fájlként a projekthez, így a fejlesztőknek nem kell ezt megtenni.
A Webpack rakodókkal is érkezik. A rakodók segítenek a projekt körüli konkrét feladatok futtatásában.
Ha többet szeretne megtudni a Webpackról, kövesse az alábbi oktatóanyagokat.
Mikor és miért kell használni a Webpack-t Andrew Ray-től
Webpack bemutató a Learn Code Academy-től
A helyi React környezet Webpack használatával történő beállításához olvassa el a következő GitHub repót:
Reagáljon SPA sablonra, Hanif Roshan
Úgy gondolom, hogy a fenti oktatóanyagok elegendőek a Webpack használatának megkezdéséhez. Az alapos ismeretek megszerzéséhez azonban olvassa el a következő útmutatásokat:
Webes bevezetés a SurviveJS-től
Webpack hivatalos dokumentumok
Szerver renderelés
A szerver renderelés a React egyik legmenőbb szolgáltatása. Bármely háttér-technológiával használható.
A React kiszolgálóoldali renderelése (SSR) segít összetevőket létrehozni a kiszolgálóban, és HTML-formátumban megjeleníteni a böngészőben. És amikor az összes JavaScript-modult letöltötte a böngészőbe, a React lép színpadra. Egyszerű!
Először vessen egy pillantást a React-DOM API-ra:
React-DOM API a React által
Az alapos ismeretek megszerzéséhez kövesse az alábbi oktatóanyagokat:
Tyler McGinnis reagál a szerver renderelésére
Reagáljon az útválasztó szerver renderelésére Roilan Salinas által
Reagáljon a szerver oldali megjelenítési útmutatóra, Dennis Brotzky
Redux
A Redux egy JavaScript-könyvtár, amelyet az alkalmazás állapotainak fenntartására fejlesztettek ki. Ha összetett alkalmazást épít, akkor az hozzáadja az általános összetevőket az állapotok kezeléséhez. A Redux segít minden állapotát egyetlen forrásban tárolni. És természetesen a React jól játszik Redux-szal :)
Kezdés:
Redux bemutatóa Learn Code Academy
Redux bemutató kezdőknek Valentino Gagliardi
Reagáljon Redux-ra CSS Tricks segítségével
Ezek az oktatóanyagok több mint elegendőek a Redux használatának megkezdéséhez. Azonban nem állhatok ellen az alábbi bemutató megemlítésének. Megéri :)
A Redux kezdete Dan Abramov részéről
Erőforrások
Félelmetes reakció
Ha tetszik a cikk, ne felejtsd el megosztani :)