React: seu guia completo para iniciantes sobre o uso do ReactJS

Você já ouviu falar sobre ReactJS, mas não sabe por onde começar? Você começou a brincar com o ReactJS, mas não sabe como usá-lo no seu dia-a-dia? Este artigo será o seu guia para aprender e dominar a biblioteca React JavaScript, a biblioteca mais popular usada pelos desenvolvedores atualmente. Mostrarei exatamente como começar a usar o ReactJS e como integrá-lo ao seu fluxo de trabalho para que você possa criar interfaces de usuário mais dinâmicas sem ter que fazer um desvio desnecessário por outro framework ou biblioteca. Vamos começar!

O que é ReactJS?

React é uma biblioteca de desenvolvimento front-end que encoraja você a construir componentes reutilizáveis. Se você está procurando uma maneira eficiente de criar interfaces de usuário, o React pode ser exatamente o que você precisa. Ao criar interfaces de usuário com Vanilla JavaScript ou jQuery, seu código pode se tornar muito complicado e pesado muito rapidamente. Ao usar o React e seu método preferido de desenvolvimento baseado em componentes, seu código será muito mais fácil de reutilizar e manter.

Na verdade, uma vez que você tenha alguns componentes construídos, é relativamente fácil para outros desenvolvedores em sua equipe entrarem e contribuírem com código sem ter nenhuma experiência com (ou conhecimento de) React!

Recomendado para você: 5 dicas valiosas para otimizar o desempenho do aplicativo React Native.

Por que usar o ReactJS?

Em primeiro lugar, você tem uma escolha à sua frente quando se trata de frameworks JavaScript. Então, por que você escolheria o React? Bem, para começar, quando se trata de ajudar os desenvolvedores a criar aplicativos grandes que sejam fáceis de entender e interagir com os usuários finais.

Para desenvolvedores que só trabalharam com jQuery ou Vanilla JavaScript até agora, aprender a trabalhar com novas tecnologias pode ser frustrante. Em alguns casos, os desenvolvedores podem precisar de centenas de linhas de código apenas para criar uma caixa modal simples ou barra de navegação. Como o React usa DOM virtual em vez de escrever e reescrever elementos DOM reais toda vez que há uma mudança de estado (como geralmente é feito no Angular), usar o React pode economizar um tempo valioso, permitindo menos linhas de código e, ao mesmo tempo, tornando seus aplicativos mais rápidos do que antes antes.

Instalando em um navegador

Antes de poder usar o React em um navegador, você precisa instalá-lo. Felizmente, é um processo simples graças ao npm e ao Browserify. Usando Node ou outro ambiente do lado do servidor? Você também pode usar npm e Browserify para isso também. Depois de instalar tudo, crie um arquivo HTML com seu editor de texto favorito. Caso contrário, use um gerador clichê como o Create-React-App, que cria um projeto inicial básico para você que já possui todas essas coisas configuradas.

Convertendo App.js para usar ReactJS

Todo o nosso código está atualmente em um único arquivo chamado App.js. Mas isso dificulta o teste. Então, vamos dividi-lo em vários arquivos. Começaremos convertendo um componente escrito em ES6 para JSX. É mais fácil manter todos os nossos componentes React em um único diretório (o que você deve fazer). Portanto, vamos criar um diretório src/components vazio e mover o App.js para ele: mv app/App.js src/components/app-react.js. Em seguida, renomeie-o para app-react.js.

Para usar React em vez de apenas ES6, altere use strict; no topo do seu arquivo para usar babel; Você também precisará instalar o Babel via npm install –save babel-CLI babel-preset-es2015 babel-preset-react, o que fará o Babel compilar sua nova sintaxe JSX.

Comece a criar com nosso aplicativo de exemplo

Existem várias maneiras de começar a usar o React, mas uma das nossas favoritas é criar um aplicativo simples de lista de tarefas. Para que você se mova rapidamente e evite muitos erros comuns, criamos um aplicativo de exemplo no qual tudo o que você precisa fazer é trocar o código de back-end e os componentes de front-end. Ele vem equipado com tudo o que você precisa - incluindo imagens - para garantir que pareça tão bom quanto funcione.

Não sinto vontade de codificar a si mesmo? Sem problemas! Na verdade, você pode copiar todos os nossos componentes seguindo estas etapas fáceis. Depois de copiá-los para o seu projeto, basta modificá-los para atender aos seus propósitos! A escolha é sua! Confira todas as três opções de introdução aqui.

Exemplo Básico Usando Componentes

Se você observar qualquer aplicativo da Web, uma das primeiras coisas que notará é que cada elemento é separado. Em uma página típica, existem diferentes cabeçalhos, rodapés, logotipos e botões. No entanto, ao trabalhar com React.js, em vez de usar vários elementos HTML para cada componente da página, você pode usar um único elemento HTML para representar todos eles. Isso pode parecer contra-intuitivo; afinal, não é isso que fazemos há anos?

Você pode gostar: Facebook JavaScript Engine (Hermes) impulsiona o React Native no Android.

Introdução à sintaxe JSX

