O que é o React?

Parte da seção Fundamentos do Journey de React da Coddy. Lição 1 de 42.

React é a biblioteca mais popular do mundo para criar interfaces de usuário. Facebook, Netflix, Airbnb: as partes interativas da web que você usa todos os dias são construídas com ela.

A ideia principal é simples: em vez de escrever uma página gigante, você cria pequenas partes reutilizáveis chamadas componentes. Um botão é um componente. Um cartão de perfil é um componente. Uma página inteira é apenas componentes dentro de componentes.

Um componente não é nada assustador: é uma função JavaScript que retorna o que deve aparecer na tela:

function App() {
    return <h1>Hello, React!</h1>;
}

Aquela coisa parecida com HTML dentro do JavaScript é chamada de JSX. Ela permite descrever a tela exatamente onde a lógica está. O React pega o que seus componentes retornam e mantém a página real sincronizada. Você descreve o que quer, e o React descobre como atualizar o navegador.

Neste curso, você editará App.jsx, o componente principal de um pequeno aplicativo React. A prévia à direita mostra seu aplicativo ao vivo enquanto você digita. Vamos construir algo.

Desafio

Iniciante

Aqui está seu primeiro componente React, já escrito para você.

O que fazer:

Leia App.jsx: é uma função que retorna JSX.
Pressione o botão Executar.
Veja a prévia à direita renderizar o que o componente retornou.

Esse é todo o ciclo do React: um componente retorna JSX, e o React o coloca na tela. A partir da próxima lição, você mesmo escreverá o JSX.

Experimente você mesmo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>