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.

10:45 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