React.js 14 Eszközök és források a webes fejlesztők számára

A a React.js népszerűsége volt gyorsan növekvő mivel a Facebook 2013-ban először kiadta a könyvtárat az ötödik leggyakrabban megjelent nyílt forráskódú projekt a Github-on, és a React fejlesztők álláshirdetése is erősen emelkedik. Reagál a Könnyű JavaScript keretrendszer mert felhasználói interfészek építése - a legjelentősebb példák a Facebook és a Instagram.

Reagál a alternatívája az MVC kereteknek, például szög vagy gerinc, a egyszerűbb szerkezet és a teljesítmény optimalizálásra összpontosít. Mivel a React biztosan a következő években határozza meg a webfejlesztési környezetet, ebben a cikkben szeretnénk egy fejlesztői eszközkészlet hogy segítsen megállítani a React fejlesztés területén.

Hivatalos React.js dokumentumok a Facebookról

A Facebook a fejlesztőknek egy részletes dokumentáció a a React fő fogalmai. A dokumentumok mellett itt egy nagy bemutató is található hogyan építsünk egy interaktív tic-tac-toe játékot a React és a vitafórum React fejlesztők számára. Mint a A dokumentumok nyílt forráskódúak, akkor is szerkesztheti őket, ha akarja.

React.js Github repo

A React Github repo-ban lehet nézd meg a React forráskódját amikor szüksége van rá. Ha tudni akarja, hogy a jelenlegi fejlettségi állapotban maradjon, megnézheti a kérdések, a mérföldkövek, és a legutóbbi húzási kérelmek. Ha elakad, az is jó ötlet, hogy tanulmányozzuk Hibaelhárítási útmutató egy kicsit.

Hello World kezdő kód

Ha gyorsan akarsz reagálni, elkezdhetsz ezzel “Helló Világ” interaktív demó a Codepen-en. Magába foglalja minden szükséges eszközt és a indító kód is. Ahogy Babel is be van kapcsolva, használhatja mind az ECMAScript 6, mind a JSX szintaxisa. Csak tedd ezt a tollat, és el tudsz menni anélkül, hogy az egész környezetet felállítanád.

Reagáljon a Starter Kit-re

A Reagáljon a Starter Kit-re egy izomorf webalkalmazás épült Node.js, Express, GraphQL, React, és egy pár webes fejlesztési eszköz, például Webpack, Babel, és Browsersync. Ez biztosítja a ugyanaz a frontend stack Facebook használ és lehetővé teszi, hogy ugorjon be teljes stack Reagáljon a fejlesztésre túl sok gond nélkül.

ReactCSS

ReactCSS lehetővé teszi Inline CSS stílusok hozzáadása a JavaScripthez. A ReactCSS támogatást nyújt a React, Redux, React Native (a natív mobilalkalmazások React használatával történő felépítéséhez), autoprefixálás, hover, pszeudo elemek és média lekérdezésekhez. Gyorsan telepítse npm-el.

Reagáljon a JSFiddle integrációra (JSX-el és anélkül)

Ez nagyszerű online játszótér ha olyan helyet akarsz, ahol elkezdheted gyakorolni a React-t. ez a JSFiddle-ben, és van két változat: az egyik a JSX és egyik nélkül JSX, válassza ki, hogy melyik a kényelmesebb.

Reagáljon a stílusvezető generátorra

Gyorsan hozzon létre egy stílus útmutatót a React-projekthez ezzel az egyszerű használatsal Reagáljon a stílusvezető generátorra. Csak meg kell adjunk hozzá egy kis dokumentációt fájlokat, és a generátor gondoskodik a többitől. Az eszköz részletes readme fájlt tartalmaz.

Belle konfigurálható React komponensek

Szépség egy Reagál a komponenskönyvtárra hogy felkínálja Önt React komponensek halmaza érdemes használni a projektben, például “Gomb”, “Kártya”, “Fonógép”, “pecek”, “Értékelés”, különböző formájú összetevők és mások. Az alkatrészek működnek mind mobil, mind asztali számítógépen, és ők testreszabható is.

Belle nem az egyetlen React összetevő könyvtár odakint találhatsz más nagyszerűeket is a Githubon Reagáljon a widgetekre vagy Elemi.

Reagáljon a Storybook UI Development Environment-re

Ha nem szeretné használni valaki más összetevő könyvtárát, de szeretné építeni a sajátját, érdemes megpróbálni React StoryBook ami a UI fejlesztői környezet a React komponensekhez. A mesekönyv lehetővé teszi az összetevők interaktív fejlesztése. Van egy kidolgozott dokumentáció, és te tudod kezdje el a fejlesztést ban,-ben Storybook Hub.

Reagál-Bootstrap

Reagál-Bootstrap integrálja a reakciót a népszerűvel Bootstrap 3 frontend keret. A fejlesztők alapvetően átépítették a Bootstrap komponenseket React.js-tal. Ez a tisztább kódbázis kevesebb ismétléssel, és a magasabb teljesítmény.

Ne feledje, hogy mivel a repo aktív fejlesztés alatt áll, az API-k a jövőben megváltoznak. A a jelenlegi fejlődés állapota, nézd meg a a projekt útitervét.

Reagáljon a fejlesztői eszközökre a Chrome számára

Reagáljon a DevTools for Chrome-ra a Chrome Developer Tools kiterjesztése, és lehetővé teszi vizsgálja meg a komponens hierarchiáját. Ez volt létrehozta a Facebook azzal a törekvéssel, hogy segítse a fejlesztői közösséget az új React alkalmazások kiépítésében. Egyszerűen add hozzá Chrome-kiterjesztésként böngészőjébe. Böngészhet a tartozó forráskód Githubon is.

Reagáljon a fejlesztői eszközökre a Firefox számára

Ez a Firefox verzió ugyanabból Reagáljon a Facebook által létrehozott fejlesztői eszközökre. Csak add hozzá a Firefox böngészőjének bővítményeként, és kezdje el egyszerre a React alkalmazás hierarchiájának fáját.

React.js csomag az Atom számára

Hozzáadhat Reagáljon az Atom kódszerkesztőjének támogatására ezzel az Atom React csomaggal. Jön szintaxis kiemelés, automatikus kiegészítés, kódrészletek, HTML-JSX konverzió, és néhány más hasznos funkció, amely nagyban megkönnyítheti a reagálást.

React.js Alapismeretek - ingyenes online tanfolyam

Sok kitűnő és meglehetősen olcsó kurzus van, ahol lehet tanulni reagál a fejlesztésre, azonban ezt beírhatja React.js Alapismeretek online tanfolyam teljesen ingyenes. Ez alkotja 12 óra, kezdődik a a React alapjai, és van egy szép tanterv amely minden fontos dologra kiterjed.