Tutorial Reagir Parte 6: Alguns recursos do curso, JSX e JavaScript

Hoje estamos publicando a continuação do curso de treinamento React. Aqui falaremos sobre alguns recursos do curso, em particular, sobre o estilo do código. Aqui falamos com mais detalhes sobre o relacionamento entre JSX e JavaScript.



→ 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 13. Sobre alguns recursos do curso

→ Original

Antes de continuarmos, gostaria de falar um pouco sobre alguns dos recursos do código que demonstro neste curso. Você deve ter notado que ponto e vírgula geralmente não é usado no código. Por exemplo, como você pode ver, em exemplos como o seguinte, eles não são:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

Você pode estar acostumado a ponto e vírgula sempre que possível. Então, por exemplo, as duas primeiras linhas do fragmento de código anterior ficariam assim:

 import React from "react"; import ReactDOM from "react-dom"; 

Recentemente, decidi que ficaria sem eles; como resultado, recebo o código que você vê nos exemplos. Obviamente, existem construções em JavaScript que não podem ficar sem ponto e vírgula. Digamos, ao descrever um loop for , cuja sintaxe é assim:

 for ([]; []; [ ]) 

Mas na maioria dos casos, você pode ficar sem ponto e vírgula no final das linhas. E a ausência deles no código não interferirá em seu trabalho. Na verdade, a questão de usar ponto e vírgula no código é uma questão de preferências pessoais do programador.

Outro recurso do código que estou escrevendo é que, embora o ES6 permita tecnicamente que você use funções de seta nos casos em que as funções são declaradas usando a palavra-chave function , eu não o uso.

Por exemplo, o código acima pode ser reescrito assim:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

Mas eu não estou acostumado. Acredito que as funções de seta são extremamente úteis em certos casos em que os recursos dessas funções não interferem na operação correta do código. Por exemplo, quando eles geralmente usam funções anônimas ou quando escrevem métodos de classe. Mas eu prefiro usar recursos tradicionais. Muitos, ao descrever componentes funcionais, usam funções de seta. Concordo que essa abordagem tem vantagens sobre o uso de designs tradicionais. Ao mesmo tempo, não procuro impor nenhuma maneira específica de declarar componentes funcionais.

Lição 14. JSX e JavaScript

→ Original

Na próxima lição, falaremos sobre estilos internos. Antes de prosseguir para esses tópicos, precisamos esclarecer alguns recursos da interação entre JavaScript e JSX. Você já sabe que, usando os recursos do React, podemos, a partir do código JavaScript comum, retornar construções que se assemelham à marcação HTML normal, mas são código JSX. Isso acontece, por exemplo, no código de componentes funcionais.

E se houver uma determinada variável cujo valor precise ser substituído no código JSX retornado pelo componente funcional?

Suponha que tenhamos um código como este:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Adicione ao componente funcional algumas variáveis ​​que contêm o nome e o sobrenome do usuário.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

Agora queremos que o componente funcional retorne não seja um cabeçalho de primeiro nível com o texto Hello world! , e um cabeçalho contendo uma saudação como Hello Bob Ziroll! que é formado usando as variáveis ​​disponíveis no componente.

Vamos tentar reescrever o que o componente retorna, assim:

 <h1>Hello firstName + " " + lastName!</h1> 

Se você observar o que aparece na página após o processamento desse código, verifica-se que ele não parece o que precisamos. Ou seja, o texto Hello firstName + " " + lastName! . Ao mesmo tempo, se o projeto padrão criado pelas ferramentas create-react-app for usado para executar o exemplo, seremos avisados ​​de que as constantes firstName e lastName recebem valores que não são usados ​​em nenhum lugar. É verdade que isso não impedirá que a página de texto apareça exatamente como foi retornada pelo componente funcional, sem substituir, em vez do que nos pareceu, os nomes das variáveis ​​e seus valores. O sistema considera os nomes das variáveis ​​neste formulário como texto sem formatação.

Vamos perguntar como tirar proveito do JavaScript no código JSX. De fato, fazer isso é bastante simples. No nosso caso, basta incluir o que deve ser interpretado como código JavaScript entre chaves. Como resultado, o que o componente retorna terá a seguinte aparência:

 <h1>Hello {firstName + " " + lastName}!</h1> 

Ao mesmo tempo, o texto Hello Bob Ziroll! . Você pode usar construções JavaScript regulares nessas partes do código JSX, destacadas com chaves. Aqui está o que o código produzirá no navegador:


Uma página com marcação gerada por JSX e JavaScript

Como ao trabalhar com strings em condições modernas, os recursos do ES6 são usados ​​principalmente, reescrevemos o código usando-os. Ou seja, estamos falando de literais de modelo desenhados usando backticks ( ` ` ). Essas cadeias de caracteres podem conter construções no formato ${} . O comportamento padrão dos literais de modelo envolve o cálculo das expressões contidas em chaves e a conversão do que acontece com uma sequência. No nosso caso, ficará assim:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

Observe que o nome e o sobrenome são separados por um espaço, que é interpretado aqui como um caractere regular. O resultado da execução desse código será o mesmo mostrado acima. Em geral, a coisa mais importante que você deve entender agora é que o que está incluído entre chaves localizadas no código JSX é JS comum.

Considere outro exemplo. Ou seja, reescrevemos nosso código para que, se for chamado pela manhã, ele exibirá o texto Good morning , se à tarde - Good afternoon e se à noite - Good night . Para começar, escreveremos um programa que relata que horas são. Aqui está o código do componente funcional do App que resolve esse problema:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

Aqui, uma nova instância do objeto Date é criada. O JSX usa código JavaScript, graças ao qual descobrimos chamando o método date.getHours() , que é agora uma hora, após o qual, calculando o restante da divisão desse número por 12 , convertemos o tempo para um formato de 12 horas. De maneira semelhante, verificando o tempo, podemos formar a linha de que precisamos. Por exemplo, pode ser assim:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

Existe uma variável timeOfDay e, analisando a hora atual usando a construção if , descobrimos a hora do dia e a escrevemos nessa variável. Depois disso, usamos a variável no componente retornado pelo código JSX.

Como sempre, é recomendável experimentar o que aprendemos hoje.

Sumário

Nesta lição, falamos sobre alguns dos recursos de estilo de código usados ​​neste curso, bem como a interação de JSX e JavaScript. O uso do código JavaScript no JSX abre grandes oportunidades, cuja utilidade prática sentiremos na próxima lição, quando trataremos dos estilos internos.

Caros leitores! Você usa ponto e vírgula no seu código JavaScript?