React.js 14 Hulpmiddelen en bronnen voor webontwikkelaars

De populariteit van React.js is geweest snel groeiend sinds Facebook de bibliotheek voor het eerst in 2013 uitbracht. Dat is het het vijfde meest frequent geopende open source-project op Github, en jobadvertenties voor React-ontwikkelaars zijn ook sterk in opkomst. Reageren is a lichtgewicht JavaScript-raamwerk voor gebruikersinterfaces bouwen - de meest prominente voorbeelden zijn Facebook en Instagram.

Reactieaanbiedingen alternatief voor MVC-raamwerken, zoals Angular of Backbone, met een meer rechtlijnige structuur en een focus op prestatie-optimalisatie. Omdat React de komende jaren ongetwijfeld het webontwikkelingslandschap gaat bepalen, willen we u in dit artikel graag een toolkit voor ontwikkelaars om je te helpen voet bij stuk te krijgen in het rijk van React-ontwikkeling.

Officiële React.js-documenten van Facebook

Facebook biedt ontwikkelaars een gedetailleerde documentatie op de hoofdconcepten van React. Naast de docs, kun je hier ook een geweldige tutorial over vinden hoe een interactief tic-tac-toe-spel te bouwen met React en a discussieforum voor React-ontwikkelaars. Als de documenten zijn open-source, je kunt ze zelfs bewerken als je wilt.

React.js Github repo

In de React Github repo kan dat bekijk de broncode van React wanneer je het nodig hebt. Als u op de hoogte wilt blijven van de huidige stand van ontwikkeling, kunt u ook kijken naar de kwesties, de mijlpalen, en de nieuwste pull-aanvragen. Als je vastzit, kan het ook een goed idee zijn om de Gids voor probleemoplossing een beetje.

Hello World-startercode

Als je snel Reageren wilt geven, kun je hiermee beginnen “Hallo Wereld” interactieve demo op Codepen. Het bevat alle benodigde bezittingen en de startcode ook. Omdat Babel ook aan staat, kun je gebruiken zowel ECMAScript 6 als de JSX-syntaxis. Vork deze pen gewoon en u kunt doorgaan zonder dat u de hele omgeving zelf hebt opgezet.

Reactiestartset

De Reactiestartset is een isomorfe web-app-boilerplate gebouwd van Node.js, Express, GraphQL, React, en een handvol webontwikkelingstools, zoals Webpack, Babel, en Browsersync. Het biedt u de dezelfde frontendstapel die Facebook gebruikt en laat je toe om in te springen full-stack React-ontwikkeling zonder al te veel gedoe.

ReactCSS

ReactCSS maakt het mogelijk om voeg inline CSS-stijlen toe in JavaScript. ReactCSS wordt geleverd met ondersteuning voor React, Redux, React Native (een raamwerk voor het bouwen van native mobiele apps met React), automatische zweving, zweeftekst, pseudo-elementen en mediaquery's. Je kunt snel installeer het met npm.

Reageren JSFiddle-integratie (met en zonder JSX)

Dit is een geweldige online speeltuin als je een plek wilt waar je React kunt oefenen. Haar gehost op JSFiddle, en heeft twee versies: een met JSX en een zonder JSX, kies degene waarmee u zich meer op uw gemak voelt.

Stijlengidsgenerator Reageren

Je kunt snel een stijlgids genereren voor uw React-project met deze eenvoudig te gebruiken Stijlengidsgenerator Reageren. Dat hoeft alleen maar voeg een beetje documentatie toe naar uw bestanden, en de generator zorgt voor de rest. De tool wordt geleverd met een gedetailleerd leesmij-bestand.

Belle configureerbaar Reageer componenten

schone is een Reageer componentbibliotheek waarmee je uitgerust bent een set van React-componenten die je misschien in je project wilt gebruiken, zoals “Knop”, “Kaart”, “Spinner”, “toggle”, “Beoordeling”, verschillende vormcomponenten en anderen. De componenten werken zowel op mobiel als op desktop, en zij zijn aanpasbare ook.

Belle is niet de enige componentbibliotheek van React daar kun je andere geweldige vinden op Github, zoals Reageer widgets of Elementair.

Reageren Verhalenboek UI-ontwikkelomgeving

Als u de componentenbibliotheek van iemand anders niet wilt gebruiken, maar wil je eigen bouwen, het is de moeite waard om te proberen Reageer StoryBook wat een is UI-ontwikkelomgeving voor React-componenten. Met Storybook kun je componenten interactief ontwikkelen. Het heeft een uitgebreide documentatie, en jij kan ga aan de slag met de ontwikkeling in de Storybook Hub.

Reageer-Bootstrap

Reageer-Bootstrap integreert React met het populaire Bootstrap 3-frontend raamwerk. De ontwikkelaars hebben in feite Bootstrap-componenten opnieuw opgebouwd met React.js. Dit resulteert in een schonere codebasis met minder herhaling, en een hogere prestaties.

Merk op dat aangezien de repo onder actieve ontwikkeling is, de API's in de toekomst zullen veranderen. Voor de huidige staat van ontwikkeling, bekijk de routekaart van het project.

Reacteer ontwikkelaarshulpmiddelen voor Chrome

Reageer DevTools voor Chrome is een uitbreiding op Chrome Developer Tools en stelt u in staat om inspecteer componenthiërarchie. Het was gemaakt door Facebook met het streven om de ontwikkelaarscommunity bij te staan ​​bij het bouwen van nieuwe React-apps. Je kunt gewoon voeg het toe als een Chrome-extensie naar uw browser. U kunt bladeren door de bijbehorende broncode ook op Github.

Reacteer ontwikkelaarshulpmiddelen voor Firefox

Dit is de Firefox-versie van hetzelfde Reacteer ontwikkelaarshulpmiddelen gemaakt door Facebook. Voeg het gewoon toe als een add-on voor uw Firefox-browser, en begin met het inspecteren van de hiërarchische structuur van je React-app tegelijk.

React.js-pakket voor Atom

Je kan toevoegen Reageer op je Atom-code-editor met dit Atom React-pakket. Het komt met syntaxisaccentuering, autocomplete, codefragmenten, HTML naar JSX-conversie, en enkele andere handige functies die React-ontwikkeling enorm kunnen vergemakkelijken.

React.js Fundamentals - gratis online cursus

Er zijn veel uitstekende en redelijk goedkope cursussen waar je kunt leer React-ontwikkeling, u kunt dit echter wel inschrijven Fundamentals van React.js online cursus voor volledig gratis. Het bestaat uit 12 lessen, begint met de basis van React, en heeft een mooi curriculum die alle belangrijke dingen omvat.