TPSIT

>

<

<Presentazione>

React js-Manelli Pinna Traverso

start >

>

>

INTRODUZIONE

ReactJS è una libreria open-source di JavaScript sviluppata da Facebook. Essa viene utilizzata principalmente per la creazione di interfacce utente (UI) per le applicazioni web.

>

>

Caratteristiche

Una delle carattarestiche più interessanti della libreria react riguarda la sua creazione, infatti react è la prima libreria ad essere nata con un obbiettivo specifico. L'obbiettivo di questa libreria è di permettere di costruire interfacce utente dinamiche e sempre più complesse rimanendo comunque semplice e intuitiva da utilizzare.

>

>

Su cosa si basa?

La filosofia di ReactJS si basa sulla creazione di componenti riutilizzabili, ovvero parti specifiche dell'interfaccia utente che possono essere utilizzate in diverse parti dell'applicazione. Questi componenti vengono scritti in un linguaggio simile ad HTML chiamato JSX e possono essere gestiti attraverso la manipolazione dello stato.

>

>

Gestione dello stato

La gestione dello stato in ReactJS è un aspetto fondamentale per creare applicazioni web dinamiche e reattive. Lo stato viene gestito all'interno dei componenti e può essere aggiornato in modo asincrono attraverso la chiamata di funzioni specifiche . Questa gestione dello stato consente di creare applicazioni web che rispondono in tempo reale alle interazioni dell'utente.

>

>

PUNTO di FORZA

La forza di React in confronto con altre librerie è quella di consentire l'uso di un approccio dichiarativo simile all'HTML per definire i componenti.

>

>

Componenti in react

Cos'è un componente

Come si crea

cos'è un componente?

I Componenti sono delle parti di codice in grado di suddividere la UI in parti indipendenti, riutilizzabili.Essi possono essere definiti come funzioni JavaScript: accettano in input dati e ritornano elementi React che descrivono cosa dovrebbe apparire sullo schermo.

Come creare un componente

Passo n°1

La creazione di un componente in react è abbastanza semplice. Il primo passo da fare è quello di includere la libreria di react all'interno del nostro file js,

import React from 'react';

Passo n°2

Dopo aver incluso la nostra libreria possiamo creare una funzione con all'interno return passandolo come valore di output il div.

function App() { return ( <div> <HelloWorld /> </div> ); }

>

>

Cosa ci permette di fare react js

React ci permette di passare informazioni ai componenti Web utilizzando:

• un oggetto che ne rappresenta lo stato : un insieme di dati che modificati danno luogo a un aggiornamento del componente stesso.
• oppure specificando una o più proprietà che costituiscono valori immutabili per i quali non è prevista alcuna alterazione, utili ad esempio per configurare i componenti o per indicare valori di default per lo stato.

>

>

Gestione degli eventi in react js

La gestione degli eventi consente di rendere interattivo il componente React, rispondendo alle azioni dell'utente e aggiornando l'interfaccia grafica di conseguenza, agendo sullo stato del componente stesso. A fronte di una variazione dello stato, generalmente tramite la gestione di un evento che si verifica a seguito di un'azione dell'utente, React invoca la funzione render() e verifica la necessità di apportare modifiche alla parte del DOM che costituisce la rappresentazione del componente all'interno della pagina Web.

>

>

Cos'è jsx

JSX (JavaScript XML) è un'estensione di sintassi di JavaScript che consente di scrivere del codice simile a HTML all'interno di JavaScript. JSX è comunemente utilizzato in React per definire la struttura e il layout dei componenti.

>

>

Differenze nella gestione degli eventi

<button onClick={funzione}> evento </button>

<button onclick="funzione()"> evento</button>

>

>

Svantaggi

Vantaggi

Grazie per l'ascolto!

>

<