Tutorial ReactJS per principianti: impara con l'esempio passo passo

Cos'è ReactJS?

ReactJS è un front-end open source JavaLibreria di script per la creazione di interfacce utente. ReactJS è gestito da Facebook e da una comunità di singoli sviluppatori e aziende. È ampiamente utilizzato come base nella creazione di siti Web a pagina singola e applicazioni mobili. È molto facile da usare e consente agli utenti di creare componenti dell'interfaccia utente riutilizzabili.

Caratteristiche di ReactJS

JSX: JSX è un'estensione di Javascript. Sebbene non sia obbligatorio utilizzare JSX in React, è una delle caratteristiche positive e facile da usare.

Componenti: I componenti sono come funzioni javascript pure che aiutano a semplificare il codice suddividendo la logica in codice indipendente riutilizzabile. Possiamo usare i componenti come funzioni e i componenti come classi. Anche i componenti hanno uno stato, oggetti di scena che semplificano la vita. All'interno di una classe, viene mantenuto lo stato di ciascuno degli oggetti di scena.

DOM virtuale: React crea un dom virtuale, ovvero una cache della struttura dei dati in memoria. Solo le modifiche finali del DOM sono state successivamente aggiornate nel DOM del browser.

Javascript Espressioni: Le espressioni JS possono essere utilizzate nei file jsx utilizzando parentesi graffe, ad esempio {}.

Vantaggi di ReactJS

Ecco alcuni importanti vantaggi/vantaggi derivanti dall'utilizzo di ReactJS:

ReactJS utilizza il dom virtuale che fa uso della cache della struttura dei dati in memoria e solo le modifiche finali vengono aggiornate nel dom del browser. Ciò rende l'app più veloce.
Puoi creare componenti di tua scelta utilizzando la funzionalità del componente di reazione. I componenti possono essere riutilizzati e anche utili nella manutenzione del codice.
Reactjs è una libreria javascript open source, quindi è facile iniziare.
ReactJS è diventato molto popolare in breve tempo ed è gestito da Facebook e Instagram. È utilizzato da molte aziende famose come Apple, Netflix, ecc.
Facebook mantiene ReactJS, la libreria, quindi è ben mantenuta e mantenuta aggiornata.
ReactJS può essere utilizzato per sviluppare un'interfaccia utente ricca per app desktop e mobili.
Facile da eseguire il debug e testare poiché la maggior parte della codifica viene eseguita Javascript piuttosto che su Html.

Svantaggi di ReactJS

Ecco i contro/svantaggi dell'utilizzo di ReactJS:

La maggior parte del codice è scritta in JSX, ovvero Html e CSS fanno parte di Javascript, può creare confusione poiché la maggior parte degli altri framework preferisce mantenere Html separato dal codice Javascript.
La dimensione del file di ReactJS è grande.

Utilizzo di ReactJS dalla CDN

Per iniziare a lavorare con react, dobbiamo prima installare reactjs. Puoi iniziare facilmente a utilizzare reactjs utilizzando i file javascript CDN, come mostrato di seguito.

Vai al sito ufficiale di reactjs per ottenere i collegamenti CDN, ovvero https://reactjs.org/docs/cdn-links.html e otterrai i file richiesti per spiegare la seguente immagine.

Per sviluppatore

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Per prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

sostituire versione con l'ultima versione di react sia per react-development.js che per react-dom.developement.js. Puoi ospitare i file al tuo posto per iniziare a lavorare con reactjs.

Nel caso in cui prevedi di utilizzare i file CDN, assicurati di mantenere l'attributo multiorigine, per evitare problemi tra domini. Il codice Reactjs non può essere eseguito direttamente nel browser e deve essere trasferito utilizzando Babel in JavaScript prima di essere eseguito nel browser.

Ecco lo script BabelJS che può essere utilizzato:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Ecco l'esempio funzionante di ReactJS che utilizza file cdn e script babeljs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Produzione:

