Tutorial Básico de React

Este tutorial irá guiá-lo através dos conceitos básicos do React, uma biblioteca JavaScript para construir interfaces de usuário.

O que é React?

React é uma biblioteca JavaScript declarativa, eficiente e flexível para construir interfaces de usuário (UIs). Ele permite que você crie UIs complexas a partir de pequenas e isoladas peças de código chamadas “componentes”.

Configurando um Projeto React

A maneira mais fácil de começar um novo projeto React é usando o create-react-app.

Instale o Node.js e o npm: Se você ainda não os tiver, baixe e instale-os em nodejs.org.
Crie um novo projeto React: Abra seu terminal e execute o seguinte comando:
```
npx create-react-app meu-app-react
```
Navegue até o diretório do projeto:
```
cd meu-app-react
```
Inicie o servidor de desenvolvimento:
```
npm start
```
Isso abrirá uma nova aba no seu navegador com o seu aplicativo React em execução.

Componentes, Props e State

Componentes

Os componentes são os blocos de construção do React. Eles são como funções JavaScript que aceitam entradas (chamadas “props”) e retornam elementos React que descrevem o que deve aparecer na tela.

Existem dois tipos de componentes:

Componentes de Função: A maneira mais simples de definir um componente.
```
function BemVindo(props) {
  return <h1>Olá, {props.nome}</h1>;
}
```
Componentes de Classe: Uma maneira mais antiga de definir componentes, que ainda é usada em alguns projetos.
```
class BemVindo extends React.Component {
  render() {
    return <h1>Olá, {this.props.nome}</h1>;
  }
}
```

Props

Props (abreviação de “propriedades”) são como os componentes se comunicam. Eles são passados de um componente pai para um componente filho.

const elemento = <BemVindo nome="Sara" />;

State

O state (estado) é usado para armazenar dados que mudam ao longo do tempo. Diferente das props, o estado é gerenciado dentro do componente.

Exemplo: "Olá, Mundo!"

Vamos criar um componente simples que exibe "Olá, Mundo!".

Abra o arquivo src/App.js no seu projeto React.
Substitua o conteúdo pelo seguinte código:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Olá, Mundo!</h1>
    </div>
  );
}

export default App;

Exemplo: Contador

Vamos criar um componente de contador que demonstra o uso do estado.

Abra o arquivo src/App.js.
Substitua o conteúdo pelo seguinte código:

import React, { useState } from 'react';

function App() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <button onClick={() => setContador(contador + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

export default App;

Neste exemplo, useState é um Hook que permite adicionar estado a componentes de função.

Conclusão

Este foi um tutorial básico sobre o React. Para saber mais, confira a documentação oficial do React.