Tutorial React - Parte 1: Visão geral do curso, React, ReactDOM e razões de popularidade do JSX

Apresentamos as 5 primeiras lições do curso de treinamento para iniciantes do React . O curso de inglês original, composto por 48 lições, é publicado na plataforma Scrimba.com. Os recursos dessa plataforma permitem que, ao ouvir o apresentador, às vezes pause a reprodução e, independentemente, na mesma janela em que a demonstração é realizada, experimente o código. O curso parecia interessante para nós, decidimos traduzi-lo para o russo e convertê-lo para o formato de publicações tradicionais.



Acreditamos que este curso será útil para todos que, como dizem, "não sabem como reagir", mas querem aprender. Ao mesmo tempo, é necessário um esforço e tempo consideráveis ​​para transformar este curso em publicações regulares; portanto, antes de tomar uma decisão final sobre o lançamento deste projeto, convidamos todos a avaliar o curso e participar de uma pesquisa sobre a viabilidade de traduzi-lo.

Lição 1. Visão geral do curso e recomendações para seu desenvolvimento

→ Original

Bem-vindo ao curso React Fundamentals. Meu nome é Bob Ziroll, vou falar sobre como criar projetos front-end usando uma das estruturas da Web mais populares do mundo. Trabalho na área de educação em computação há muitos anos, em particular, agora sou responsável pela organização do processo educacional da V School .

▍Sobre o processo de desenvolvimento do curso

Ao longo dos anos desenvolvendo cursos de treinamento destinados a ajudar todos que desejam dominar rapidamente coisas complexas, desenvolvi minha própria abordagem de aprendizado, sobre a qual acho útil conversar.

Para começar, quero observar que a maneira mais fácil e eficaz de aprender qualquer coisa é não poupar esforços e tempo para praticar. Se você quiser aprender a programar - quanto mais cedo você começar a fazer algo e com mais frequência -, maiores serão suas chances de sucesso.

Geralmente, quando eu apresento os alunos da V School, dou a eles o seguinte exemplo da minha própria vida. Recentemente, fui atraído para trabalhar com madeira. Eu li livros, assisti a inúmeros vídeos no YouTube, me deu ferramentas. Mas não pude fazer nada digno até pegar as ferramentas em minhas mãos. Apenas muitas horas gastas trabalhando com uma serra e uma lixa, colando e aparafusando peças me permitiram chegar mais perto da meta. De fato, o desenvolvimento de tudo é organizado no mesmo princípio. Quer aprender a reagir? Escreva o código.

A maioria das aulas deste curso contém exercícios. Espera-se que você tente fazê-las você mesmo. Se você, familiarizado com a tarefa do trabalho independente, proceder imediatamente à descrição de sua solução, na verdade escolherá a maneira mais difícil de aprender a reagir. Além disso, não espere até que lhe seja oferecida a prática - tome a iniciativa e tente tudo o que aprender. Tente trabalhar com o código você mesmo, tanto quanto possível. Em particular, quando você dominar o React um pouco - crie algo do seu interesse, experimente tudo o que tem curiosidade de experimentar. Isso permitirá que você evite problemas como o " inferno dos tutoriais ".

Outro ponto importante da minha abordagem é o treinamento intervalado e a repetição do material abordado. Essas são as coisas mais importantes que permitem que você se lembre verdadeiramente do que está aprendendo. Não é recomendado se precipitar no estudo do curso. Este é o caminho para esse "inferno tutorial". Com essa abordagem, você tem a sensação de que realmente aprendeu alguma coisa, mas, na realidade, simplesmente não consegue se lembrar do que “aprendeu”.

Portanto, percorrendo os materiais, faça pausas frequentes. Não se trata de pausas periódicas de 5 a 10 minutos, mas de algo mais ambicioso. Aprenda alguns princípios, pratique usando-os e faça uma pausa por um dia. Quando você retornar ao curso, será muito útil repetir os materiais já estudados. Obviamente, com essa abordagem, levará mais tempo para dominar o curso, mas isso terá um efeito extremamente benéfico no seu aprendizado.
Agora vamos discutir brevemente o que você aprendeu ao dominar este curso.

UctureEstrutura e pré-requisitos

Aqui está uma lista dos principais tópicos do curso:

• Os componentes Falando em React, uma discussão sobre o conceito de componentes não pode ser evitada. Os componentes no React são o principal componente para a criação de snippets HTML adequados para reutilização. E quase tudo o que falaremos está relacionado a como usar esses componentes para criar aplicativos da web.
• JSX. Esta é uma extensão de sintaxe JavaScript que permite criar componentes usando os recursos de HTML e JavaScript.
• Estilização de componentes. O estilo confere aos componentes uma aparência atraente.
• Propriedades e troca de dados no aplicativo. Propriedades são usadas para transferir dados entre componentes.
• Condição. Mecanismos de estado do componente são usados ​​para armazenar e gerenciar dados em um aplicativo.
• Manipulação de eventos. Os eventos permitem estabelecer relacionamentos interativos com os usuários do aplicativo.
• Métodos de ciclo de vida dos componentes. Esses métodos permitem ao programador influenciar vários eventos que ocorrem com componentes.
• Baixe dados de APIs externas usando o protocolo HTTP.
• Trabalhe com formulários.