Entreremo nei dettagli del codice nel prossimo capitolo, vediamo qui come funziona con i file CDN. Si dice che usare direttamente lo script babel non sia una buona pratica, e i nuovi arrivati possono semplicemente usarlo per imparare reactjs per ora. In produzione, dovrai installare react utilizzando il pacchetto npm.

Utilizzo dei pacchetti NPM

Assicurati di avere nodejs installato. Se non è installato, segui questo tutorial per nodejs (https://www.guru99.com/node-js-tutorial.html) installazione.

Una volta installato nodejs, crea una cartella reactproj/.

Per iniziare con l'impostazione del progetto, esegui il comando npm inizia.

Ecco come apparirà la struttura delle cartelle:

reactproj\
package.json

Ora installeremo i pacchetti di cui abbiamo bisogno.

Ecco l'elenco dei pacchetti per reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Apri il prompt dei comandi ed esegui i comandi sopra all'interno della cartella reactproj/.

Crea una cartella src / dove tutto il codice js arriverà in quella cartella. Tutto il codice per il progetto reactjs sarà disponibile nella cartella src/. Crea un file index.js e aggiungi import react e react-dom, come mostrato di seguito.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Abbiamo restituito il codice di base per reactjs. Ne spiegheremo i dettagli nel prossimo capitolo. Vogliamo visualizzare Ciao, dai tutorial di Guru99 e lo stesso viene dato all'elemento dom con id “root”. Viene preso dal file index.html, che è il file di avvio, come mostrato di seguito.

Crea una cartella public/ e aggiungi index.html come mostrato di seguito

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Il pacchetto react-scripts si occuperà di compilare il codice e di avviare il server per visualizzare il file html, ovvero index.html. È necessario aggiungere il comando in package.json che si occuperà di utilizzare gli script react per compilare il codice e avviare il server come mostrato di seguito:

 "scripts": {
    "start": "react-scripts start" 
  }

Dopo aver installato tutti i pacchetti e aggiunto il comando precedente, il file package.json finale è il seguente:

Pacchetto.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Per iniziare a testare reactjs esegui il comando

npm run start

C:\reactproj>npm run start		
> [email protected] start C:\reactproj		
> react-scripts start

Si aprirà il browser con l'URL http://localhost:3000/ come mostrato di seguito:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Utilizzeremo lo stesso processo anche per eseguire i file javascript nei prossimi capitoli. Aggiungi tutti i tuoi file js e .jsx nella cartella src/. La struttura del file sarà la seguente:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Come creare la prima configurazione del progetto React

Ecco una guida passo passo in questo tutorial ReactJS per iniziare con la prima applicazione React.

Passo 1) Importa i pacchetti di reazione.
1. Per iniziare con ReactJS, dobbiamo prima importare i pacchetti react come segue.

import React from 'react';	
import ReactDOM from 'react-dom';

2. Salva il file come index.js nella cartella src/

Passo 2) Scrivi codice semplice.
Scriveremo un semplice codice in questo tutorial React JS, in cui visualizzeremo il messaggio "Ciao, dai tutorial di Guru99!"

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render aggiungerà il tag all'elemento con id root. Ecco il file html che stiamo avendo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Passo 3) Compila il codice.

Successivamente in questo tutorial di React.js, dobbiamo compilare il codice per ottenere l'output nel browser.

Ecco la struttura delle cartelle:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Abbiamo aggiunto i comandi per compilare il file finale in package.json come segue:

"scripts": {
    "start": "react-scripts start"
  },

Per compilare il file finale eseguire il seguente comando:

npm run start

Quando esegui il comando sopra, compilerà i file e ti avviserà in caso di errori, se tutto sembra a posto, aprirà il browser ed eseguirà il file index.html su http://localhost:3000/index.html

Comando: npm esegui avvio:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

Passo 4) Controlla l'output.
L'URL http://localhost:3000 si aprirà nel browser una volta compilato il codice come mostrato di seguito:

