Prefácio

Primeiro, apresento-me, meu nome é Edik , sou desenvolvedor Full Stack Web. As principais direções do Laravel & React.js, Vue.js. Aprendendo GoLang e Swift.

Embora já existam muitas outras fontes de informação, os livros continuam sendo os mais comuns, mas há muita água neles e decidi não criar outra muleta, mas apenas fazer anotações.

Para estruturar os dados, as informações serão apresentadas como uma série de artigos divididos em capítulos .

Escrevo essas anotações para mim e decidi compartilhá-las com o mundo inteiro. Portanto, não seja duro. E então vamos lá!

Capítulo 1. Bem-vindo ao React

React é uma biblioteca popular usada para criar interfaces de usuário . Foi criado no Facebook para resolver uma série de problemas associados a sites em grande escala.

Reagir como uma biblioteca

Vale ressaltar que a biblioteca não é grande em tamanho e é usada apenas para uma parte de todo o trabalho. As principais decisões sobre quais ferramentas do ecossistema usar são tomadas pelos desenvolvedores. React é o único "V" no mundo "MVC" .

Nova sintaxe do ECMAScript

O React tira proveito dos novos recursos do ECMAScript . Se você não estiver familiarizado com as especificações mais recentes, a visualização do código React pode causar insegurança.

JavaScript funcionalmente popular

Um script JavaScript não é uma linguagem funcional, mas métodos funcionais podem ser usados ​​em seu código. O React enfatiza a prioridade da programação funcional sobre a programação orientada a objetos . Essa mudança de pensamento pode levar a vantagens significativas em áreas como testes e ganhos de produtividade.

Antes de começar a trabalhar com o React, recomendo que você se familiarize com o básico do paradigma de programação funcional.

Javascript tedioso

Para trabalhar com o React, você precisa aprender o básico do Webpack . O Webpack permitirá testar o código, dividi-lo em módulos, compactá-lo para produção, etc.

O futuro da biblioteca React

A próxima versão da biblioteca incluirá a ferramenta Fibra - uma nova implementação do algoritmo principal do React, cujo objetivo é aumentar a velocidade de exibição da imagem na tela . Muitas mudanças estão relacionadas aos dispositivos de destino. Não esqueça que o React ainda é usado no React Native.

Trabalhar com arquivos

Reagir Ferramentas de desenvolvedor

Existem várias ferramentas que podem ser instaladas como extensões ou módulos adicionais do navegador e que nos interessam:

O react-detector é uma extensão do navegador Chrome que permite saber quais sites estão usando o React .

show-me-the-react é outra ferramenta de detecção de React .

O React Developer Tools é um módulo complementar que estende a funcionalidade das ferramentas do navegador . Ele cria uma nova guia nas ferramentas do desenvolvedor, onde é possível visualizar os elementos do React em detalhes .

O React Developer Tools é uma ótima ferramenta que economiza muito tempo durante a depuração. Se você deseja escrever profissionalmente com o React, este módulo é muito útil para você.

Instale o Node.js

Node.js - idioma JavaScript sem navegador (JS do lado do servidor). Este é o ambiente de tempo de execução usado para criar aplicativos JavaScript no lado do cliente e do servidor . Pode ser instalado no Windows, MacOS, Linux e outras plataformas.

Você pode encontrar detalhes da instalação no site oficial do Node.js.

Para usar React, Node não é necessário. Porém, ao trabalhar com o React, você precisará usar um gerenciador de pacotes chamado NPM para instalar dependências . Ele é instalado automaticamente com o Node.

Para verificar se o Nó está instalado no terminal, digite o node -v . Você deve ver a versão do seu nó.

 $ node -v v.10.13.0 

Alternativa ao NPM

Uma alternativa adicional ao NPM é o Fio . Esta ferramenta foi lançada pelo Facebook em colaboração com Exponent, Google e Tilde. Ajuda a gerenciar de maneira mais confiável as dependências de aplicativos . Ao trabalhar com o Yarn, você notará que é mais rápido que o NPM.

A instalação do fio é muito fácil. Após instalar o Node, digite:

 $ npm install -g yarn 

Você pode encontrar detalhes da instalação no site oficial do Yarn .

E depois disso, tudo estará pronto para instalar pacotes. Ao instalar dependências do packege.json, você pode executar o yarn em vez da npm install do npm install .

Adicionando um pacote usando o Yarn:

 $ yarn add [_] 

Removendo um pacote usando o Yarn:

 $ yarn remove [_]