Para ser produtivo neste curso, você precisa conhecer HTML, CSS e JavaScript (ES6).

Lição 2. Projetos de treinamento

→ Original

No processo de conclusão deste curso, você desenvolverá projetos educacionais. Dê uma olhada em alguns deles.

Nosso primeiro desenvolvimento será um aplicativo TODO padrão.


Todo aplicativo

Pode parecer um pouco chato, mas no decorrer de seu desenvolvimento, muitas oportunidades estarão envolvidas, das quais falaremos no curso. Você pode clicar nos itens da lista de tarefas, marcando-os como concluídos, e ver como a aparência deles muda.


Casos marcados no aplicativo TODO

E aqui está o nosso projeto de curso - um gerador de memes.


Meme generator

Ao trabalhar com esse aplicativo, os textos são inseridos nos campos Top Text e Top Text Bottom Text , que, respectivamente, caem nas partes superior e inferior da imagem. Ao clicar no botão Gen , o programa seleciona aleatoriamente uma imagem de meme da API correspondente e adiciona texto a ela. Aqui está um exemplo de como esse aplicativo funciona:


Meme pronto

Lição 3. Por que reagir e por que vale a pena aprender?

→ Original

Por que usar o React se você pode desenvolver um projeto da Web em JavaScript puro? Se você está interessado em desenvolvimento web, pode ter ouvido falar que o React permite criar aplicativos muito rápidos, cujo desempenho excede o que é possível obter usando apenas JavaScript. Isso é alcançado usando a tecnologia no React chamada Virtual DOM. Não entraremos em detalhes sobre o Virtual DOM. Se você quiser conhecer melhor essa tecnologia, assista ao vídeo.

Por enquanto, basta sabermos que o DOM virtual ajuda os aplicativos da Web a executarem muito mais rápido do que se estivessem usando JS comum. Outro grande benefício que o React nos oferece é a capacidade de criar componentes da Web adequados para reutilização. Considere um exemplo.

Temos um elemento navbar padrão da biblioteca Bootstrap.


Barra de navegação

Se você nunca usou o Bootstrap antes, saiba que esta é apenas uma biblioteca CSS que fornece aos desenvolvedores da Web elementos belamente projetados. Existem cerca de quatro dezenas de linhas de código, tudo parece bastante complicado, navegar nesse código não é fácil. Se você incluir tudo isso em uma página HTML, que já possui muitas coisas, o código dessa página será simplesmente sobrecarregado com vários designs.

Os componentes de reação da Web permitem que você pegue trechos de código HTML, organize-os como componentes separados e, em vez de adicionar esses trechos à página, inclua algo como tags HTML especiais na estrutura da página. No nosso caso, em vez de adicionar quarenta linhas de marcação HTML à página, basta incluir um componente que contenha essa marcação em sua composição. Nós o chamamos MySweetNavbar .


Abordagem de componentes para a formação da Web

Você pode nomear um componente como desejar. Como você pode ver, o layout da página com base em componentes é muito mais fácil de ler. O desenvolvedor vê imediatamente a estrutura geral dessa página. Nesse caso, como você pode ver no conteúdo da <body> , há uma barra de navegação ( MySweetNavbar ) na parte superior da página, o conteúdo principal ( MainContent ) no meio e um rodapé ( MySweetFooter ) na parte inferior da página.

Além disso, os componentes não apenas melhoram a estrutura de código das páginas HTML. Eles também são adequados para reutilização. E se várias páginas precisarem da mesma barra de navegação? E se esses painéis em páginas diferentes forem ligeiramente diferentes um do outro? O que fazer se todo o mesmo painel for usado em muitas páginas e você precisar fazer algumas alterações? Sem usar uma abordagem componente, é difícil dar respostas decentes para essas e muitas outras perguntas.

Outro motivo para a popularidade do React pode ser considerado o fato de o Facebook estar desenvolvendo e suportando esta biblioteca. Isso, no mínimo, significa que o React está sendo constantemente manipulado por programadores qualificados. A popularidade do React e o fato de o projeto ser de código aberto, publicado no GitHub, também significa que muitos desenvolvedores de terceiros contribuem para o projeto. Tudo isso nos permite dizer que o React, no futuro próximo, viverá e se desenvolverá.

