Get best of the week

ReactJS: início rápido

O curso de desenvolvedor do React.js está prestes a começar . Outra lição aberta foi realizada dentro dos muros do OTUS. Os seguintes problemas foram considerados:

  • O que está incluído no conjunto de recursos padrão do React.js.
  • é possível construir uma aplicação complexa com isso;
  • composição contra herança;
  • programação funcional - é fácil ou difícil?
  • o que é Redux e por que é necessário.



No final da lição, desenvolvemos um pequeno aplicativo da web ReactJS. O webinar foi organizado por Nikita Ovchinnikov , engenheira de software com mais de 8 anos de experiência em desenvolvimento comercial.

O que é reagir?


Você verá a resposta para esta pergunta abrindo o site oficial, onde está escrito que o React é uma biblioteca JavaScript para criar interfaces de usuário.



Aqui você encontrará um maravilhoso tutorial, tendo estudado quais, você pode usar esse framework imediatamente após a leitura. Se você quiser, consulte o tutorial em russo, mas isso não é recomendado. Se estiver muito ruim com o inglês, abra a versão original em inglês e use o tradutor do Google. O fato é que as fontes oficiais do idioma russo às vezes ficam para trás em termos de tradução (acontece que a documentação está atualizada, mas a tradução ainda não está).

Por que o React é tão popular?


Por exemplo, as estatísticas dos últimos 6 meses , sem contar a característica de subsidência durante as férias de inverno , testemunham a popularidade do React : As estatísticas a seguir



também mostram bons resultados : é claro que as estatísticas estão longe de tudo, mas, no entanto, podemos ver na amostra essa popularidade alto, e só está aumentando. Por que o React é tão popular? Há várias razões para isso:







  • está realmente muito bem documentado :
    - aqui está um tutorial ;
    - aqui está um guia para iniciantes .
    No entanto, hoje a estrutura não se tornará popular se estiver mal documentada;
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


Portanto, familiarize-se - fraqueza nº 1: reagir não é fácil de aprender . E aqui está o porquê:

1. Reagir é uma maneira completamente diferente de pensar. Se você trabalha com ele, você realmente precisa se reconstruir. No React, diferentemente de outras estruturas, existe apenas o conceito de composição. Os caras do Facebook projetaram sua estrutura de tal maneira que não há herança nela . E esses mesmos caras do Facebook explicaram de maneira lógica esse estado de coisas :

"No Facebook, usamos o React em milhares de componentes e não encontramos nenhum caso de uso em que recomendamos a criação de hierarquias de herança de componentes " .

De fato, essa afirmação não é infundada, porque no POO existem, é claro, muitos problemas conhecidos, por exemplo, um número excessivo de abstrações. Além disso, nem todos os desenvolvedores são a favor da construção de cadeias incríveis de herança e isso é tudo, embora, é claro, em algum lugar a herança seja necessária e útil.

2. O segundo ponto que complica o estudo do React é que ele contém apenas recomendações e não existe um conjunto rígido de regras. Não apenas isso, ao estudar a estrutura, ainda é suportável, mas quando você chega a um projeto real, ficará muito surpreso. O fato é que não há dois projetos idênticos no React, e em cada empresa um projeto com o React é completamente individual. Você se acostuma a uma situação e depois muda para outra equipe e vê que tudo é diferente lá: outras bibliotecas, outras regras ... E, novamente, você precisa se adaptar e se adaptar. Como se costuma dizer, você precisa pagar pela flexibilidade.

3. A terceira dificuldade de aprender - para dominar o React com sucesso, um desenvolvedor precisa ter um nível alto. Não, o React em si é simples e fácil de escrever. Mas, para fazer algo mais ou menos complicado, você precisa ter boas habilidades de programação. Se houver lacunas no conhecimento fundamental de JS e TS, será bastante difícil para você e você não entenderá tudo.

Problema de escolha


Agora vamos falar sobre o ponto fraco 2 - o problema da escolha . É uma variedade em que é fácil se perder. Realmente existem muitas coisas. Hooks apareceram recentemente - começou uma conversa sobre o fato de que as classes não são mais necessárias, as batalhas React Hooks x React Class começaram ... Todos correram para usar hooks e disseram que tudo não estava claro e que retornavam ao uso de classes, etc., etc. p ...

Na verdade, a resposta correta para a pergunta " React Hooks or React Class " não existe. Ou, para ser mais preciso, a resposta correta depende das condições em que você faz essa pergunta.

Outra questão surge: "Como verificar tipos"? Veja que temos:


E aqui temos novamente o problema da escolha, que, para ser honesto, às vezes inquieta. Obviamente, tudo é muito variável e, no processo de trabalhar com algumas decisões, você se encontrará, mas nunca "verá" algumas. Tudo depende da situação.

Novamente, há o Create React App , Webpack.js e Babel . Assim que você começar, você terá uma pergunta aqui, o que usar?

A seguinte agonia de escolha está associada ao Estado . Existe o Redux e o MobX , e dentro do Redux também há redux-saga e redux-thunk . E é difícil, sem tentar, perceber o que é melhor usar em uma situação específica.

Além disso:

1. roteador . Existem cerca de cinco, aqui estão os mais populares:


2. CSS-IN-JS . No quadro dessa abordagem muito boa, a propósito, também há uma opção:


Para resumir, você pode listar os seguintes contras do React :

  1. Limite de entrada alto. Sem pretensão, digamos que é difícil aprender a reagir. Inclusive por causa da infraestrutura muito grande.
  2. Muito tempo para estudar. Uma vez que não é fácil aprender, esteja preparado para dedicar algum tempo a isso; caso contrário, de jeito nenhum. Você precisa entender o que é o quê.
  3. Uma variedade muito grande em que é fácil se perder. Não há nada para adicionar.

O que significa "muito tempo de estudo"? De fato, se você adota alguma tecnologia, não importa o quão suave você seja disposto do ponto de vista do marketing, não acredite nas palavras no estilo de "Você aprenderá em apenas duas breves lições" - tudo isso é um absurdo e não funciona no mundo real. . Banal, mas verdadeiro: para se tornar um especialista realmente bom, você precisa gastar muito tempo. E para começar a fazer algo, não é necessário muito tempo.

Em que está a força, irmão?


Apesar de tudo, o React é uma tecnologia muito poderosa. Em primeiro lugar, se você é um profissional, o trabalho será muito fácil de encontrar. Em vez disso, será difícil recusá-lo, porque há muitas ofertas no mercado:



a próxima vantagem são muitas bibliotecas e soluções prontas. Isso é indicado pela mesma captura de tela do GitHub (existem mais de um milhão de repositórios):



Se você apenas acha que seria bom “cortar essa coisa”, acontece que já foi feito por alguém. A tecnologia é realmente muito popular.

Além disso:

  1. A diversidade é um problema para iniciantes, mas para um profissional é uma vantagem!
  2. O React contém uma enorme quantidade de boas soluções.
  3. Você pode desenvolver aplicativos de qualquer complexidade.
  4. Você pode escrever em qualquer estilo.

Suporte para texto datilografado


O React possui apenas um ótimo suporte ao TypeScript. Essa linguagem é boa apenas porque pode ser usada para escrever tipos que realmente funcionam e realmente ajudam. E com o Typecript você pode escrever um sistema de tipos realmente forte. Essencialmente, o Typecript agora é um padrão, e esse padrão está no React. Claro, você não pode usá-lo, preferindo JavaScript. No entanto, sem o Typecript, é muito difícil fazer algo bem difícil, porque sem tipos estritos é muito difícil trabalhar. Também é difícil prever como sua decisão se comportará sem tipos estritos. Isso é difícil, mesmo com os tipos, e sem eles é realmente triste ...

Em geral, não se esqueça de trabalhar com o Typecript, porque esta é uma tecnologia muito necessária:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html.



Algumas dicas


Finalmente, gostaria de dar algumas recomendações. Hoje eles falam muito sobre POO, e você pode encontrar facilmente uma enorme quantidade de informações sobre esse tópico. E em todos os lugares você será escrito pela milionésima vez sobre a classe base Animal, e a partir dela - sobre Gato e Cachorro. Ou sobre o carro de classe base, e a partir dele - Ferrari e BMW. E isso é tudo o que eles mostrarão de tempos em tempos e de um livro para outro, enquanto seu nível de desenvolvedor aumentará ao mesmo tempo que os caracóis.

Ao mesmo tempo, claramente não é dada atenção suficiente à programação funcional, cuja compreensão realmente bombeará suas habilidades. Se você realmente aprender a usá-lo corretamente e corretamente. Um dos livros mais adequados até o momento está disponível gratuitamente aqui e é altamente recomendado para leitura:



Por que é difícil aprender programação funcional? Porque muitas vezes os livros estão sobrecarregados com matemática, complexidade acadêmica, etc. Após o mesmo livro, você terá sucesso, porque é simplesmente maravilhoso.

Por que a programação funcional é importante? Porque o Redux é construído sobre os fundamentos básicos da programação funcional. E tendo dominado pelo menos a programação funcional básica, você realmente começará a escrever um código muito melhor. O principal é entender tudo corretamente.

O segundo ponto que eu gostaria de falar é sobre arquitetura. Nossa arquitetura é tudo ! Existe um paradigma arquitetônico muito bom chamado patos. É sobre como criar aplicativos React e Redux. Vale a pena recomendar essa arquitetura para uso prático.

A idéia em si é muito interessante e representa um conjunto de regras rígidas e ao mesmo tempo legais que tornarão sua estrutura de decisão compreensível e legível. Como não é uma tarefa árdua, basta ler e entender o conteúdo uma vez. Depois disso, você poderá organizar adequadamente seus aplicativos. O link está anexado.



Total


  1. Quem diz alguma coisa, o React tem um alto limite de entrada. Mesmo com vários anos de experiência em programação em JavaScript, prepare-se para o que será difícil e muitas perguntas surgirão.
  2. O React oferece ótimas oportunidades. Mas já se falou muito sobre os profissionais, por isso não nos repetiremos.
  3. Se você está interessado na história do desenvolvimento do React, aqui está um bom roteiro .

Isso é tudo. Se você estiver interessado na parte prática da lição, assista ao seminário on - line a partir de agora . Um pequeno aplicativo da Web de teste será desenvolvido no ReactJS, cujo código está disponível no GitHub .

More articles:


All Articles