React Tutorial => Iniziare con React

Osservazioni

React è una libreria JavaScript dichiarativa, basata su componenti, utilizzata per creare interfacce utente.

Per ottenere il framework MVC come le funzionalità di React, gli sviluppatori lo usano in combinazione con un gusto di scelta di Flux , ad es. Redux .

Versioni

Versione	Data di rilascio
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

Installazione o configurazione

ReactJS è una libreria JavaScript contenuta in un singolo file react-<version>.js che può essere inclusa in qualsiasi pagina HTML. Inoltre, le persone installano comunemente la libreria React DOM react-dom-<version>.js insieme al file principale di React:

Inclusione di base

<!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>

Per ottenere i file JavaScript, vai alla pagina di installazione della documentazione ufficiale di React.

React supporta anche la sintassi JSX . JSX è un'estensione creata da Facebook che aggiunge la sintassi XML a JavaScript. Per utilizzare JSX devi includere la libreria Babel e cambiare <script type="text/javascript"> in <script type="text/babel"> per tradurre JSX in codice Javascript.

<!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>

Installazione via npm

Puoi anche installare React usando npm attenendo alla seguente procedura:

npm install --save react react-dom

Per utilizzare React nel tuo progetto JavaScript, puoi fare quanto segue:

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

Installazione via filato

Facebook ha rilasciato il proprio gestore di pacchetti denominato Yarn , che può essere utilizzato anche per installare React. Dopo aver installato Yarn è sufficiente eseguire questo comando:

yarn add react react-dom

Puoi quindi utilizzare React nel tuo progetto esattamente nello stesso modo in cui avevi installato React via npm.

Ciao World Component

Un componente React può essere definito come una classe ES6 che estende la classe base React.Component . Nella sua forma minima, un componente deve definire un metodo render che specifica come il componente viene render al DOM. Il metodo di render restituisce i nodi React, che possono essere definiti usando la sintassi JSX come tag di tipo HTML. L'esempio seguente mostra come definire una componente minima:

import React from 'react'

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

export default HelloWorld

Un componente può anche ricevere props . Queste sono proprietà passate dal suo genitore al fine di specificare alcuni valori che il componente non può conoscere da solo; una proprietà può anche contenere una funzione che può essere chiamata dal componente dopo che si sono verificati determinati eventi - ad esempio, un pulsante potrebbe ricevere una funzione per la sua proprietà onClick e chiamarla ogni volta che viene fatto clic. Durante la scrittura di un componente, è possibile accedere ai suoi props attraverso l'oggetto props sulla Componente stessa:

import React from 'react'

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

export default Hello

L'esempio sopra mostra come il componente può eseguire il rendering di una stringa arbitraria passata nel name prop dal suo genitore. Si noti che un componente non può modificare i puntelli che riceve.

Un componente può essere reso all'interno di qualsiasi altro componente, o direttamente nel DOM se è il componente più in alto, utilizzando ReactDOM.render e fornendo sia il componente che il Nodo DOM in cui si desidera rendere l'albero di Reazione:

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

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

Ormai sai come creare un componente base e accettare props . Facciamo un ulteriore passo avanti e introduciamo lo state .

Per amor di demo, facciamo la nostra app Hello World, mostra solo il nome se viene dato un nome completo.

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

Nota: ogni componente può avere il proprio stato o accettare lo stato del genitore come supporto.

Codepen Link to Example.

Ciao mondo

Senza JSX

Ecco un esempio di base che utilizza l'API principale di React per creare un elemento React e l'API DOM React per eseguire il rendering dell'elemento React nel browser.

<!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>

Con JSX

