React Zelfstudie => Aan de slag met React

Opmerkingen

React is een declaratieve, op componenten gebaseerde JavaScript-bibliotheek die wordt gebruikt voor het maken van gebruikersinterfaces.

Om MVC-framework zoals functionaliteiten in React te bereiken, gebruiken ontwikkelaars het in combinatie met een Flux- smaak naar keuze, bijvoorbeeld Redux .

versies

Versie	Publicatiedatum
0.3.0	2013/05/29
0.4.0	2013/07/17
0.5.0	2013/10/16
0.8.0	2013/12/19
0.9.0	2014/02/20
0.10.0	2014/03/21
0.11.0	2014/07/17
0.12.0	2014/10/28
0.13.0	2015/03/10
0.14.0	2015/10/07
15.0.0	2016/04/07
15.1.0	2016/05/20
15.2.0	2016/07/01
15.2.1	2016/07/08
15.3.0	2016/07/29
15.3.1	2016/08/19
15.3.2	2016/09/19
15.4.0	2016/11/16
15.4.1	2016/11/23
15.4.2	2017/01/06
15.5.0	2017/04/07
15.6.0	2017/06/13

Installatie of instellingen

ReactJS is een JavaScript-bibliotheek in een enkel bestand react-<version>.js dat op elke HTML-pagina kan worden opgenomen. Mensen installeren ook vaak de React DOM-bibliotheek react-dom-<version>.js samen met het hoofd React-bestand:

Basis opname

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

Ga naar de installatiepagina van de officiële React-documentatie om de JavaScript-bestanden op te halen.

React ondersteunt ook JSX-syntaxis . JSX is een extensie gemaakt door Facebook die XML-syntaxis toevoegt aan JavaScript. Om JSX te gebruiken, moet u de Babel-bibliotheek opnemen en <script type="text/javascript"> in <script type="text/babel"> om JSX te vertalen naar Javascript-code.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

Installeren via npm

Je kunt React ook installeren met npm door het volgende te doen:

npm install --save react react-dom

Om React in uw JavaScript-project te gebruiken, kunt u het volgende doen:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Installeren via garen

Facebook heeft zijn eigen pakketbeheerder genaamd Yarn uitgebracht , die ook kan worden gebruikt om React te installeren. Na het installeren van Yarn hoeft u alleen deze opdracht uit te voeren:

yarn add react react-dom

Je kunt React vervolgens in je project gebruiken op precies dezelfde manier alsof je React via npm had geïnstalleerd.

Hallo wereldcomponent

Een React-component kan worden gedefinieerd als een ES6-klasse die de basis React.Component klasse React.Component . In haar minimale vorm moet onderdeel definiëren een render methode die specificeert hoe het onderdeel maakt de DOM. De render retourneert React-knooppunten, die kunnen worden gedefinieerd met behulp van JSX-syntaxis als HTML-achtige tags. Het volgende voorbeeld laat zien hoe u een minimale component definieert:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

Een component kan ook props ontvangen. Dit zijn eigenschappen die door het bovenliggende element zijn doorgegeven om bepaalde waarden op te geven die de component niet zelf kan kennen; een eigenschap kan ook een functie bevatten die door de component kan worden aangeroepen nadat zich bepaalde gebeurtenissen hebben voorgedaan - een knop kan bijvoorbeeld een functie ontvangen voor de eigenschap onClick en deze aanroepen wanneer erop wordt geklikt. Bij het schrijven van een component zijn de props toegankelijk via het object props op de component zelf:

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

Het bovenstaande voorbeeld laat zien hoe de component een willekeurige tekenreeks door de bovenliggende name in de naamprop kan laten doorgeven. Merk op dat een component de rekwisieten die het ontvangt niet kan wijzigen.

Een component kan worden weergegeven in een andere component, of rechtstreeks in de DOM als het de bovenste component is, met behulp van ReactDOM.render en het voorziet van zowel de component als de DOM-knooppunt waar u de React-structuur wilt weergeven:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

Inmiddels weet je hoe je een basiscomponent kunt maken en props accepteren. Laat dit een stap verder gaan en state introduceren.

