Compreender a estrutura de um aplicativo React é crucial para o desenvolvimento e a programação eficazes. Neste guia, você aprenderá o básico sobre como um aplicativo React é estruturado e como você pode integrá-lo a um site. Veremos a estrutura do arquivo HTML de índice, o arquivo JavaScript correspondente e os conceitos básicos dos módulos JSX e ES6.
Principais conclusões
- O ficheiro de origem das aplicações React é index.html.
- O React usa o conceito de "nós raiz" como uma âncora para todos os componentes.
- O método createRoot é usado para criar um nó raiz no qual os elementos React são renderizados.
- JSX é uma extensão sintática para JavaScript que permite uma sintaxe semelhante à do HTML.
- Os módulos ES6 são importantes para estruturar o código em React.
Instruções passo a passo
1. entender o index.html
Quando se cria uma aplicação React, não se pode evitar olhar para o ficheiro index.html. Ele é o ponto de entrada para o código do seu aplicativo e carrega os scripts necessários. Em um arquivo típico, você verá uma div com o ID root. Esta DIV serve como nó raiz para toda a aplicação React.
2. importar os módulos necessários em main.jsx
Em main.jsx, que é carregado a partir de index.html, pode ver as importações. Aqui você importa React, ReactDOM e possivelmente CSS. Os módulos são necessários para criar a aplicação e garantir que pode utilizar as melhores funcionalidades disponíveis. Certifique-se de que importa o ReactDOM de react-dom/client.
3. Criar o nó raiz
Agora você precisa criar um nó raiz do React. Isso é feito usando o método createRoot. Você transfere isso para o elemento DOM que você definiu anteriormente em index.html. Acede-se à div com o ID root e inicia-se o nó raiz.
4. usando o método render
Depois de criar o nó raiz, você usa o método render. É aqui que passa os elementos JSX que devem ser renderizados. O JSX parece quase como HTML, mas é traduzido em JavaScript. Por exemplo, você poderia simplesmente renderizar um nó de texto como "Hello World".
5. Entendendo a sintaxe do JSX
O JSX é uma mistura de JavaScript e HTML. Isto significa que escreve código do tipo HTML em JavaScript. Permite-lhe conceber a estrutura da sua IU de uma forma simples e compreensível. No exemplo acima, escreveu um texto simples numa div. Este é o primeiro passo para criar um componente React.
6. Estrutura baseada em componentes
Recomenda-se a utilização de componentes para estruturar a aplicação. Em vez de apenas renderizar HTML, deve utilizar componentes React que importa para a sua aplicação. Isso não só melhora a legibilidade do seu código, mas também promove a reutilização. Por exemplo, recomenda-se criar um componente de aplicação e depois inseri-lo utilizando JSX.
7 Atualização do DOM e interatividade
Em seguida, é possível adicionar elementos interactivos, como botões que alteram valores. O React garante que o DOM é atualizado de forma eficiente, de modo a que apenas as partes necessárias da interface do utilizador sejam novamente renderizadas. Neste ponto, é possível ver como a interface do aplicativo reage quando os usuários interagem com ela.
8 Importar o componente da aplicação e renderizar
Embora tenhamos trabalhado principalmente com HTML simples nos exemplos anteriores, deve lembrar-se sempre que é mais eficiente dividir a sua IU em componentes. Pode importar o componente da aplicação para main.jsx e depois inseri-lo através de renderização. Isso o manterá dentro das melhores práticas do React.
Resumo
Com as etapas acima, você entendeu as estruturas e funções básicas de um aplicativo React. Agora você sabe como criar o nó raiz, usar JSX e importar componentes corretamente. Esse conhecimento forma uma base sólida para sua jornada no mundo do desenvolvimento em React.