Invece di creare un elemento React dalle stringhe, si può usare JSX (un'estensione Javascript creata da Facebook per aggiungere la sintassi XML a JavaScript), che consente di scrivere

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

come equivalente (e più facile da leggere per qualcuno che abbia familiarità con HTML)

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

Il codice che contiene JSX deve essere racchiuso in un <script type="text/babel"> . Tutto all'interno di questo tag verrà trasformato in semplice Javascript utilizzando la libreria Babel (che deve essere inclusa in aggiunta alle librerie React).

Quindi, finalmente l'esempio sopra diventa:

<!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>

Cos'è ReactJS?

ReactJS è una libreria front-end basata su componenti open source responsabile solo del livello di vista dell'applicazione. È gestito da Facebook.

ReactJS utilizza un meccanismo basato su DOM virtuale per riempire dati (viste) in DOM HTML. Il DOM virtuale funziona in modo rapido per il fatto che modifica solo singoli elementi DOM invece di ricaricare DOM completo ogni volta

Un'applicazione React è composta da più componenti , ciascuno responsabile dell'output di un piccolo pezzo HTML riutilizzabile. I componenti possono essere annidati all'interno di altri componenti per consentire di creare applicazioni complesse con semplici componenti. Un componente può anche mantenere lo stato interno - ad esempio, un componente TabList può memorizzare una variabile corrispondente alla scheda attualmente aperta.

React ci consente di scrivere componenti utilizzando un linguaggio specifico del dominio chiamato JSX. JSX ci consente di scrivere i nostri componenti usando l'HTML, mescolando gli eventi JavaScript. React convertirà internamente questo in un DOM virtuale e alla fine produrrà il nostro codice HTML per noi.

Reagire " reagisce " allo stato in modo rapido e automatico delle modifiche apportate ai componenti per eseguire il rerender dei componenti nel DOM HTML utilizzando il DOM virtuale. Il DOM virtuale è una rappresentazione in memoria di un DOM reale. Effettuando la maggior parte dell'elaborazione all'interno del DOM virtuale piuttosto che direttamente nel DOM del browser, React può agire rapidamente e solo aggiungere, aggiornare e rimuovere componenti che sono stati modificati dall'ultimo ciclo di rendering.

Ciao mondo con funzioni senza stato

I componenti stateless traggono la loro filosofia dalla programmazione funzionale. Il che implica che: Una funzione restituisce sempre la stessa cosa esattamente su ciò che gli viene dato.

Per esempio:

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

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

Come puoi vedere dall'esempio precedente, statelessSum restituirà sempre gli stessi valori di a e b. Tuttavia, la funzione statefulSum non restituirà gli stessi valori dati anche senza parametri. Questo tipo di comportamento della funzione viene anche definito come effetto collaterale . Dal momento che, il componente influisce su qualcosa di oltre.

Pertanto, si consiglia di utilizzare i componenti senza stato più spesso, poiché sono privi di effetti collaterali e creeranno sempre lo stesso comportamento. Questo è quello che vuoi essere nelle tue app perché lo stato fluttuante è lo scenario peggiore per un programma gestibile.

Il tipo più elementare di componente reattivo è uno senza stato. Reagire a componenti che sono pure funzioni dei loro oggetti di scena e non richiedono alcuna gestione dello stato interno possono essere scritti come semplici funzioni JavaScript. Si dice che siano Stateless Functional Components perché sono una funzione solo di props di props , senza avere nessuno state da tenere traccia di.

Ecco un semplice esempio per illustrare il concetto di un Stateless Functional Component :

// 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>

Nota che tutto ciò che fa questo componente è rendere un elemento h1 contenente il name prop. Questo componente non tiene traccia di nessuno stato. Ecco un esempio ES6:

import React from 'react'

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

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

export default HelloWorld

Poiché questi componenti non richiedono un'istanza di backup per gestire lo stato, React ha più spazio per le ottimizzazioni. L'implementazione è pulita, ma finora non sono state implementate tali ottimizzazioni per i componenti stateless .

Crea App di Reazione

create-react-app è un generatore di caldaie di app React creato da Facebook. Fornisce un ambiente di sviluppo configurato per la facilità d'uso con una configurazione minima, tra cui:

Transpilation ES6 e JSX
Dev server con ricaricamento modulo caldo
Linting di codice
Prefisso automatico CSS
Crea script con JS, CSS e image bundling e sourcemaps
Quadro di test di Jest

Installazione

Innanzitutto, installa l'app create-react globalmente con il gestore dei pacchetti del nodo (npm).

npm install -g create-react-app

Quindi avvia il generatore nella directory scelta.

create-react-app my-app

Passare alla directory appena creata ed eseguire lo script di avvio.

cd my-app/
npm start

Configurazione

create-react-app è intenzionalmente non configurabile per impostazione predefinita. Se è richiesto un utilizzo non predefinito, ad esempio, per utilizzare un linguaggio CSS compilato come Sass, è possibile utilizzare il comando di espulsione.

npm run eject

Ciò consente la modifica di tutti i file di configurazione. NB questo è un processo irreversibile.

alternative

Le piastre riscaldanti alternative React includono:

Costruisci App React

Per creare la tua app pronta per la produzione, esegui il comando seguente

npm run build

Nozioni di base assolute sulla creazione di componenti riutilizzabili

Componenti e puntelli

Poiché React si occupa solo della vista di un'applicazione, la maggior parte dello sviluppo in React sarà la creazione di componenti. Un componente rappresenta una parte della vista della tua applicazione. Gli " <SomeComponent someProp="some prop's value" /> " sono semplicemente gli attributi usati su un nodo JSX (ad esempio <SomeComponent someProp="some prop's value" /> ), e sono il modo principale con cui la nostra applicazione interagisce con i nostri componenti. Nel frammento sopra, all'interno di SomeComponent, avremmo accesso a this.props , il cui valore sarebbe l'oggetto {someProp: "some prop's value"} .

Può essere utile pensare a componenti React come funzioni semplici - prendono input sotto forma di "oggetti di scena" e producono output come markup. Molti componenti semplici fanno un ulteriore passo in avanti, diventando "Pure Functions", nel senso che non emettono effetti collaterali e sono idempotenti (dato un insieme di input, il componente produrrà sempre lo stesso output). Questo obiettivo può essere applicato formalmente creando effettivamente componenti come funzioni, piuttosto che "classi". Esistono tre modi per creare un componente React:

Componenti funzionali ("Stateless")

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

React.createClass ()

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

Classi ES2015

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

Questi componenti sono utilizzati esattamente nello stesso modo:

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

Gli esempi sopra mostreranno tutti markup identici.

I componenti funzionali non possono avere "stato" all'interno di essi. Quindi se il tuo componente ha bisogno di uno stato, allora vai per i componenti basati sulla classe. Consultare Creazione di componenti per ulteriori informazioni.

Come nota finale, i puntelli di reazione sono immutabili una volta che sono stati passati, il che significa che non possono essere modificati all'interno di un componente. Se il genitore di un componente cambia il valore di un oggetto di scena, React gestisce la sostituzione dei vecchi oggetti di scena con il nuovo, il componente si ripresenterà utilizzando i nuovi valori.

Vedi Thinking In React and Reusable Components per immersioni più profonde nel rapporto tra oggetti di scena e componenti.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

React Tutorial
Iniziare con React

Ricerca…