logo by @sawaratsuki1004

React

La libreria per le interfacce utente web e native

Crea interfacce utente dai componenti

React ti permette di creare interfacce utente a partire da componenti individuali. Crea i tuoi componenti React come Thumbnail, LikeButton, e Video. Poi combinali per creare interfacce, pagine ed app.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

Sia che lavoriate in solitaria o con migliaia di altri sviluppatori, utilizzare React è sempre lo stesso. È stato progettato per permettervi di combinare facilmente componenti scritti da persone, team e organizzazioni indipendenti.

Scrivi componenti con logica e markup

I componenti React sono funzioni JavaScript. Vuoi mostrare del contenuto in modo condizionale? Usa un if. Vuoi mostrare una lista? Prova map(). Imparare React è imparare a programmare.

VideoList.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

Questa sintassi di markup è chiamata JSX. È una sintassi JavaScript estesa popularizzata da React. Mettere JSX markup vicino alla logica di rendering relativa rende i componenti React facili da creare, mantenere e cancellare.

Aggiungi interattività ovunque tu abbia bisogno

I componenti React ricevono dati e ritornano quello che dovrebbe apparire sullo schermo. Puoi passargli nuovi dati in risposta ad una interazione, come quando l'utente digita in un input. React aggiornerà lo schermo per corrispondere ai nuovi dati.

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}

Non devi costruire tutta la tua pagina in React. Aggiungi React alla tua pagina HTML esistente e renderizza componenti React interattivi ovunque.

Vai full-stack con un framework

React è una libreria. Ti permette di mettere insieme componenti, ma non prescrive come fare routing e data fetching. Per costruire un'applicazione intera con React, ti consigliamo un framework full-stack come Next.js o Remix.

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}

React è anche un'architettura. I framework che la implementano ti permettono di recuperare dati in componenti asincroni che funzionano sul server o addirittura durante la compilazione. Leggi dati da un file o un database e passali ai tuoi componenti interattivi.

Usa il meglio di ogni piattaforma

Le persone amano le app web e native per motivi diversi. React ti permette di creare app web e native utilizzando le stesse competenze. Si basa sulle forze uniche di ogni piattaforma per far sentire le tue interfacce proprio come dovrebbero su ogni piattaforma.

example.com

Adatta la tua app web

Le persone si aspettano che le pagine delle app web carichino velocemente. Sul server, React ti permette di iniziare a inviare HTML mentre stai ancora recuperando i dati, riempiendo progressivamente il contenuto rimanente prima che venga caricato alcun codice JavaScript. Sul client, React può utilizzare le API standard del web per mantenere la tua interfaccia utente reattiva anche durante il rendering.

3:30 AM

Vai veramente nativo

Le persone si aspettano che le app native si comportino come la piattaforma d'origine. React Native e Expo ti permettono di creare app in React per Android, iOS e molto altro. Sono native perché le loro UI sono veramente native. Non è una web view, i tuoi componenti React vengono renderizzati come veri componenti Android e iOS forniti dalla piattaforma.

Con React, puoi essere uno sviluppatore web e nativo. Il tuo team può rilasciare su molte piattaforme senza sacrificare l'esperienza utente. La tua organizzazione può superare le barriere tra le piattaforme, e formare team che possiedono intere funzionalità end-to-end.

Aggiorna quando il futuro è pronto

React approccia i cambiamenti con cautela. Ogni commit di React viene testato su superfici critiche per il business con oltre un miliardo di utenti. Più di 100.000 componenti React di Meta aiutano a validare ogni strategia di migrazione.

Il team di React è sempre alla ricerca di modi per migliorare React. Alcune ricerche richiedono anni per dare i loro frutti. React ha un alto livello di qualità per prendere in considerazione un'idea di ricerca per la produzione. Solo approcci provati diventano parte di React.

Accedi a una comunitàdi milioni

Non sei solo. Due milioni di sviluppatori da tutto il mondo visitano la documentazione di React ogni mese. React è qualcosa che le persone ed i team possono trovare accordo.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

Ecco perché React è molto di più di una libreria, un'architettura o un ecosistema. React è una comunità. È un luogo dove puoi chiedere aiuto, trovare opportunità e incontrare nuovi amici. Incontrerai sia sviluppatori che designer, principianti e esperti, ricercatori e artisti, insegnanti e studenti. Le nostre esperienze possono essere molto diverse, ma React ci permette di creare interfacce utente insieme.

logo by @sawaratsuki1004

Benvenuto nella comunità React

Inizia qui