Laten we voor de demo onze Hello World-app maken, alleen de voornaam weergeven als een volledige naam is opgegeven.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

Opmerking: elk onderdeel kan zijn eigen status hebben of de status van de ouder als een prop accepteren.

Codepen Link naar voorbeeld.

Hallo Wereld

Zonder JSX

Hier is een eenvoudig voorbeeld dat de hoofd-API van React gebruikt om een React-element te maken en de React DOM API om het React-element in de browser weer te geven.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Met JSX

In plaats van een React-element op basis van tekenreeksen te maken, kunt u JSX gebruiken (een JavaScript-extensie die door Facebook is gemaakt voor het toevoegen van XML-syntaxis aan JavaScript), waarmee u kunt schrijven

var rElement = React.createElement('h1', null, 'Hello, world!');

als equivalent (en beter leesbaar voor iemand die bekend is met HTML)

var rElement = <h1>Hello, world!</h1>;

De code met JSX moet worden ingesloten in een tag <script type="text/babel"> . Alles in deze tag wordt met behulp van de Babel-bibliotheek omgezet in gewoon Javascript (dat moet worden opgenomen naast de React-bibliotheken).

Dus uiteindelijk wordt het bovenstaande voorbeeld:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Wat is ReactJS?

ReactJS is een open-source, op componenten gebaseerde front-endbibliotheek die alleen verantwoordelijk is voor de weergavenlaag van de toepassing. Het wordt onderhouden door Facebook.

ReactJS gebruikt een virtueel op DOM gebaseerd mechanisme om gegevens (views) in te vullen in HTML DOM. De virtuele DOM werkt snel omdat hij alleen individuele DOM-elementen wijzigt in plaats van elke keer de volledige DOM opnieuw te laden

Een React-toepassing bestaat uit meerdere componenten , die elk verantwoordelijk zijn voor het uitvoeren van een klein, herbruikbaar stukje HTML. Componenten kunnen worden genest in andere componenten zodat complexe applicaties kunnen worden opgebouwd uit eenvoudige bouwstenen. Een component kan ook de interne status behouden - een component TabList kan bijvoorbeeld een variabele opslaan die overeenkomt met het momenteel geopende tabblad.

Met React kunnen we componenten schrijven met behulp van een domeinspecifieke taal genaamd JSX. Met JSX kunnen we onze componenten schrijven met HTML, terwijl we JavaScript-gebeurtenissen mixen. React zal dit intern omzetten in een virtuele DOM en uiteindelijk onze HTML voor ons uitvoeren.

Reageer " reageert " om snel en automatisch wijzigingen in uw componenten aan te geven om de componenten in de HTML DOM opnieuw te genereren met behulp van de virtuele DOM. De virtuele DOM is een weergave in het geheugen van een werkelijke DOM. Door het grootste deel van de verwerking in de virtuele DOM uit te voeren in plaats van rechtstreeks in de DOM van de browser, kan React snel handelen en alleen componenten toevoegen, bijwerken en verwijderen die sinds de laatste rendercyclus zijn gewijzigd.

Hallo wereld met staatloze functies

Stateless componenten halen hun filosofie uit functioneel programmeren. Dat houdt in dat: een functie altijd precies hetzelfde retourneert als wat eraan wordt gegeven.

Bijvoorbeeld:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

Zoals je in het bovenstaande voorbeeld kunt zien, zal statelessSum altijd dezelfde waarden retourneren gegeven a en b. De functie statefulSum retourneert echter niet dezelfde waarden, zelfs geen parameters. Het gedrag van dit type functie wordt ook als bijwerking genoemd . Omdat de component van invloed is op iets dat verder gaat.

Het is dus aan te raden om stateless componenten vaker te gebruiken, omdat ze geen bijwerkingen hebben en altijd hetzelfde gedrag zullen veroorzaken. Dat is waar u naar op zoek wilt in uw apps, omdat fluctuerende status het slechtste scenario is voor een onderhoudbaar programma.

Het meest basale type reactiecomponent is er een zonder status. Reageren componenten die pure functies van hun rekwisieten zijn en geen intern statusbeheer vereisen, kunnen worden geschreven als eenvoudige JavaScript-functies. Dit zijn naar verluidt Stateless Functional Components omdat ze alleen een functie van props , zonder enige state bij te houden.

