Tutorial React, Parte 5: Introdução a um aplicativo TODO, estilo básico

Hoje, na próxima parte da tradução do curso de treinamento React, começaremos o trabalho no primeiro projeto de treinamento e falaremos sobre os conceitos básicos de estilo.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 11. Oficina. Aplicação TODO. Estágio número 1

→ Original

Nesta lição, começaremos o trabalho em nosso primeiro projeto de treinamento - o aplicativo TODO. Classes semelhantes serão enquadradas como oficinas comuns. Primeiro, você terá uma tarefa, cuja implementação será necessária para navegar no material estudado anteriormente, após o qual será apresentada uma solução.

Trabalharemos neste aplicativo por algum tempo; portanto, se você usar o create-react-app , é recomendável criar um projeto separado para ele.

▍Job

• Crie um novo aplicativo React.
• Exiba o componente <App /> na página usando o arquivo index.js .
• O componente <App /> deve gerar código para exibir 3-4 sinalizadores com algum texto após eles. O texto pode ser formatado usando as tags <p> ou <span> . O que você pode fazer deve se parecer com uma lista de tarefas em que algumas entradas já foram feitas.

▍Solução

O código para o arquivo index.js :

 import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(   <App />,   document.getElementById('root') ) 

App.js arquivo App.js

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

Aqui está a aparência do projeto padrão create-react-app react create-react-app no VSCode nesta fase do trabalho.


Projeto no VSCode

É isso que nosso aplicativo agora exibe na página.


Aparência do aplicativo no navegador

Hoje, demos o primeiro passo em direção a um aplicativo TODO. Mas o que exibe esse aplicativo na tela não parece tão agradável quanto o que apareceu nas páginas de nossas experiências anteriores. Portanto, na próxima lição, focaremos no estilo dos elementos.

Lição 12. Estilo em React usando classes CSS

→ Original

Agora, trabalharemos no aplicativo criado como resultado do workshop na lição 10. Aqui está o que o aplicativo exibido na tela.


Página do aplicativo no navegador

Gostaríamos de estilizar os elementos da página. O React possui muitas abordagens de estilo. Agora estamos usando a abordagem com os princípios dos quais você provavelmente já conhece. Consiste na aplicação de classes CSS e regras CSS atribuídas a essas classes. Vamos dar uma olhada na estrutura deste projeto e pensar sobre quais elementos precisam ser atribuídos às classes que serão usadas para estilizá-los.


Projeto no VSCode

O arquivo index.js responsável por renderizar o componente App . O componente App exibe um elemento <div> , que contém três outros componentes - Header , MainComponent e Footer . E cada um desses componentes simplesmente exibe um elemento JSX com texto. É nesses componentes que estaremos envolvidos no estilo. Vamos trabalhar no componente Header . Lembre-se de que, nesta fase de seu trabalho, seu código se parece com o seguinte:

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

Normalmente, quando eles trabalham com código HTML e desejam atribuir uma classe a um determinado elemento, isso é feito usando o atributo class . Suponha que vamos atribuir esse atributo a um elemento <header> . Mas aqui não devemos esquecer que não estamos trabalhando com código HTML, mas com JSX. E aqui não podemos usar o atributo de class (na verdade, você pode usar o atributo com esse nome, mas isso não é recomendado). Em vez disso, um atributo chamado className . Muitas publicações dizem que o motivo disso é porque class é uma palavra-chave JavaScript reservada. Mas, de fato, o JSX usa a API JavaScript comum para trabalhar com o DOM. Para acessar elementos usando essa API, é usado um design familiar do seguinte formulário:

 document.getElementById("something") 

Para adicionar uma nova classe a um elemento, proceda da seguinte maneira:

 document.getElementById("something").className += " new-class-name" 

Em uma situação semelhante, é mais conveniente usar a propriedade dos elementos classList , em particular, porque possui métodos convenientes para adicionar e remover classes, mas, nesse caso, não importa. E o importante é que a propriedade className seja usada className .

De fato, para atribuir classes a elementos JSX, basta saber que, onde a palavra-chave da class é usada em HTML, a palavra-chave className deve ser usada no JSX.

Atribua a classe navbar ao navbar <header> :

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

Agora, na pasta de components , crie o arquivo Header.css . Coloque o seguinte código nele:

 .navbar { background-color: purple; } 

