React.js 14 Verktøy og ressurser for webutviklere
De populariteten til React.js har vært raskt voksende siden Facebook først lanserte biblioteket tilbake i 2013. Det er det femte mest kjente open source-prosjektet på Github, og jobbannonser for React-utviklere er også sterkt på vei oppover. React er en lett JavaScript-rammeverk til bygge brukergrensesnitt - De mest fremtredende eksemplene er Facebook og Instagram.
React tilbyr en alternativ for MVC rammer, som vinkel eller ryggrad, med en mer enkel struktur og fokus på ytelsesoptimalisering. Som React vil sikkert definere webutviklingslandskapet i de kommende årene, vil vi i denne artikkelen gi deg en utvikler verktøykasse for å hjelpe deg med å sette foten i reaksjonsutviklingen.
Offisielle React.js dokumenter fra Facebook
Facebook gir utviklere en detaljert dokumentasjon på hovedkonseptene til React. Foruten docs, kan du også finne her en flott opplæring på hvordan å bygge et interaktivt tic-tac-toe spill med React, og a diskusjonsforum for React-utviklere. Som docs er åpen kildekode, Du kan til og med redigere dem hvis du vil.
React.js Github repo
I React Github repo kan du sjekk ut Reacts kildekode når du trenger det. Hvis du vil holde deg informert med dagens utviklingstilstand, kan du også se på problemer, de milepæler, og siste trekkforespørsler. Hvis du sitter fast, kan det også være lurt å studere Feilsøkingsveiledning litt.
Hei World starter kode
Hvis du vil gi et raskt forsøk på å reagere, kan du starte med dette “Hei Verden” interaktiv demo på Codepen. Det inkluderer alle nødvendige eiendeler og startkode også. Som Babel er også på, kan du bruke både ECMAScript 6 og JSX-syntaksen. Bare gaffel denne pennen, og du kan fortsette uten å ha satt opp hele miljøet alene.
Reager Starter Kit
De Reager Starter Kit er en isomorphic web app boilerplate bygget av Node.js, Express, GraphQL, React, og et håndfull webutviklingsverktøy, for eksempel Webpack, Babel, og Browsersync. Det gir deg den samme frontendbunke Facebook bruker og lar deg hoppe inn full-stack React utvikling uten for mye trøbbel.
ReactCSS
ReactCSS gjør det mulig å legg til inline CSS stiler i JavaScript. ReactCSS kommer med støtte for React, Redux, React Native (et rammeverk for å bygge opprinnelige mobilapper ved hjelp av React), autoprefixing, svinger, pseudoelementer og medieforespørsler. Du kan raskt installer den med npm.
Reakt JSFiddle-integrasjon (med og uten JSX)
Dette er en flott online lekeplass hvis du vil ha et sted hvor du kan begynne å praktisere React. Det er vert på JSFiddle, og har to versjoner: en med JSX og en uten JSX, velg hvilken du er mer komfortabel med.
React style guide generator
Du kan raskt generer en stilguide for ditt React-prosjekt med dette enkle å bruke React style guide generator. Du må bare legg til litt dokumentasjon til filene dine, og generatoren tar vare på resten. Verktøyet kommer med en detaljert readme-fil.
Belle konfigurerbare React komponenter
Belle er en Reag komponentbibliotek som utstyrer deg med et sett med React-komponenter Du vil kanskje bruke i prosjektet ditt, for eksempel “Knapp”, “Kort”, “Spinner”, “Veksle”, “Vurdering”, forskjellige formkomponenter og andre. Komponentene fungerer både på mobil og på skrivebordet, og de er tilpasses også.
Belle er ikke den eneste React-komponentbiblioteket der ute kan du finne andre flotte på Github, for eksempel Reag widgets eller Elemental.
React Storybook UI Development Environment
Hvis du ikke vil bruke andres komponentbibliotek, men ønsker å bygge din egen, det er verdt å prøve React StoryBook hvilken er en UI utviklingsmiljø for React komponenter. Historiebok lar deg utvikle komponenter interaktivt. Den har en detaljert dokumentasjon, og du kan Kom i gang med utviklingen i Storybook Hub.
React-Bootstrap
React-Bootstrap integrerer React med de populære Bootstrap 3 frontend rammeverk. Dens utviklere oppbygget i utgangspunktet Bootstrap komponenter med React.js. Dette resulterer i a renere kodebase med mindre repetisjon, og a høyere ytelse.
Merk at ettersom repo er under aktiv utvikling, endres APIene i fremtiden. For nåværende tilstand av utvikling, sjekk ut veikart av prosjektet.
Reag utviklerværktøy for Chrome
Reag DevTools for Chrome er en utvidelse til Chrome Developer Tools og lar deg inspiser komponenthierarkiet. Det var laget av Facebook med forsøket på å hjelpe utvikler fellesskapet i å bygge nye React apps. Du kan bare legg til det som en Chrome-utvidelse til nettleseren din. Du kan bla gjennom tilhørende kildekode på Github også.
Reag Developer Tools for Firefox
Dette er Firefox versjon av det samme Reag Developer Tools opprettet av Facebook. Bare legg det til som et tillegg til din Firefox-nettleser, og begynn å inspisere hierarkietreet i React-appen din samtidig.
React.js Pakke for Atom
Du kan legge til Gjør støtte til Atom-kodeditoren din med denne Atom React-pakken. Den følger med syntaksutheving, autofullføring, kodestykker, HTML til JSX-konvertering, og noen andre nyttige funksjoner som i stor grad kan lette React utvikling.
React.js Fundamentals - gratis online kurs
Det er mange gode og ganske rimelige kurs hvor du kan lære React utvikling, men du kan registrere dette React.js Fundamentals online kurs for helt gratis. Den består av 12 leksjoner, starter med grunnleggende om React, og har a hyggelig pensum som dekker alle viktige ting.
