Che cos’è Reactjs e come funziona?

ReactJS è una libreria javascript per creare interfacce utente. Sebbene da nessuna parte sia strettamente definito. ¿ Come posso io Inizia con Reactjs ?

L’idea con React è di seguire l’ideologia basata sui componenti . Le sue viste dichiarative rendono il codice più prevedibile e più facile da eseguire il debug.

Possiamo usare ReactJS combinato con Webpack come gestore di pacchetti, Redux combinato con ImmutableJS per l’amministrazione dello stato dell’applicazione.

Esistono altre librerie che facilitano la vita degli sviluppatori , come Gulp per la gestione delle attività di compilazione e implementazione.

Che cos'è Reactjs e come funziona? 1

Come posso iniziare con Reactjs?

React e JSX

In React vedrai parti di codice ampiamente simili a queste:

const element = <h1> Ciao, mondo! </h1>;

Questa non è né una stringa JavaScript né HTML , ma si chiama JSX, un’estensione di sintassi per JavaScript. È ampiamente utilizzato nei metodi di rendering per React.

Per eseguire il rendering di parti dinamiche di pagine Web . JSX produce “elementi” di reazione e, ad esempio, è ampiamente utilizzato durante l’elaborazione di qualcosa in base alla condizione.

Per usare JSX nel metodo di rendering, deve essere racchiuso tra {}:

<img src = {user.avatarUrl}> </img>

L’uso di JSX è sicuro, in quanto impedisce gli attacchi di iniezione, quindi non devi preoccuparti dell’iniezione di codice.

Avrai sicuramente bisogno di renderizzare un elenco di elementi o scorrere un oggetto in un determinato momento durante lo sviluppo.

Questo viene fatto anche usando JSX e come per le condizioni, ho un articolo separato che si concentra esclusivamente sulla fornitura di elenchi.

Come utilizzare i tasti per gli elenchi

Le chiavi aiutano React a identificare quali elementi sono stati modificati, aggiunti o rimossi. Le chiavi devono essere univoche e non possono essere modificate per una rappresentazione adeguata degli elementi React nell’elenco.

Che cos'è Reactjs e come funziona? 2

Organizzazione basata su componenti e accessori

Nel mondo React, ci piace dividere le cose in componenti modulari. Ad esempio, se stessimo scrivendo un client di posta elettronica.

Potremmo avere un componente per l’elenco e-mail , uno per un elemento in quell’elenco, uno per il riquadro di anteprima, uno per la barra degli strumenti, ecc.

Mantenere le cose modulari le rende di facile comprensione, estremamente riutilizzabili e facili da testare.

Ecco un esempio di un componente React.

import React, {Component} da 'reagire';

class Hello estende il componente {

render () {
return <div> Sono un componente! </div>
}

}

Questo componente genererebbe semplicemente un tag <div> con dentro del testo. Noterai che la dipendenza React importata non viene utilizzata! Buona.

Lo è davvero! Viene utilizzato quando il codice viene trasferito in Javascript nativo, quindi è un requisito per qualsiasi file JSX.

Puoi usare altri componenti all’interno dei componenti di React. Ecco un esempio:

import React, {Component} da 'reagire';

import Hello da './Hello';

class Welcome estende il componente {

render () {
ritorna <div>
<Ciao />
</ Div>
}

}

Lo stato di reazione

Lo stato, d’altra parte, è privato e il suo scopo principale è quello di manipolarlo all’interno del componente. Lo stato è disponibile solo per le classi.

Ae usato per gestire alcune modifiche interne (come l’aggiornamento di un testo memorizzato basato sull’evento onChange):

import React, {Component} da 'reagire';

class Hello estende il componente {

setName () {
this.setState ({name: 'Dayle'});
}

render () {
ritorna <div>
<p> Ciao, {this.state.name}! </p>
<button onClick = {this.setName.bind (this)}> Imposta nome! </button>
</ Div>
}

}

In questo esempio, abbiamo aggiunto un pulsante con un evento onClick che chiama un metodo setName () in quel componente.

Non preoccuparti troppo della parte bind (), è solo un modo per cambiare l’ambito della funzione ed è una funzione piccola e utile di Javascript.

Inizialmente, quando viene visualizzato il componente, mostrerà “Ciao!” Senza un nome, questo è perché este.estado.nombre non è definito.

Se facciamo clic sul pulsante, il nostro codice chiamerà this.setState () per aggiornare lo stato con un nome e il componente verrà nuovamente rappresentato per mostrare “Hello there Dayle!”, Aggiornamento in tempo reale.

Che cos'è Reactjs e come funziona? 3

Componente del ciclo di vita

I metodi che gestiscono il ciclo di vita del componente sono ereditati dal componente. La descrizione più dettagliata dei metodi del ciclo di vita è disponibile qui.

È importante ricordare che, nel caso di applicazioni universali (applicazioni renderizzate sul server), le variabili globali relative al browser.

Styling React Components

Sebbene React non supporti l’uso diretto dei CSS per lo stile , ma sia più orientato verso gli stili jsx online (passando l’oggetto di stile a un tag HTML), questo approccio non viene usato così frequentemente.

React non è così complesso. Sfortunatamente, per quanto riguarda molte librerie Javascript , gli strumenti e i processi di costruzione che li circondano reagiscono a ciò che complica le cose.

 

Potrebbe interessarti

Lascia un commento