Agora conecte esse arquivo ao Header.js com o comando import "./Header.css" (com este comando, expandindo os recursos do comando de import padrão, informamos ao empacotador do Webpack que usamos nos projetos criados usando as ferramentas create-react-app que queremos use Header.css em Header.js ).

É assim que ficará no VSCode.


Arquivo de estilo e sua conexão no VSCode

Tudo isso levará ao fato de que a aparência da linha superior exibida pelo aplicativo na página muda.


Alterar o estilo da linha superior

Aqui usamos um estilo extremamente simples. Header.css conteúdo do arquivo Header.css pelo seguinte:

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

Além disso, abra o arquivo index.css já existe no projeto e coloque o seguinte estilo:

 body {   margin: 0; } 

index.js esse arquivo no index.js com o comando import "./index.css" . Como resultado, a página do aplicativo assumirá o formato mostrado na figura a seguir.


Alterar o estilo da página

Observe que os estilos especificados em index.css afetaram todos os elementos da página. Se você usar, por exemplo, algum tipo de editor online para experimentação, o trabalho com arquivos de estilo poderá ser organizado de uma maneira especial. Por exemplo, nesse editor, pode haver um único arquivo de estilo padrão que é automaticamente conectado à página; as regras CSS descritas nas quais serão aplicadas a todos os elementos da página. Em nosso exemplo simples, seria totalmente possível colocar todos os estilos em index.css .

Na verdade, supondo que você já esteja familiarizado com CSS, podemos dizer que aqui usamos exatamente o mesmo código CSS usado para estilizar elementos HTML comuns. O principal aspecto a ser lembrado ao estilizar elementos com classes no React é que, em vez do atributo do elemento de class usado em HTML, className usado.

Além disso, deve-se observar que as classes só podem ser atribuídas aos elementos React - como <header> , <p> ou <h1> . Se você tentar atribuir um nome de classe a uma instância de componente - como <Header /> ou <MainContent /> , o sistema se comportará de maneira bem diferente do que você poderia esperar. Falaremos sobre isso mais tarde. Enquanto isso, lembre-se de que as classes nos aplicativos React são atribuídas a elementos, não a componentes.

Aqui está outra coisa que você pode achar difícil de começar com o React. Estamos falando de elementos de estilo que têm diferentes níveis de hierarquia na página. Digamos que isso acontece quando as tecnologias CSS Flexbox ou CSS Grid são usadas para estilizar. Nesses casos, por exemplo, ao usar o layout Flex, você precisa saber qual entidade é o contêiner flex e quais entidades são elementos flex. Ou seja, pode ser difícil entender - como exatamente estilizar elementos, a quais elementos aplicar certos estilos. Suponha, por exemplo, que o elemento <div> do nosso componente App deva ser um contêiner flexível:

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Nesse caso, os elementos flexíveis são exibidos por meio dos componentes Header , MainContent e Footer . Veja, por exemplo, o código do componente Header :

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

O elemento <header> deve ser um descendente direto do elemento <div> do componente App . Deve ser estilizado como um elemento flexível.

Para entender a estilização de tais construções, é necessário considerar qual será o código HTML gerado pelo aplicativo. Abriremos a guia Elements das ferramentas de desenvolvedor do Chrome para a página que aparece no navegador ao trabalhar com um projeto criado usando o create-react-app .


Código da Página

O elemento <div> com a root identificadora é o elemento da página index.html que nos referimos no método ReactDOM.render() chamado no arquivo index.js . A marcação gerada pelo componente App é exibida, a saber, o próximo elemento <div> , que contém os elementos <header> , <main> e <footer> formados pelos componentes correspondentes.

Ou seja, analisando o código do aplicativo React fornecido acima, podemos assumir que a construção <Header /> no componente App é substituída pela <header className="navbar">This is the header</header> . Compreender esse fato permite que você use esquemas complexos para estilizar elementos da página.

Isso conclui nossa primeira introdução ao estilo de aplicativos React. É recomendável que você experimente o que acabou de descobrir. Por exemplo, tente <MainContent /> elementos gerados pelos componentes <MainContent /> e <Footer /> .

Sumário

Hoje, começamos a desenvolver nosso primeiro projeto de treinamento - aplicativos TODO, e também nos familiarizamos com o estilo de aplicativos React usando classes CSS. Na próxima vez, falaremos sobre os recursos de estilo de código aos quais o autor deste curso adere, bem como algumas coisas sobre JSX e JavaScript.

Caros leitores! Você já tem uma idéia para um aplicativo que gostaria de criar usando o React?