Falando sobre React e, em particular, por que vale a pena explorar essa biblioteca, não podemos deixar de lembrar o enorme mercado de trabalho associado a essa biblioteca. Hoje, os especialistas em React estão em constante demanda. Se você estuda o React com o objetivo de encontrar um emprego no desenvolvimento front-end, isso significa que você está no caminho certo.

Lição 4: Ambiente de Desenvolvimento, ReactDOM e JSX

→ Original

Aqui, falaremos sobre como criar um aplicativo React simples usando o ReactDOM e abordaremos alguns pontos-chave sobre o JSX. Mas, antes de começarmos a trabalhar com o código, vamos falar sobre onde executar esse código.

Environment Ambiente de Desenvolvimento

Para experimentar o código React, talvez seja melhor implantar um ambiente de desenvolvimento local completo. Para fazer isso, você pode consultar o material React.js recentemente publicado : um guia intuitivo para iniciantes , em particular, a sua seção React Application Development Practices. Ou seja, para iniciar os experimentos, você precisa criar um novo aplicativo usando create-react-app , inicie o servidor de desenvolvimento local e comece a editar o código. Se estivermos falando dos exemplos mais simples, o código deles poderá ser inserido diretamente no arquivo index.js padrão, removendo o código ou comentando-o.

O conteúdo do arquivo index.html no projeto criado por create-react-app corresponde ao seu conteúdo nos exemplos que serão fornecidos neste curso. Em particular, estamos falando sobre a presença na página do elemento <div> com a root identificadora.

Outra opção que geralmente é adequada para algumas experiências muito simples é usar plataformas online como o codepen.io. Por exemplo, aqui está um projeto de demonstração do aplicativo React de Dan Abramov. A essência da preparação de um projeto Codepen para experimentos com o React é conectar as bibliotecas de react e react-dom a ele (isso pode ser feito clicando no botão Settings na parte superior da página, indo para a seção JavaScript na janela exibida e conectando-se ao projeto, depois de encontrá-los com usando o sistema de pesquisa embutido, as bibliotecas necessárias).

É possível que você, para experimentação, seja conveniente usar os recursos do Scrimba. Para fazer isso, você pode simplesmente abrir a página da lição correspondente. Os links para essas páginas podem ser encontrados abaixo dos títulos, com números e nomes de ocupação.

ProgramPrimeiro programa

Note-se que em nossos exemplos usaremos os recursos do ES6 (ES2015), portanto, é altamente recomendável que você os navegue. Em particular, para importar a biblioteca de react para o projeto, a seguinte construção é usada:

 import React from "react" 

E assim você pode importar a biblioteca react-dom :

 import ReactDOM from "react-dom" 

Agora vamos usar o render() ReactDOM para exibir algo na tela:

 ReactDOM.render() 

Se você decidir usar um projeto criado pelo create-react-app para experimentos, agora o arquivo index.js (aberto no VSCode) será semelhante ao mostrado na figura a seguir.


Inserindo código em index.js

Se você tiver um servidor de desenvolvimento em execução e o navegador tiver a http://localhost:3000/ página aberta, você salvará as mensagens de erro se salvar o index.js . Isso, nesta fase do trabalho, é completamente normal, pois ainda não informamos o sistema sobre o que e onde queremos exibir o comando render() .

De fato, agora é hora de lidar com o código que acabamos de escrever. Nomeadamente, aqui importamos o React para o projeto e, em seguida - ReactDOM - para que os recursos desta biblioteca pudessem ser usados ​​para exibir algo na tela.

O método render() usa dois argumentos. O primeiro será o que queremos trazer à tona, e o segundo será o lugar onde queremos trazer algo à tona. Se isso for escrito na forma de pseudocódigo, o seguinte será o seguinte:

 ReactDOM.render( ,  ) 

O que queremos produzir deve estar de alguma forma anexado a alguma página HTML. O código que escreveremos será transformado em elementos HTML que entrarão na página.

Veja como esta página pode parecer.

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html> 

Existem todos os elementos básicos de uma página HTML, incluindo a tag <link> e a tag <script> .

Se você usar create-react-app , a página index.html será um pouco diferente. Em particular, em seu código, não há index.js importação index.js . O fato é que, ao criar um projeto, a conexão entre index.html e index.js feita automaticamente .

Observe o elemento <div> com o identificador root . Entre as tags de abertura e fechamento desse elemento, o React colocará tudo o que criamos. Este elemento pode ser considerado um contêiner para toda a nossa aplicação.

Se agora retornarmos ao arquivo index.js e ao ReactDOM render() ReactDOM , seu segundo argumento, o local onde os dados devem ser ReactDOM , será uma referência ao elemento <div> com a root identificadora. Aqui usaremos o JavaScript comum, após o qual o segundo argumento do método Render terá a seguinte aparência:

 ReactDOM.render( , document.getElementById("root")) 

