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 é just componentes dentro de componentes.

Um component 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 main de um pequeno app React. A prévia à direita mostra seu app ao vivo enquanto você type. Vamos construir algo.

Desafio

Iniciante

Here está seu first React component, already escrito para você.

O que fazer:

Leia App.jsx: ele é uma function que returns JSX.
Pressione o botão Run.
Observe a prévia à direita render o que o component retornou.

That é todo o loop do React: um component returns JSX, e o React o coloca na tela. A partir da próxima lição, você escreverá o JSX por conta própria.

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>