Cos'è JSX?

JSX è un'estensione di javascript. È uno script modello in cui avrai la possibilità di usare HTML e Javascript insieme.

Ecco un semplice esempio di codice JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Perché abbiamo bisogno di JSX in React?

Per un'interfaccia utente, abbiamo bisogno di Html e ogni elemento nel dom avrà eventi da gestire, cambiamenti di stato, ecc.

Nel caso di React, ci consente di utilizzare Html e Javascript nello stesso file e di gestire i cambiamenti di stato nel dom in modo efficiente.

Espressioni in JSX

Ecco un semplice esempio di come utilizzare le espressioni in JSX.

Nei precedenti esempi di ReactJS, avevamo scritto qualcosa del tipo:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Ora modificheremo il codice precedente per aggiungere espressioni. Le espressioni vengono utilizzate all'interno di parentesi graffe {} e vengono espanse durante il runtime. Le espressioni in react sono le stesse delle espressioni javascript.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Proviamo ora lo stesso nel browser.

Puoi vedere che l'espressione {display} non è stata sostituita. React non sa cosa fare quando viene utilizzata un'espressione all'interno del file .js.

Aggiungiamo ora le modifiche e creiamo un file .jsx, come mostrato di seguito:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Abbiamo aggiunto il codice richiesto e utilizzeremo il file text.jsx in index.js.Vogliamo il h1tag variabile da utilizzare all'interno di script.js, quindi lo stesso viene esportato come mostrato sopra nel test.jsx

Ecco il codice modificato in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Per utilizzare test.jsx in index.js dobbiamo prima importarlo come mostrato di seguito:

import h1tag from './test.jsx';

Ora possiamo usare h1tag nel ReactDOM.render come mostrato di seguito:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Ecco l'output quando controlliamo lo stesso nel browser:

Cosa sono i componenti in ReactJS?

I componenti sono come funzioni javascript pure che aiutano a semplificare il codice suddividendo la logica in codice indipendente riutilizzabile.

Componenti come funzioni

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

Abbiamo creato una funzione chiamata Ciao che ha restituito il tag h1 come mostrato sopra. Il nome della funzione funge da elemento, come mostrato di seguito:

const Hello_comp = <Hello />;
export default Hello_comp;

Il componente Ciao viene utilizzato come tag Html, ovvero e assegnato a Ciao_comp variabile e lo stesso viene esportato utilizzando export.

Usiamo ora questo componente nel file index.js come mostrato di seguito:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ecco l'output nel browser:

Classe come componente

Ecco un esempio di ReactJS che utilizza una classe come componente.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Possiamo utilizzare il componente Hello nel file index.js come segue:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Il componente Hello viene utilizzato come tag Html, ovvero .

Ecco l'output dello stesso.

Cos'è uno stato in ReactJS?

Uno stato è un oggetto javascript simile agli oggetti di scena che contengono dati da utilizzare con il rendering reactjs. I dati sullo stato sono un oggetto privato e vengono utilizzati all'interno dei componenti all'interno di una classe.

Esempio di Stato

Ecco un esempio funzionante su come utilizzare lo stato all'interno di una classe.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Questo è ciò che otteniamo quando lo testiamo nel browser:

Cosa sono gli oggetti di scena in ReactJS?

Gli oggetti di scena sono proprietà da utilizzare all'interno di un componente. Fungono da oggetti globali o variabili che possono essere utilizzate all'interno del componente.

Prop al componente funzione

Ecco un esempio di passaggio di oggetti di scena a un componente di funzione.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Come mostrato sopra, abbiamo aggiunto msg attribuire a Componente. È possibile accedere allo stesso come oggetti di scena all'interno della funzione Hello, che è un oggetto che avrà il file msg dettagli dell'attributo e lo stesso viene utilizzato come espressione.

Il componente viene utilizzato in index.js come segue:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ecco l'output nel browser:

Props al componente di classe