Hier is een eenvoudig voorbeeld om het concept van een Stateless Functional Component te illustreren:

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Merk op dat het enige dat deze component doet is een h1 element met de name prop weergeven. Dit onderdeel houdt geen status bij. Hier is ook een ES6-voorbeeld:

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

Omdat deze componenten geen back-upinstantie nodig hebben om de status te beheren, heeft React meer ruimte voor optimalisaties. De implementatie is schoon, maar tot nu toe zijn dergelijke optimalisaties voor staatloze componenten nog niet geïmplementeerd .

Maak React App

create-react-app is een React-app boilerplate-generator gemaakt door Facebook. Het biedt een ontwikkelomgeving die is geconfigureerd voor gebruiksgemak met minimale installatie, waaronder:

ES6 en JSX-transpilatie
Dev-server met hot-module herladen
Code pluisvorming
CSS automatisch voorvoegsel
Bouw een script met JS, CSS en afbeeldingsbundeling en sourcemaps
Jest-testraamwerk

Installatie

Installeer eerst create-react-app wereldwijd met node package manager (npm).

npm install -g create-react-app

Voer vervolgens de generator uit in de door u gekozen map.

create-react-app my-app

Navigeer naar de nieuw gemaakte map en voer het startscript uit.

cd my-app/
npm start

Configuratie

create-react-app is opzettelijk standaard niet configureerbaar. Als niet-standaardgebruik is vereist, bijvoorbeeld om een gecompileerde CSS-taal zoals Sass te gebruiken, kan de opdracht eject worden gebruikt.

npm run eject

Hiermee kunnen alle configuratiebestanden worden bewerkt. NB dit is een onomkeerbaar proces.

alternatieven

Alternatieve React-ketels omvatten:

Bouw React App

Voer de volgende opdracht uit om uw app klaar te maken voor productie

npm run build

Absolute basisprincipes van het maken van herbruikbare componenten

Componenten en rekwisieten

Aangezien React zich alleen bezighoudt met de weergave van een toepassing, bestaat het grootste deel van de ontwikkeling in React uit het maken van componenten. Een component vertegenwoordigt een deel van de weergave van uw toepassing. "Props" zijn eenvoudigweg de attributen die worden gebruikt op een JSX-knooppunt (bijvoorbeeld <SomeComponent someProp="some prop's value" /> ), en zijn de primaire manier waarop onze applicatie met onze componenten communiceert. In het bovenstaande fragment, binnen SomeComponent, zouden we toegang hebben tot this.props , waarvan de waarde het object {someProp: "some prop's value"} .

Het kan handig zijn om React-componenten te beschouwen als eenvoudige functies - ze nemen input in de vorm van "rekwisieten" en produceren output als markup. Veel eenvoudige componenten gaan nog een stap verder en maken zichzelf "Pure Functions", wat betekent dat ze geen bijwerkingen veroorzaken en idempotent zijn (gegeven een set ingangen, zal de component altijd dezelfde output produceren). Dit doel kan formeel worden afgedwongen door componenten als functies te maken in plaats van "klassen". Er zijn drie manieren om een React-component te maken:

Functionele ("staatloze") componenten

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass ()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

ES2015-klassen

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Deze componenten worden op precies dezelfde manier gebruikt:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

De bovenstaande voorbeelden produceren allemaal identieke markeringen.

Functionele componenten kunnen geen "status" bevatten. Dus als uw component een status moet hebben, kies dan voor op klasse gebaseerde componenten. Raadpleeg Componenten maken voor meer informatie.

Als laatste opmerking, react-rekwisieten zijn onveranderlijk nadat ze zijn doorgegeven, wat betekent dat ze niet vanuit een component kunnen worden gewijzigd. Als het bovenliggende element van een component de waarde van een prop verandert, verwerkt React de oude props door de nieuwe, vervangt de component zichzelf met de nieuwe waarden.

Zie Thinking In React en herbruikbare componenten voor meer informatie over de relatie tussen rekwisieten en componenten.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

React Zelfstudie
Aan de slag met React

Zoeken…