React

A biblioteca para web e interfaces de usu√°rio nativas

Crie interfaces de usu√°rio a partir de componentes

O React permite que você crie interfaces de usuário a partir de peças individuais chamadas de componentes. Crie seus próprios componentes React como Thumbnail, LikeButton, e Video. Em seguida, combine-os em telas inteiras, páginas, e aplicativos.

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

Quer voc√™ trabalhe sozinho ou com milhares de outros desenvolvedores, √© poss√≠vel usar o React da mesma maneira. Ele foi projetado para permitir que voc√™ combine componentes escritos por pessoas, equipes e organiza√ß√Ķes independentes.

Escrever componentes com código e marcação

Componentes React s√£o fun√ß√Ķes JavaScript. Quer mostrar alguns conte√ļdos condicionalmente? Utilize if. Exibindo uma lista? Tente um array map(). Aprender React √© aprender programa√ß√£o.

VideoList.js

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

Essa sintaxe de tags √© chamada de JSX. √Č uma extens√£o de sintaxe JavaScript popularizada pelo React. Colocar tags JSX em conjunto com a l√≥gica de renderiza√ß√£o relacionada torna os componentes do React f√°ceis de criar, manter e excluir.

Adicione interatividade onde você precisar

Os componentes do React recebem dados e retornam o que deve aparecer na tela. Você pode passar a eles novos dados em resposta a uma interação, como quando o usuário digita em uma entrada. O React atualizará a tela pra corresponder aos novos dados.

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}‚ÄĚ`} />
</>
);
}

Você não precisa construir sua página inteira em React. Adicione React à sua página HTML existente e renderize componentes React interativos em qualquer lugar nela.

Full-stack com um framework

React é uma biblioteca. Ele permite que você junte componentes, mas não prescreve como fazer roteamento e busca de dados. Para construir um aplicativo inteiro com React, recomendamos um framework React full stack como Next.js ou 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 também é uma arquitetura. Os frameworks que o implementam permitem buscar dados em componentes assíncronos que rodam no servidor ou até mesmo durante o build. Leia os dados de um arquivo ou banco de dados e passe-os para seus componentes interativos.

Use o melhor de cada plataforma

As pessoas adoram aplicativos da Web e nativos por diferentes motivos. O React permite criar aplicativos da web e aplicativos nativos usando as mesmas habilidades. Ele se baseia nos pontos fortes exclusivos de cada plataforma para permitir que suas interfaces pareçam perfeitas em todas as plataformas.

example.com

Mantenha-se fiel à web

As pessoas esperam que as p√°ginas de aplicativos da web sejam carregadas rapidamente. No servidor, o React permite iniciar o streaming de HTML enquanto ainda est√° buscando dados, preenchendo progressivamente o conte√ļdo restante antes que qualquer c√≥digo JavaScript seja carregado. No cliente, o React pode usar APIs da Web padr√£o para manter sua UI responsiva mesmo no meio da renderiza√ß√£o.

2:23 PM

Torne-se verdadeiramente nativo

As pessoas esperam que os aplicativos nativos se pare√ßam com sua plataforma. React Native e Expo permite que voc√™ crie aplicativos em React para Android, iOS e muito mais. Eles parecem nativos porque suas interfaces de usu√°rio s√£o realmente nativas. N√£o √© uma visualiza√ß√£o da Web. Seus componentes React renderizam visualiza√ß√Ķes reais de Android e iOS fornecidas pela plataforma.

Com React, você pode ser um desenvolvedor web e nativo. Sua equipe pode fazer deploy para várias plataformas sem sacrificar a experiência do usuário. Sua organização pode unir os silos de plataforma e formar equipes que possuem funcionalidades de ponta a ponta.

Atualize quando o futuro estiver pronto

React aborda as mudanças com cuidado. Cada commit do React é testado em superfícies críticas para os negócios com mais de bilhão de usuários. Mais de 100.000 componentes React na Meta ajudam a validar todas as estratégias de migração.

A equipe do React está sempre pesquisando como melhorar o React. Algumas pesquisas levam anos para compensar. O React tem um alto padrão para colocar uma ideia de pesquisa em produção. Somente abordagens comprovadas se tornam parte do React.

Junte-se a uma comunidade de milh√Ķes

Voc√™ n√£o est√° sozinho. Dois milh√Ķes de desenvolvedores de todo o mundo vistam os documentos do React todos os meses. React √© algo em que pessoas e equipes podem concordar.

Pessoas cantando karaokê no React Conf
Sunil Pai falando no React India
Uma conversa de corredor entre duas pessoas no React Conf
Uma conversa de corredor no React India
Elizabet Oliveira falando no React Conf
Pessoas tirando uma selfie em grupo no React India
Nat Alison falando no React Conf
Organizadores cumprimentando os participantes no React India

√Č por isso que o React √© mais do que uma biblioteca, uma arquitetura, ou mesmo um ecossistema. React √© uma comunidade. √Č um lugar onde voc√™ pode pedir ajuda, encontrar oportunidades e fazer novos amigos. Voc√™ conhecer√° desenvolvedores e designers, iniciantes e especialistas, pesquisadores e artistas, professores e alunos. Nossas origens podem ser muito diferentes, mas o React nos permite criar interfaces de usu√°rio juntos.

Bem-vindo à
comunidade React

Iniciar