Aan de slag met React.js

React.js is een flexibel en op componenten gebaseerd JavaScript-bibliotheek voor het bouwen van interactieve gebruikersinterfaces. Het was gemaakt en geopend door Facebook en wordt gebruikt door veel toonaangevende technologiebedrijven zoals Dropbox, AirBnB, PayPal en Netflix. Reageren stelt ontwikkelaars in staat om maak data-zware apps dat kan pijnloos worden bijgewerkt door opnieuw weergeven van alleen de benodigde componenten.

Reageren is het Bekijk de laag van de MVC software ontwerppatroon, en het voornamelijk richt zich op DOM-manipulatie. Zoals tegenwoordig spreekt iedereen over React, in deze post kijken we hoe je kunt ga ermee aan de slag.

Installeer React

Je kunt React ook installeren met de npm-pakketbeheerder of door handmatig toevoegen van de benodigde bibliotheken naar uw HTML-pagina. Het wordt aanbevolen gebruik van React met Babel waarmee je kunt gebruik de ECMAScript6-syntaxis en JSX in uw React-code.

Als je wilt installeer React handmatig, de officiële documenten aanbevelen aan gebruik dit HTML-bestand. U kunt de pagina downloaden door op te klikken Bestand> Pagina opslaan als ... menu in uw browser. De scripts die je nodig hebt (Reageren, Reageren DOM, Babel) worden ook gedownload in de reactie-example_files / map. Voeg vervolgens de volgende scripttags toe aan de gedeelte van uw HTML-document:

In plaats van ze te downloaden, kunt u de React-scripts toevoegen van CDN ook.

U kunt ook de verkleinde versies van de bovenstaande JavaScript-bestanden:

Als u liever installeer React met npm, de beste manier is om de Maak React-app Github repo gemaakt door Facebook Incubator - dit is ook de oplossing die de React-documenten aanbevelen. Afgezien van React, het ook bevat Webpack, Babel, Autoprefixer, ESLint en andere tools voor ontwikkelaars. Gebruik de volgende CLI-opdrachten om aan de slag te gaan:

 npm install -g create-react-app create-react-app my-app cd my-app npm start

Als je klaar bent, kan dat toegang tot uw nieuwe React-app op de localhost: 3000 URL:

Als je meer wilt lezen over hoe React te installeren, bekijk de installatie richtlijn van de documenten.

Reageren en JSX

Hoewel het niet verplicht is, kunt u gebruik de JSX-syntaxis in je React-apps. JSX staat voor JavaScript XML, en het wordt overgezet naar normaal JavaScript. Het grote voordeel van JSX is dat het laat je HTML opnemen in je JavaScript-bestanden, daarom wordt het definiëren van React-elementen eenvoudiger.

Hier zijn de belangrijkste dingen om te weten over JSX:

Tags die begin met kleine letters (onderste kamerkast) worden weergegeven als normale HTML-elementen.
Tags die begin met hoofdletters (bovenste kamelenkas) worden gerenderd als React-componenten.
Elke code geschreven binnen accolades ... worden geïnterpreteerd als letterlijk JavaScript.

Als je meer wilt weten over hoe JSX met React te gebruiken bekijk deze pagina van de documenten, en voor de standaard JSX-documentatie je kunt de JSX-wiki bekijken.

React-elementen maken

React heeft een componentgebaseerde architectuur waarin ontwikkelaars creëren herbruikbare componenten om verschillende problemen op te lossen. Een component React is opgebouwd uit enkele of vele Reageer elementen dat zijn de kleinste eenheden React-apps.

Hieronder kunt u zien een eenvoudig voorbeeld van een React-element die een Klik me-knop toevoegt aan een HTML-pagina. In de HTML voegen we een toe

container met de "MyDiv" ID die zal zijn gevuld met het element React. We creëren ons React-element binnen een

   We maken ons React-element met de ReactDOM.render () methode welke neemt twee vereiste parameters, de Reageer element () en zijn container (document.getElementById ( 'myDiv')). U kunt meer lezen op hoe React-elementen werken in de “Weergave elementen” gedeelte van de documenten.
 Maak componenten
 Reageer componenten zijn herbruikbare, onafhankelijke UI-eenheden waarin u de gegevens gemakkelijk kunt bijwerken. Een component kan gemaakt zijn van een of meerdere React-elementen. Rekwisieten zijn willekeurige invoer u kunt gebruiken om gegevens door te geven aan een component. Een component React werkt vergelijkbaar met JavaScript-functies, elke keer dat het wordt aangeroepen genereert een soort van output.
 U kunt de klassieke functie syntaxis of de nieuwe ES6-klassenyntaxis naar definieer een React-component. In dit artikel gebruik ik de laatste, omdat Babel ons ECMAScript 6 toestaat. Als u geïnteresseerd bent in het maken van een component zonder ES6, kijk dan op de pagina Componenten en rekwisieten van de documenten.
 Hieronder ziet u de eenvoudig React-onderdeel we gaan als voorbeeld creëren. Het is een basiskennisgeving die de gebruiker ziet na het inloggen op een site. Er zijn drie stukjes data die dat zullen doen verander van geval tot geval: de naam van de gebruiker, het aantal berichten en het aantal meldingen, we zullen deze doorgeven als rekwisieten.
  
Elke React component is een JavaScript-klasse die breidt het uit React.Component basisklasse. Ons onderdeel wordt gebeld Stats omdat het de gebruiker een basisstatistiek biedt. Eerst, wij maak de Stats klasse met de class Stats breidt React.Component uit ... syntaxis, dan wij render het naar het scherm door het te bellen ReactDOM.render () methode (we hebben de laatste al in het vorige gedeelte gebruikt).
  class Stats breidt React.Component uit render () return (  Hallo this.props.name, u heeft this.props.notifications nieuwe meldingen en this.props.messages nieuwe berichten. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Het eerste argument van de ReactDOM.render () methode bestaat uit de naam van ons React-onderdeel (), en de rekwisieten (naam, meldingen, en berichten) met hun waarden. Wanneer we de waarden van de rekwisieten declareren, moeten strings zijn tussen aanhalingstekens (net zoals "John Doe") en numerieke waarden tussen accolades (net zoals 3).
 Merk op dat vanwege JavaScript, wij gebruikt naam van de klasse in plaats van klasse om een klassenkenmerk door te geven aan een HTML-tag (className = "Samenvatting").
 De overeenkomende HTML-pagina is de volgende:
          
    
 In de React-documenten staan nog vele andere coole voorbeelden hoe React-componenten te bouwen en te beheren, en wat te weten over rekwisieten.
 Verder lezen
 Met React, Facebook geïntroduceerd een nieuw soort kader in de front-end ontwikkeling die daagt het MV * ontwerppatroon uit. Als je beter wilt begrijpen hoe het werkt en wat je wel en niet kunt bereiken, volgen hier enkele interessante artikelen die kunnen helpen:
 Facebook's blogpost op waarom zij React hebben gebouwd.
 De briljante blogpost van Andrew Ray over het goede en slechte van React.
 Codementor aan hoe React en AngularJS vergelijken.
 Het denkwerk van FreeCodeCamp over of MVC is dood aan de voorkant.
 HackerNoon's artikel op hoe React-gerelateerde prestaties te optimaliseren.