Kotisivu » Toolkit » React.js 14 Web-kehittäjien työkalut ja resurssit

    React.js 14 Web-kehittäjien työkalut ja resurssit

    React.js: n suosio on ollut nopeasti kasvava koska Facebook julkaisi ensimmäisen kerran kirjaston takaisin vuonna 2013. Se on viidenneksi useimmin merkitty avoin lähdekoodin projekti Githubissa ja React-kehittäjien työpaikkailmoitukset ovat myös voimakkaasti kasvussa. Reagoi a kevyt JavaScript-kehys varten käyttöliittymien rakentaminen - näkyvimmät esimerkit ovat Facebook ja Instagram.

    Reagoi tarjoaa vaihtoehto MVC-kehyksille, kuten kulma- tai selkäranka, jossa on yksinkertaisempi rakenne ja keskittyy suorituskyvyn optimointiin. Koska React tulee varmasti määrittelemään web-kehitysympäristön tulevina vuosina, tässä artikkelissa haluamme tarjota sinulle kehittäjän työkalupakki auttaa sinua asettamaan jalka React-kehityksen alueelle.

    Virallinen React.js-dokumentit Facebookista

    Facebook tarjoaa kehittäjille a yksityiskohtaiset asiakirjat on Reactin pääkäsitteet. Asiakirjojen lisäksi löydät täältä myös suuren opetusohjelman miten rakentaa interaktiivinen tic-tac-toe-peli React ja a keskustelufoorumi React-kehittäjille. Kuten docs on avoimen lähdekoodin, voit jopa muokata niitä, jos haluat.

    React.js Github repo

    React Github repossa voit tutustu Reactin lähdekoodiin kun tarvitset sitä. Jos haluat pysyä ajan tasalla nykyisestä kehityksestä, voit myös katsoa sitä kysymykset, virstanpylväät, ja uusimmat vedonpyynnöt. Jos olet jumissa, se voi myös olla hyvä idea tutkia Vianmääritysopas vähän.

    Hei Maailman käynnistyskoodi

    Jos haluat yrittää reagoida nopeasti, voit aloittaa tästä “Hei maailma” interaktiivinen demo Codepenissä. Se sisältää kaikki tarvittavat varat ja käynnistyskoodi yhtä hyvin. Kuten Babel on myös, voit käyttää sekä ECMAScript 6 että JSX-syntaksi. Haarukkaa tämä kynä ja voit mennä eteenpäin ilman, että koko ympäristö on luotu yksin.

    React Starter Kit

    React Starter Kit on isomorfinen verkkosovellus rakennettu Node.js, Express, GraphQL, React, ja kourallinen web-kehitystyökalut, kuten Webpack, Babel, ja Browsersync. Se tarjoaa sinulle sama frontend-pino käyttää Facebookia ja voit hypätä täysi pino Reagoi kehitykseen ilman liikaa vaivaa.

    ReactCSS

    ReactCSS mahdollistaa lisää inline CSS -tyylit JavaScriptissä. ReactCSS: n mukana toimitetaan tuki React, Redux, React Native (kehys natiivien mobiilisovellusten rakentamiseen Reactilla), automaattinen korjaus, hover, pseudo-elementit ja mediakyselyt. Voit nopeasti asenna se npm: llä.

    Reagoi JSFiddle-integraatio (JSX: n kanssa ja ilman sitä)

    Tämä on suuri online-leikkipaikka jos haluat paikan, jossa voit aloittaa harjoittelun. Sen JSFiddleissä, ja on kaksi versiota: yksi JSX: llä ja yksi ilman JSX: ää, valitse kumpi olet miellyttävämpi.

    Reagoi tyyliopastaja

    Voit nopeasti luo tyyliopas React-projektillesi tämä helppokäyttöinen Reagoi tyyliopastaja. Sinun tarvitsee vain lisää pieni dokumentaatio tiedostoihin, ja generaattori huolehtii muista. Työkalulla on yksityiskohtainen readme-tiedosto.

    Belle-konfiguroitavat React-komponentit

    kaunotar on Reagoi komponenttikirjasto joka antaa sinulle React-komponenttien joukko haluat ehkä käyttää projektissasi, kuten “nappi”, “Kortti”, “kehrääjä”, “Indonesialainen”, “luokitus”, eri muotokomponentit ja muut. Komponentit toimivat sekä mobiili- että työpöydällä, ja he ovat muokattavissa yhtä hyvin.

    Belle on ei ainoa React-komponenttikirjasto siellä voit löytää muita hyviä Githubissa, kuten Reagoi widgetit tai Alkuaine.

    React Storybookin käyttöliittymän kehitysympäristö

    Jos et halua käyttää jonkun toisen aineiston kirjastoa haluat rakentaa oman, se kannattaa yrittää React StoryBook joka on Reaktiokomponenttien käyttöliittymän kehitysympäristö. Storybookin avulla voit kehittää komponentteja vuorovaikutteisesti. Siinä on laadittava dokumentaatio, ja sinä voit aloita kehitys vuonna Storybook Hub.

    Reagoivat-Bootstrap

    Reagoivat-Bootstrap integroi reagoida suosittujen kanssa Bootstrap 3: n etupaneelin kehys. Sen kehittäjät perustivat uudelleen Bootstrap-komponentit React.js: n avulla. Tämä johtaa a puhtaampi koodi vähemmän toistoa ja a korkeampi suorituskyky.

    Huomaa, että koska repo on aktiivisessa kehityksessä, API muuttuu tulevaisuudessa. Varten nykyinen kehitys, tutustu hankkeen etenemissuunnitelma.

    Reagoi kehittäjän työkalut Chromeen

    Reagoi DevTools Chromeen on Chrome-kehitystyökalujen laajennus ja sen avulla voit tarkastaa komponenttien hierarkia. Se oli luonut Facebook pyritään auttamaan kehittäjäyhteisöä rakentamaan uusia React-sovelluksia. Voit yksinkertaisesti lisää se Chrome-laajennuksena selaimeen. Voit selata kuuluva lähdekoodi myös Githubissa.

    Reagoi kehittäjän työkalut Firefoxiin

    Tämä on Firefox-versio sama Reagoi Facebookin luomien kehitystyökalujen kanssa. Lisää se vain Firefox-selaimen lisäosana, ja aloita React-sovelluksen hierarkkipuun tarkastaminen kerralla.

    React.js paketti Atomille

    Voit lisätä Reagoi Atom-koodieditoriisi tämän Atom React -paketin kanssa. Se tulee syntaksin korostus, automaattinen täydennys, koodinpätkät, HTML-JSX-muunnos, ja joitakin muita hyödyllisiä ominaisuuksia, jotka voivat helpottaa reagoimaan kehitykseen.

    React.js Fundamentals - ilmainen verkkokurssi

    Tarjolla on monia erinomaisia ​​ja melko edullisia kursseja oppia Reagoi kehitykseen, Voit kuitenkin rekisteröidä tämän React.js Perusteet online-kurssi täysin ilmaiseksi. Se koostuu 12 oppituntia, alkaa Reactin perusteet, ja sillä on a mukava opetussuunnitelma joka kattaa kaikki tärkeät asiat.