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 , , e . Em seguida, combine-os em telas inteiras, páginas, e aplicativos.
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 . Exibindo uma lista? Tente um array . Aprender React é aprender programação.
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.
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} />;
}
19 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.
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.
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.
É 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.