JSX não é uma linguagem de programação como JavaScript ou TypeScript, mas uma sintaxe que foi projetada como uma extensão do JavaScript. Por isso, é importante que novos desenvolvedores entendam como ele funciona e onde você pode usá-lo. O código JSX é escrito de uma maneira muito semelhante ao HTML, tornando o código JSX um ótimo primeiro passo para novos desenvolvedores que estão aprendendo os dois idiomas ao mesmo tempo. Para obter mais informações sobre o que torna o JSX único e como você pode dominá-lo facilmente, leia nosso tutorial completo do ReactJS!

Para começar a construir seu primeiro projeto React, crie um novo diretório digitando mkdir react_tutorial dentro do seu terminal. Quando terminar de executar, navegue até o diretório recém-criado digitando cd react_tutorial. Em seguida, abra seu terminal e inicie o Node.js digitando node -v.

Você deve ver a v10.x listada ao lado de Node se tiver o Node instalado com sucesso. Caso contrário, tente usar o nvm install 10 se estiver usando macOS ou Linux. Se isso também não funcionar, o Google poderá ajudar a descobrir o que está acontecendo de errado! Depois que o Node estiver instalado corretamente com a versão 10+, estamos prontos para criar nosso projeto do zero!

Estático x Dinâmico x PureComponent

Ao criar aplicativos da Web com JavaScript moderno, você tem três opções principais para criar componentes de interface do usuário. Isso inclui HTML estático (marcação de reação), solicitações AJAX dinâmicas (dados de reação) e reutilização de elementos DOM existentes (puro de reação). Cada método tem seus próprios méritos e pode ser aplicado de forma diferente dependendo do seu caso de uso específico.

Por exemplo, se você souber que certos elementos sempre estarão disponíveis, poderá colocá-los em tags HTML estáticas. No entanto, se você precisar buscar conteúdo de bancos de dados que ainda não existem, usar react-data é uma escolha melhor. Ao decidir qual método de criação de componentes se adapta melhor ao seu projeto, é importante pensar em quão estável e permanente cada parte do seu aplicativo será.

Métodos de ciclo de vida em componentes ReactJS

Há um punhado de métodos de ciclo de vida que você pode usar em seus componentes para controlar diferentes partes de seu ciclo de vida. O método componentWillMount() é chamado imediatamente antes de um componente ser renderizado pela primeira vez. Dentro dele, você pode adicionar quaisquer inicializações necessárias para seu componente, como salvar informações usando localStorage. O método componentDidMount() também é chamado imediatamente após um componente ser montado e renderizado. Aqui, você pode adicionar código que deve ser executado assim que um componente for totalmente inicializado (por exemplo, criando novas solicitações de rede).

Manipulando o estado em componentes

A maneira como o Reacts aborda o gerenciamento de estado é um tanto única. Para entender por que devemos primeiro considerar como a maioria dos frameworks lida com os estados.

Tradicionalmente, um desenvolvedor pensaria no estado de um componente como sendo armazenado dentro dele mesmo. Isso leva a muitos problemas. Se um componente deseja atualizar o estado de outro componente, ele precisa de uma referência (props) para esse outro componente para fazer isso. E se você deseja que seus objetos de estado ou matrizes permaneçam sincronizados entre os componentes, você precisa de algum tipo de armazenamento de dados centralizado ou emissor de eventos que todos os componentes possam acessar.

E embora possa ser bastante simples para componentes em um aplicativo pequeno com apenas dois ou três estados diferentes, o que acontece quando seu aplicativo tem dezenas de estados diferentes? Como você gerencia todos eles?

Passando dados do componente pai para o componente filho

Existem duas maneiras de passar dados de um componente pai para um componente filho: por meio de props ou do estado. Passar dados via props pode ser útil para definir variáveis ​​para seus componentes, como definir quantos itens existem em um array. Por outro lado, passar dados por estado pode ser útil se você quiser passar objetos grandes (o que pode tornar seu aplicativo mais lento) ou definir funções que deseja chamar de seu componente filho. Vamos examinar ambas as abordagens e ver quando é apropriado usá-las em nosso código!

Você também pode gostar: Quais são as melhorias que o React JS oferece no WordPress sem cabeça?

Conclusão

Ao contratar um desenvolvedor ReactJS, certifique-se de escolher um freelancer com experiência em trabalhar com JavaScript, CSS, HTML e Node.js por mais de 5 anos. É importante que seu desenvolvedor possa demonstrar sua experiência fornecendo projetos de amostra e projetando projetos que sejam relevantes para seus requisitos específicos. Isso os ajudará a entender facilmente suas metas e objetivos de negócios.

Qualquer especialista sempre começará fazendo perguntas antes de iniciar qualquer trabalho. Portanto, contratar um especialista que faça perguntas nos momentos apropriados é uma obrigação ao construir um site usando o framework react. Um custo médio de contratação de desenvolvedores ReactJS seria entre US$ 40 e US$ 100 por hora. Mas os especialistas cobram mais do que o normal. Portanto, lembre-se disso ao fazer um orçamento para a criação de um site usando a estrutura de desenvolvimento ReactJS.

 Este artigo foi escrito por Rahul Kalsariya da Tagline Infotech LLP.