Seminário on-line aberto “Criando um aplicativo no Webpack + React + Express”

Olá pessoal!

Em julho de 2018, nosso professor no curso JavaScript Developer, Yuri Dvorzhetsky, realizou um webinar aberto sobre o tópico "Criando um aplicativo no Webpack + React + Express", no entanto, como parte do segundo curso , onde ele atua como professor em um dos módulos dedicados ao JavaScript. Neste material, você pode se familiarizar com o vídeo e uma breve recontagem da master class do passado.

O trabalho da lição aberta foi realizado de acordo com o seguinte plano:

1. Apresentando o Node JS e o Express JS.
2. Apresentando o Webpack.
3. Apresentando o React.

Então vamos lá!

JS do nó

Com o advento do novo padrão ES6, a popularidade do JavaScript aumentou acentuadamente, conforme evidenciado pelas mesmas estatísticas sobre o número de solicitações pull no GitHub para 2017, em que JS ocupa o primeiro lugar.

Um dos drivers JS era o Node JS, uma plataforma de software baseada no mecanismo V8 (traduzindo JavaScript em código de máquina) e transformando JavaScript de uma linguagem altamente especializada em uma linguagem de uso geral. Muitas pessoas chamam o JavaScript de "nó do servidor" do Nó JS, mas aqui a definição de "servidor" em vez de "servidor" é mais apropriada. Por exemplo, o Node JS possui um ambiente muito rico, incluindo seu próprio gerenciador de pacotes chamado npm, que você pode executar com segurança em sua máquina (o repositório está disponível em npmjs.com). E este não é o único gerenciador de pacotes, existem outros. O arquivo de configuração é package.json e é fácil adivinhar que ele está configurado no formato JSON.

Como parte da introdução ao Node JS, os usuários foram solicitados a concluir as seguintes etapas:

• Faça o download do NodeJS no site oficial nodejs.org/en/;
• instale em um computador e verifique a versão;
• verifique se o nó –v está em execução no console.

A próxima etapa é a criação do primeiro projeto Node JS. Você pode fazer isso de duas maneiras:

• comando npm init (continue concordando com tudo pressionando enter);
• baixando o repositório a partir do link no GitHub e introduzindo o comando git checkout 0.

O próximo passo é conhecer o Express JS.

Express js

O Express JS é um servidor da web popular para ambientes Node JS. Em termos de Python, é algo como o Django, só que, de fato, não há nada além de métodos REST. O Express JS é perfeito para criar serviços REST que aceitam e enviam JSON, mas, em geral, é bastante ascético; portanto, tudo o que você precisa é aceito, como se costuma dizer, "ferrado". A propósito, outros servidores da web também são feitos com base. Nesse caso, você precisa entender que o Express é algo como um link intermediário (middleware), que ainda precisa ser configurado e preenchido com lógica.
Como parte do webinar, o Express JS foi instalado usando o comando npm install express com a adição da opção –save. Você também pode fazer o check-out em um git (git checkout 1) com a ortografia npm install. Como resultado, o node_modules / folder foi criado e o conteúdo do package.json foi alterado (as dependências correspondentes apareceram).

Após o trabalho preparatório, chegou a hora de escrever o próprio servidor:

1. Criação do arquivo /server.js na raiz do projeto.
2. Colocando nele certo código escrito em JavaScript. O objetivo deste script é:

- expressando-se a partir do "misterioso" node_modules /;
- Adicionando um manipulador ao URL /;
- inicie o Nó JS (usando o nó server.js ou o comando npm start).

Você também pode conferir a tag número 2 (git checkout 2).

JS, ES6 e transpilação

Como mencionado anteriormente, o ES6 é o padrão JS atual. É um conjunto de recursos que não são totalmente suportados por nenhum navegador (apenas parte do conjunto é suportada). Como resultado, surge a pergunta: e se queremos escrever no ES6 moderno, e apenas o ES5.1 é suportado nos navegadores? Aqui transpilar vem em socorro. Sua ideia é a seguinte:

1. temos código escrito em ES6;
2. nós o compilamos (ES6 é convertido em ES5.1);
3. o JS-ku resultante pode ser colocado nas páginas do navegador.

Como resultado, torna-se possível usar não apenas o ES6, mas também dialetos e extensões diferentes, aumentando assim o poder do JS, por exemplo:

• JavaScript TypeScript (TS) "digitado";
• JSX - XHTML em JS (framework React);
• Verificador de tipo estático de fluxo.

Uma das transpilações mais populares e poderosas é a Babel. Foi ele quem foi usado para resolver os problemas da lição aberta.

Benefícios de montagem:

• Você pode coletar todos os arquivos JS em um pacote configurável;
• pacotes podem ser minimizados e ofuscados;
• você pode executar simultaneamente MENOS-> CSS etc.

Webpack

O Webpack é um dos colecionadores mais sofisticados. É conceitualmente complicado, especialmente em termos de terminologia, mas não tem igual, e a versão mais recente é mais simples que as anteriores. No entanto, você não deve ter medo disso, pois fazer uma configuração com ele é um trabalho único. E sem exageros, o número de bolos incluídos no Webpack pode ser "excessivo".

Por exemplo, webpack.config.js foi mostrado aos ouvintes do webinar e cada linha do arquivo foi examinada em detalhes para entender a terminologia como um todo.

A próxima etapa é criar um cliente com o React e o Webpack pré-configurados (cliente npx minimal-react ou comando git checkout 3 para pessoas preguiçosas). Depois disso, você pode ir para a pasta / cliente de CD criada dessa maneira e abrir o arquivo webpack.config.js, cujo fragmento foi mostrado um pouco antes.

Reagir

Gradualmente, chegou a hora de se familiarizar com o React - uma biblioteca JavaScript de código aberto para o desenvolvimento de interfaces com o usuário.

Para uma primeira olhada no React e uma imersão "suave" em seu ambiente, os alunos foram solicitados a abrir o client / src / index.js e, se nada acontecesse, abrir o cliente / src / component / app.js.
O núcleo do React é o JSX. Este é um dialeto de JS e XHTML escrito em JS. Apesar do React poder ser usado sem o JSX, todo o seu poder está precisamente no JSX. Quanto ao React, esse é um dos frameworks mais populares, de acordo com o Hackernoon, com base em uma abordagem de componentes. Possui um grande número de pacotes de suporte e uma enorme infraestrutura. O aplicativo em si é um conjunto de componentes que contêm sua marcação e comportamento.

Recursos de reação:

• componentes podem usar um ao outro;
• esse JS é executado no navegador;
• na realidade, não há marcação no navegador, mas aparece quando o navegador do cliente executa esse código;
• os componentes renderizam suas anotações e os componentes usados ​​renderam suas próprias;
• a marcação não precisa ser estática e não é;
• Você pode passar informações para componentes filhos;
• componentes podem ser renderizados condicionalmente.

Depois de se familiarizar com o React, a parte prática do seminário on-line continuou, como resultado das seguintes etapas:

1. inicie o webpack na pasta do cliente (client / npm run dev);
2. escrevendo seu próprio componente simples de acordo com as instruções do professor ou através do git checkout 4 (o Webpack não pôde ser parado).

Em seguida, os alunos foram solicitados a usar objetos de suporte e fazer uma renderização tipodinâmica (git checkout 5).
As nuances dos adereços:

• Conter propriedades dos componentes
• Você pode transferir não apenas seqüências de caracteres, mas também objetos;
• Idealmente, a comunicação na linha de componentes de reação é sempre baseada em adereços.

Na fase final do treinamento prático, o back-end e o servidor da web foram conectados (git checkout 6).

O FIM

Agradecemos sua atenção e, como sempre, aguardamos seus comentários e sugestões.