logo by @sawaratsuki1004

React

La libreria per le interfacce utente web e native

Impara ReactAPI di Riferimento

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>
  );
}

My video

Video description

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>
  );
}

3 Videos

First video

Video description

Second video

Video description

Third video

Video description

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}”`} />
    </>
  );
}
example.com/videos.html

React Videos

A brief history of React

5 Videos

React: The Documentary

The origin story of React

Rethinking Best Practices

Pete Hunt (2013)

Introducing React Native

Tom Occhino (2015)

Introducing React Hooks

Sophie Alpert and Dan Abramov (2018)

Introducing Server Components

Dan Abramov and Lauren Tan (2020)

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

Aggiungi React alla tua pagina

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 React Router.

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} />;
}
example.com/confs/react-conf-2021