React.js 14 Verktyg och resurser för webbutvecklare
De populariteten av React.js har varit snabbt växande sedan Facebook släppte första gången biblioteket tillbaka 2013. Det är det femte mest förekommande öppna källprojektet på Github, och jobbannonser för React-utvecklare är också kraftigt stigande. Reagera är a lätt JavaScript-ramverk för bygga användargränssnitt - De mest framträdande exemplen är Facebook och Instagram.
React erbjuder en alternativ för MVC-ramar, som vinkel eller ryggraden, med en mer enkel struktur och fokus på prestandaoptimering. Eftersom React säkert kommer att definiera webbutvecklingslandskapet under de närmaste åren, vill vi i denna artikel ge dig en utvecklingsverktyg för att hjälpa dig att sätta foten i React utvecklingens rike.
Officiella React.js docs från Facebook
Facebook ger utvecklare en detaljerad dokumentation på huvudrecepten för React. Förutom docs kan du också hitta här en bra handledning om hur man bygger ett interaktivt tic-tac-toe spel med React och a diskussionsforum för React-utvecklare. Som den docs är öppna källor, Du kan även redigera dem om du vill.
React.js Github repo
I React Github repo kan du kolla in Reacts källkod när du behöver det. Om du vill hålla dig informerad med nuvarande utvecklingsstadium kan du också titta på frågor, de milstolpar, och den senaste dragförfrågningar. Om du fastnat kan det också vara en bra idé att studera Felsökningsguide lite.
Hej världens startkod
Om du vill ge ett snabbt försök att reagera kan du börja med det här “Hej världen” interaktiv demo på Codepen. Det inkluderar alla nödvändiga tillgångar och den startkod också. Som Babel är också på, kan du använda både ECMAScript 6 och JSX-syntaxen. Just gaffla den här penna, och du kan gå vidare utan att ha ställt in hela miljön på egen hand.
React Starter Kit
De React Starter Kit är en isomorphic web app boilerplate byggd av Node.js, Express, GraphQL, React, och en handfull webbutvecklingsverktyg, till exempel Webpack, Babel, och Browsersync. Det ger dig den samma frontend stack Facebook använder och låter dig hoppa in full stack React utveckling utan för mycket besvär.
ReactCSS
ReactCSS gör det möjligt att lägg till inline CSS-stilar i JavaScript. ReactCSS kommer med stöd för React, Redux, React Native (ett ramverk för att bygga inbyggda mobilappar via React), autoprefixing, svävar, pseudoelement och mediafrågor. Du kan snabbt installera det med npm.
React JSFiddle integration (med och utan JSX)
Detta är en bra online lekplats om du vill ha en plats där du kan börja träna React. Dess värd på JSFiddle, och har två versioner: en med JSX och en utan JSX, välj vilken du är mer bekväm med.
React style guide generator
Du kan snabbt skapa en stil guide för ditt React-projekt med denna lättanvända React style guide generator. Du behöver bara lägg till lite dokumentation till dina filer, och generatorn tar hand om resten. Verktyget levereras med en detaljerad readme-fil.
Belle konfigurerbara Reaktorkomponenter
Belle är en Reaktorkomponentbibliotek som utrustar dig med en uppsättning Reaktorkomponenter du kanske vill använda i ditt projekt, t.ex. “Knapp”, “Kort”, “Spinnare”, “Växla”, “Betyg”, olika formkomponenter och andra. Komponenterna fungerar både på mobil och skrivbord, och de är anpassningsbar också.
Belle är inte det enda React-komponentbiblioteket där ute kan du hitta andra bra på Github, till exempel Reagera widgets eller Elementär.
React Storybook UI Development Environment
Om du inte vill använda någon annans komponentbibliotek men vill bygga din egen, det är värt att försöka React StoryBook Vilket är en UI-utvecklingsmiljö för React-komponenter. Storybook tillåter dig att utveckla komponenter interaktivt. Den har en utarbetad dokumentation, och du kan börja med utvecklingen i Storybook Hub.
Reagerar-Bootstrap
Reagerar-Bootstrap integrerar React med den populära Bootstrap 3 frontendramen. Dess utvecklare byggde i grunden upp Bootstrap-komponenter med React.js. Detta resulterar i a renare kodbas med mindre repetition, och a högre prestanda.
Notera att eftersom repo är under aktiv utveckling kommer API: erna att förändras i framtiden. För nuvarande utvecklingsstatus, kolla in färdplanen för projektet.
Reagera utvecklingsverktyg för Chrome
Reagera DevTools för Chrome är en förlängning till Chrome Developer Tools och tillåter dig att inspektera komponenthierarkin. Det var skapad av Facebook med strävan att hjälpa utvecklaren att bygga nya React apps. Du kan helt enkelt lägg till det som en Chrome-förlängning till din webbläsare. Du kan bläddra i tillhörande källkod på Github också.
Reakt Utvecklarverktyg för Firefox
Det här är Firefox-versionen av samma Reakt Utvecklarverktyg skapad av Facebook. Lägg bara till det som tillägg till din Firefox-webbläsare, och börja inspektera hierarkiträdet i din React-app på en gång.
React.js Paket för Atom
Du kan lägga till Reagera stöd till din Atom-kodredigerare med detta Atom React-paket. Den kommer med syntaxmarkering, autofullständig, kodutdrag, HTML till JSX-konvertering, och några andra användbara funktioner som mycket kan underlätta reaktionsutveckling.
React.js Fundamentals - gratis online kurs
Det finns många utmärkta och ganska billiga kurser där du kan lära sig Reaktionsutveckling, men du kan anmäla detta React.js Fundamentals online kurs för helt gratis. Den består av 12 lektioner, börjar med grunderna för React, och har a trevlig läroplan som täcker alla viktiga saker.
