React: seu guia completo para iniciantes para usar o ReactJS

Você já ouviu falar sobre o ReactJS, mas não sabe por onde começar? Você já começou a brincar com o ReactJS, mas não sabe como usá-lo no seu dia-a-dia? Este artigo será seu guia para aprender e dominar a biblioteca React JavaScript, a biblioteca mais popular usada pelos desenvolvedores atualmente. Mostrarei exatamente como começar com 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 entrar e contribuir com código sem ter qualquer experiência (ou conhecimento) com 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 são fáceis para os usuários finais entenderem e se envolverem.

Para desenvolvedores que trabalharam apenas 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 uma barra de navegação. Como o React usa o DOM virtual em vez de escrever e reescrever elementos DOM reais toda vez que há uma mudança no estado (como geralmente é feito no Angular), o uso do React pode economizar um tempo valioso, permitindo menos linhas de código, além de tornar seus aplicativos mais rápidos do que eram antes da.

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 o Node ou outro ambiente do lado do servidor? Você também pode usar npm e Browserify para isso também. Depois de ter tudo instalado, crie um arquivo HTML com seu editor de texto favorito. Caso contrário, use um gerador padrão como Create-React-App que cria um projeto inicial básico para você que já tem 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 escrito em JSX. É mais fácil manter todos os nossos componentes React em um único diretório (o que você deve fazer). Então, vamos criar um diretório src/components vazio e mover 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 o babel; Você também precisará instalar o Babel via npm install –save babel-CLI babel-preset-es2015 babel-preset-react, que fará o Babel compilar sua nova sintaxe JSX.

Comece a construir 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 em que tudo o que você precisa fazer é trocar seu código de back-end e componentes de front-end. Ele vem equipado com tudo o que você precisa, incluindo imagens, para garantir que seja tão bom quanto funciona.

Não tem vontade de codificar você mesmo? Sem problemas! Você pode realmente copiar todos os nossos componentes seguindo estas etapas fáceis. Depois de copiá-los em 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 em sua 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) aumenta 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 os 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 as duas linguagens 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. Assim que terminar de rodar, navegue em seu diretório recém-criado digitando cd react_tutorial. Em seguida, abra seu terminal e inicie o Node.js digitando node -v.

Você deverá ver v10.x listado ao lado de Node se tiver o Node instalado com sucesso. Caso contrário, tente usar 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 lá! Depois que o Node estiver instalado corretamente com a versão 10+, estamos prontos para continuar criando nosso projeto do zero!

Estático vs Dinâmico vs 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 (react-markup), solicitações AJAX dinâmicas (react-data) e reutilização de elementos DOM existentes (react-pure). 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ê sabe que certos elementos sempre estarão disponíveis, você pode 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 melhor se adequa ao seu projeto, é importante pensar em quão estável e permanente será cada parte do seu aplicativo.

Métodos de ciclo de vida em componentes ReactJS

Existem vários 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 a montagem e renderização de um componente. 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 singular. Para entender por que devemos primeiro considerar como a maioria dos frameworks lida com 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 fazê-lo. 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 simples o suficiente 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. A passagem de dados por meio de props pode ser útil para definir variáveis ​​para seus componentes, como definir quantos itens existem em um array. Por outro lado, passar dados via estado pode ser útil se você quiser passar objetos grandes (o que poderia tornar seu aplicativo mais lento) ou definir funções que você deseja chamar de dentro do seu componente filho. Vamos examinar as duas 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 Headless WordPress?

Conclusão

Ao contratar um desenvolvedor ReactJS, certifique-se de escolher um freelancer que tenha 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 a estrutura de reação. 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, tenha isso em mente ao fazer um orçamento para configurar um site usando a estrutura de desenvolvimento ReactJS.

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