Per accedere agli oggetti di scena in una classe possiamo farlo come segue:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Il msg l'attributo viene passato al componente in index.js come segue:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Questo è l'output nel browser:

Controlla anche: - Tutorial AngularJS per principianti: impara AngularJS passo dopo passo

Ciclo di vita di un componente

Il ciclo di vita di un componente è suddiviso nelle fasi di inizializzazione, montaggio, aggiornamento e smontaggio.

Ecco una spiegazione dettagliata su ciascun componente.

Un componente in reactjs ha le seguenti fasi:

Inizializzazione: Questa è la prima fase del ciclo di vita del componente.

Qui avrà le prop predefinite e lo stato al livello iniziale.

Montaggio: In questa fase il Componente viene renderizzato all'interno del dom. Abbiamo esposizione ai seguenti metodi nello stato di montaggio.

componenteDidMount(): viene chiamato anche quando il componente viene appena aggiunto al dom.

render(): hai questo metodo per tutti i componenti creati. Restituisce il nodo Html.

Aggiornanento: In questo stato il dom viene interagito da un utente e aggiornato. Ad esempio, inserisci qualcosa nella casella di testo, quindi le proprietà dello stato vengono aggiornate.

Di seguito sono riportati i metodi disponibili nello stato di aggiornamento:

dovrebbeComponentUpdate() : chiamato quando il componente viene aggiornato.

componenteDidUpdate() : dopo l'aggiornamento del componente.

Smontaggio: questo stato entra in gioco quando il componente non è richiesto o rimosso.

Di seguito sono riportati i metodi disponibili nello stato di smontaggio:

Componente willUnmount(): chiamato quando il componente viene rimosso o distrutto.

Esempio di lavoro

Ecco un esempio funzionante che mostra i metodi chiamati in ogni stato.

Esempio: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Quando controlli l'output nel browser

Nella console del browser ottieni:

Quando l'utente inserisce nella casella di testo:

Nella console vengono visualizzati i seguenti messaggi:

Lavorare con i moduli

In reactjs Html elementi di input come , e <select /> ha il proprio stato e deve essere aggiornato quando l'utente interagisce utilizzando il metodo setState().

In questo capitolo vedremo come lavorare con i form in reactjs.

Ecco un esempio funzionante:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Per i campi di input, dobbiamo mantenere lo stato, quindi per reagire viene fornito un metodo speciale chiamato setState, che aiuta a mantenere lo stato ogni volta che c'è un cambiamento.

Abbiamo utilizzato gli eventi onChange e onClick sulla casella di testo e sul pulsante di invio. Quando l'utente accede alla casella di testo, viene chiamato l'evento onChange e il campo del nome all'interno dello stato dell'oggetto state viene aggiornato come mostrato di seguito:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

L'output nel browser è il seguente:

Passaggio 1) Inserisci il tuo nome nella casella di testo:

Fare clic sul pulsante Invia

Lavorare con gli eventi in ReactJS

Lavorare con gli eventi in reactjs è uguale a come avresti fatto in Javascript. È possibile utilizzare tutti i gestori di eventi utilizzati in Javascript. Il metodo setState() viene utilizzato per aggiornare lo stato quando l'utente interagisce con qualsiasi elemento Html.

Ecco un esempio funzionante di come utilizzare gli eventi in reactjs.

eventi.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Per i campi di input, dobbiamo mantenere lo stato, quindi per reagire viene fornito un metodo speciale chiamato setState, che aiuta a mantenere lo stato ogni volta che c'è un cambiamento.

Abbiamo utilizzato gli eventi suCambia e onClick sulla casella di testo e sul pulsante. Quando l'utente inserisce nella casella di testo il file suCambia viene chiamato l'evento e il campo del nome all'interno dello stato dell'oggetto state viene aggiornato come mostrato di seguito:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Ecco l'output nel browser:

Quando un utente inserisce il nome:

Quando l'utente fa clic sul pulsante Clicca qui:

Lavorare con CSS in linea in ReactJS

Daremo un'occhiata a un esempio funzionante per comprendere il funzionamento dei CSS inline in reactjs.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Ho aggiunto il colore: stile "rosso" al tag h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

L'output nel browser è il seguente:

Puoi creare un oggetto con lo stile che desideri sull'elemento e utilizzare un'espressione per aggiungere stile, come mostrato nell'esempio sopra.

Lavorare con CSS esterni in ReactJS

Creiamo un css esterno, per questo creiamo una cartella css/ e aggiungiamo style.css al suo interno.

style.css

.h1tag {
color:red;
}

Aggiungi style.css al tuo file index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Ora aggiungiamo la classe al tag h1 nel file .jsx

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

All'attributo className vengono forniti i dettagli della classe. Ora proviamo nel browser.

Questo è ciò che vedi quando controlli il tag h1 nel browser:

Puoi vedere che class=" h1tag" è stato aggiunto con successo al tag h1.

Sommario

ReactJS è un front-end open source JavaLibreria di script per creare l'interfaccia utente. È gestita da Facebook e utilizzata da molte aziende oggi per lo sviluppo dell'interfaccia utente.
Le funzionalità principali di ReactJS includono JSX, componenti (componenti funzionali e componenti basati su classi), il ciclo di vita di un componente, oggetti di scena e supporto dello stato per un componente, lavorando con espressioni javascript.
La configurazione del progetto di ReactJS viene spiegata utilizzando i file CDN e anche utilizzando i pacchetti npm per creare il progetto.
JSX è un'estensione di Javascript. È uno script modello in cui avrai la possibilità di utilizzare Html e Javascript insieme.
I componenti sono come funzioni javascript pure che aiutano a semplificare il codice suddividendo la logica in codice indipendente riutilizzabile.
Uno stato è un oggetto javascript simile agli oggetti di scena che contengono dati da utilizzare con il rendering reactjs. I dati sullo stato sono un oggetto privato e vengono utilizzati all'interno dei componenti all'interno di una classe.
Gli oggetti di scena sono proprietà da utilizzare all'interno di un componente.
Il ciclo di vita di un componente è suddiviso nelle fasi di inizializzazione, montaggio, aggiornamento e smontaggio.
In reactjs elementi di input html come , e <select /> ha il proprio stato e deve essere aggiornato quando l'utente interagisce utilizzando il metodo setState().
Lavorare con gli eventi in reactjs è uguale a come avresti fatto in Javascript. È possibile utilizzare tutti i gestori di eventi utilizzati in Javascript. Il metodo setState() viene utilizzato per aggiornare lo stato quando l'utente interagisce con qualsiasi elemento Html.
ReactJS ti consente di lavorare con CSS esterni e CSS in linea utilizzando l'espressione javascript.

Controlla anche: - Le 70 migliori domande e risposte all'intervista React (aggiornata)

Potrebbe piacerti:

5 Migliori Corsi React con…

Cos'è ReactJS?

Caratteristiche di ReactJS

Vantaggi di ReactJS

Svantaggi di ReactJS

Utilizzo di ReactJS dalla CDN

Per sviluppatore

Per prod

ARTICOLI CORRELATI

Utilizzo dei pacchetti NPM

Come creare la prima configurazione del progetto React

Cos'è JSX?

Perché abbiamo bisogno di JSX in React?

Espressioni in JSX

Cosa sono i componenti in ReactJS?

Componenti come funzioni

Classe come componente

Cos'è uno stato in ReactJS?

Esempio di Stato

Cosa sono gli oggetti di scena in ReactJS?

Prop al componente funzione

Props al componente di classe

Ciclo di vita di un componente

Esempio di lavoro

Lavorare con i moduli

Lavorare con gli eventi in ReactJS

Lavorare con CSS in linea in ReactJS

Lavorare con CSS esterni in ReactJS

Sommario