Impara React in 5 minuti - Un tutorial di React.js per principianti

Questo tutorial ti darà una comprensione di base di React creando un'applicazione molto  semplice. Tralascio tutto ciò che non penso sia fondamentale.

E poi se suscita il tuo interesse e vuoi saperne di più, puoi dare un'occhiata al nostro corso gratuito React su Scrimba.

Ma per ora, concentriamoci sulle basi!

Il set up

Quando inizi con React, dovresti usare la configurazione più semplice possibile: un file HTML che importa Reactle ReactDOMlibrerie e usando i tag script.

Assomiglia a questo:

 /* ADD REACT CODE HERE */    

Abbiamo anche importato Babel, poiché React usa qualcosa chiamato JSX per scrivere markup. Dovremo trasformare il JSX in semplice JavaScript, in modo che il browser possa capirlo.

Ci sono altre due cose che voglio farti notare:

  1. Il con l'id di #root. Questo è il punto di ingresso per la nostra app. Qui è dove vivrà la nostra intera app.
  2. L' etichetta nel corpo. Qui è dove scriveremo il nostro codice React.

Se vuoi sperimentare con il codice, dai un'occhiata a questo playground Scrimba.

Componenti

Tutto in React è un componente e questi di solito assumono la forma di classi JavaScript. Crei un componente estendendoti alla React-Componentclasse. Creiamo un componente chiamato Hello:

class Hello extends React.Component { render() { return 

Hello world!

; } }

Quindi si definiscono i metodi per il componente. Nel nostro esempio, abbiamo solo un metodo ed è chiamato render().

All'interno render()restituirai una descrizione di ciò che vuoi che React disegni sulla pagina. Nel caso precedente, vogliamo semplicemente che visualizzi un h1tag con il testo Hello world! dentro.

Per fare in modo che la nostra piccola applicazione venga visualizzata sullo schermo, dobbiamo anche usare ReactDOM.render():

ReactDOM.render( , document.getElementById("root") ); 

Quindi è qui che colleghiamo il nostro Hellocomponente con il punto di ingresso per l'app ( ).

Quindi stiamo semplicemente dicendo: Hey React! Si prega di rendere il componente Hello all'interno del nodo DOM con un id di root !

Il risultato è quanto segue:

La sintassi HTML che abbiamo appena esaminato (

e ) è il codice JSX che ho menzionato prima. In realtà non è HTML, è molto più potente. Anche se ciò che scrivi lì finisce come tag HTML nel DOM.

Il prossimo passo è fare in modo che la nostra app gestisca i dati.

Gestione dei dati

Esistono due tipi di dati in React: props e state . La differenza tra i due è un po 'difficile da capire all'inizio, quindi non preoccuparti se la trovi un po' confusa. Diventerà più facile una volta che inizi a lavorare con loro.

La differenza fondamentale è che lo stato è privato e può essere modificato dall'interno del componente stesso. Gli oggetti di scena sono esterni e non controllati dal componente stesso. Viene trasmesso dai componenti più in alto nella gerarchia, che controllano anche i dati.

Un componente può modificare direttamente il proprio stato interno. Non può cambiare direttamente i suoi oggetti di scena.

Diamo prima un'occhiata più da vicino agli oggetti di scena.

Puntelli

Il nostro Hellocomponente è completamente statico. Trasmette lo stesso messaggio qualunque cosa accada. Tuttavia, una parte importante di React è la riusabilità, ovvero la capacità di scrivere un componente una volta e quindi riutilizzarlo in diversi casi d'uso. Ad esempio per visualizzare messaggi diversi.

Per ottenere questo tipo di riutilizzabilità, aggiungeremo oggetti di scena. Ecco come passare gli oggetti di scena a un componente:

ReactDOM.render( , document.getElementById("root") ); 

Questo oggetto si chiama messagee ha il valore "amico mio". Possiamo accedere a questo prop all'interno del componente Hello facendo riferimento this.props.message, in questo modo:

class Hello extends React.Component { render() { return 

Hello {this.props.message}!

; } }

Di conseguenza, questo viene visualizzato sullo schermo:

Il motivo per cui scriviamo {this.props.message}con le parentesi graffe è perché dobbiamo dire a JSX che vogliamo aggiungere un'espressione JavaScript. Questo si chiama fuga .

So now we have a reusable component which can render whatever message we want on the page. Woohoo!

However, what if we want the component to be able to change its own data? Then we have to use state instead!

State

The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.

So if you want the data in your app to change — for example, based on user interactions — it must be stored in a component’s state somewhere in the app.

Initializing state

To initialize the state, simply set this.state  in the constructor() method of the class. Our state is an object which in our case only has one key called message.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return 

Hello {this.state.message}!

; } }

Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.

Changing the state

To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateMessage.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return 

Hello {this.state.message}!

; } }

Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.

Event Handlers

The next step is to create a button to click on, so that we can trigger the updateMessage() method.

So let’s add a button to the render() method:

render() { return ( 

Hello {this.state.message}!

Click me! ) }

Here, we’re hooking an event listener onto the button, listening for the onClick event. When this is triggered, we call the updateMessage method.

Here’s the entire component:

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return ( 

Hello {this.state.message}!

Click me! ) } }

The updateMessage method then calls this.setState() which changes the this.state.message value. And when we click the button, here’s how that will play out:

Congrats! You now have a very basic understanding of the most important concepts in React.

If you want to learn more, be sure to check out our free React course on Scrimba.

Good luck with the coding :)

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.