Com essa abordagem, o método render() pega o primeiro argumento e gera o que descreve no local especificado. Agora vamos ao primeiro argumento. Vamos começar com o simples elemento <h1> . E, como geralmente ocorre ao escrever o primeiro programa, adicione o texto Hello world! :

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root")) 

Se você agora atualizar a página do navegador, ela exibirá, como o título do primeiro nível, o texto especificado.


O resultado do primeiro programa

Aqui você pode ter uma pergunta sobre por que colocamos a descrição do elemento HTML no local em que o argumento do método JavaScript é esperado. Afinal, o JavaScript, confrontado com algo como <h1>Hello world!</h1> , provavelmente decidirá que o primeiro caractere dessa expressão é um operador "less"; então, obviamente, o nome da variável vem a seguir, depois o operador de comparação "more" " O JavaScript não reconhece um elemento HTML nessa sequência de caracteres e não deveria.

Os desenvolvedores do React criaram não apenas uma biblioteca, mas também uma linguagem especial chamada JSX. JSX é muito semelhante a uma variação de HTML. Além disso, você verá que quase todo o código JSX coincide quase completamente com a marcação HTML formada com sua ajuda. Obviamente, existem diferenças entre JSX e HTML, e iremos discuti-las gradualmente.

Introduzimos uma instrução bastante simples e curta, mas nas entranhas do React, quando é executado, muitas coisas interessantes acontecem. Portanto, essa instrução é convertida para sua versão JavaScript, o código HTML está sendo gerado, embora não entremos nos detalhes desse processo. É por isso que precisamos importar não apenas o react-dom , mas também react ao projeto, pois a biblioteca React é exatamente o que nos permite usar o JSX e fazer com que as construções JSX funcionem conforme o esperado. Se removermos a linha import React from "react" do nosso exemplo, salve o arquivo de script e atualize a página, uma mensagem de erro será exibida. Em particular, o create-react-app nos dirá que você não pode usar JSX sem acesso ao React ( 'React' must be in scope when using JSX react/react-in-jsx-scope ).

O fato é que, embora o React não seja usado diretamente em nosso exemplo, a biblioteca é usada para trabalhar com JSX.

Outra coisa sobre como trabalhar com JSX que quero chamar sua atenção é que você não pode renderizar elementos JSX que se seguem um após o outro. Suponha que após o elemento <h1> você precise gerar o elemento <p> . Vamos tentar usar este design:

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) // 

Se depois disso, atualize a página - uma mensagem de erro será exibida (no create-react-app Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag create-react-app parece com o Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ). A essência desse erro é que esses elementos devem ser agrupados em algum outro elemento. O que resultará no final deve parecer um elemento com dois elementos aninhados.

Para que nosso exemplo funcione, envolvemos o <h1>Hello world!</h1><p>This is a paragraph</p> código de <h1>Hello world!</h1><p>This is a paragraph</p> no elemento <div> :

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root")) 

Se você agora atualizar a página, tudo ficará como o esperado.


Dois elementos HTML por página

Levará algum tempo para se acostumar com o JSX, mas depois disso, seu uso será muito mais fácil e conveniente do que trabalhar com elementos HTML usando ferramentas JavaScript padrão. Por exemplo, para descrever o elemento <p> e configurar seu conteúdo usando ferramentas padrão, você precisará de algo como o seguinte:

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph." 

Então você precisa conectá-lo ao elemento que já está na página. Este é um exemplo de programação imperativa, e o mesmo, graças ao JSX, pode ser feito em um estilo declarativo.

Lição 5. Workshop. ReactDOM e JSX

→ Original

Na última lição, você se encontrou com o ReactDOM e o JSX e agora é hora de colocar esse conhecimento em prática.

Concluiremos todas as tarefas práticas da seguinte maneira. Primeiro, na seção com o título Tarefa, a tarefa em si será dada e, possivelmente, na seção Dicas, serão apresentadas breves recomendações sobre sua implementação. Em seguida, a seção Solução será exibida. É recomendável que você faça todos os esforços para concluir a tarefa sozinho e depois lide com a solução fornecida.

Se você sentir que não está lidando com o problema, retorne à lição anterior, repita o material apropriado e tente novamente.

▍Job

Escreva um aplicativo React que exiba uma lista com marcadores ( <ul> ) na página. Essa lista deve conter três elementos ( <li> ) com qualquer texto.

▍Dicas

Primeiro, você precisa importar as bibliotecas necessárias para o projeto e, em seguida, use uma delas para exibir os elementos gerados usando algum código JSX na página.

Sumário

Agora, depois de se familiarizar com as primeiras lições do curso React, solicitamos que você participe da pesquisa.

Obrigado pela atenção!



→ 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