[Sugestão] Resumo da aula passada

Nesta aula, exploramos a pasta "public" do projeto React e aprendemos a criar o nosso primeiro componente.

Pasta "public"

• index.html: Arquivo HTML principal da aplicação.
• Alteração do <title> de "React App" para "Alura Studies".
• Contém um <div id="root"></div> que serve como ponto de montagem do React.
• favicon.ico: Ícone da aba do navegador.
• logo192.png e logo512.png: Logos usadas em diferentes resoluções.
• manifest.json: Define como a aplicação se comporta em dispositivos móveis.
• robots.txt: Arquivo que informa aos motores de busca quais partes do site devem ser indexadas.

Criando o Primeiro Componente

• Criamos uma pasta chamada "components" dentro da pasta "src" para organizar os componentes.
• Dentro de "components", criamos a pasta "Botao" com um arquivo "index.tsx".
• Usamos class components para criar o componente:

import React from 'react';

class Botao extends React.Component {
  render() {
    return (
      <button>
        Botão
      </button>
    );
  }
}

export default Botao;

Utilizando o Componente no App

• Importamos o componente no arquivo "App.tsx":

import React from 'react'; import Botao from './components/Botao';

function App() {
  return (
    <div className="App">
      <Botao />
    </div>
  );
}

export default App;

• Renderizamos o componente como uma tag HTML.

Boas Práticas no React

• DRY (Don't Repeat Yourself): Evita a repetição de código, permitindo reutilizar componentes em diferentes partes da aplicação.
• SRP (Single Responsibility Principle): Cada componente deve ter uma única responsabilidade, tornando o código mais modular e fácil de manter.