Introdução
Se você deseja levar sua carreira como desenvolvedor para o próximo nível, precisa ter o React e o React Native em seu cinturão de ferramentas. A criação de aplicativos móveis usando estruturas de plataforma cruzada se tornou a tendência de desenvolvimento atualmente. Estruturas de aplicativos de plataforma cruzada, como React Native, podem ajudá-lo a desenvolver aplicativos móveis nativos que funcionam em dispositivos Android e iOS.
Neste guia, vou listar as tecnologias e habilidades que você deve ter antes de começar a usar o React Native.
O que é React Native?
React Native é uma estrutura JavaScript usada para construir aplicativos de plataforma cruzada e renderização nativa. É baseado na biblioteca React criada pelo Facebook. Semelhante ao React, o React Native é usado para construir componentes da interface do usuário, com um benefício adicional: React Native pode renderizar a interface do usuário em diferentes plataformas, não apenas no navegador. Além de aplicativos baseados na web, o React Native pode ser usado para criar aplicativos para Android, iOS, macOS e Windows.
O React Native fornece um conjunto padrão de APIs para a construção de componentes de IU, permitindo que os desenvolvedores escrevam código apenas uma vez e o executem em várias plataformas. O React Native é muito fácil de aprender para quem vem de uma experiência em desenvolvimento web.
Um desenvolvedor que conhece o React pode direcionar e construir aplicativos para qualquer plataforma suportada pelo React Native. HTML, CSS e JavaScript são as principais tecnologias da web necessárias para aprender o React. React é puramente escrito em JavaScript com alguma sintaxe semelhante a HTML chamada JSX para criar os componentes de IU. Usando CSS, você pode definir o estilo dos componentes da interface do usuário aplicando várias regras de estilo. As mesmas habilidades também são necessárias para o React Native, já que é baseado no React.
Agora, vamos dar uma olhada nessas tecnologias individualmente para que você tenha uma ideia melhor de como se preparar antes de aprender o React Native.
HTML e CSS
HTML e CSS são as tecnologias principais no desenvolvimento da web. HTML é o esqueleto que cria os elementos e layouts de uma página da web, e CSS adiciona estilo a esses vários elementos e layouts. Dominar HTML e CSS é uma etapa vital, pois essas serão sua base para o restante das tecnologias a seguir (e desenvolvimento da Web em geral).
Recursos para aprender HTML e CSS
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://developer.mozilla.org/en-US/docs/Learn/HTML/IntroductiontoHTML
- https://developer.mozilla.org/en-US/docs/Aprenda/CSS
JavaScript
Assim que estiver familiarizado com HTML e CSS, você pode começar a aprender JavaScript. JavaScript é uma linguagem de script que permite adicionar interações e lógica às suas páginas da web. Usando JavaScript, você pode “ouvir” eventos como cliques em botões ou foco de entrada e adicionar interatividade aos seus aplicativos.
Da mesma forma, no React Native, você pode ouvir vários eventos, acessar APIs nativas e escrever a lógica de negócios principal usando JavaScript. Portanto, é vital se familiarizar com o JavaScript antes de aprender o React Native.
Fundamentos de JavaScript
A primeira coisa que você deve cobrir em JavaScript são os fundamentos da linguagem. Isso significa familiarizar-se com a sintaxe e as operações básicas, compreender como declarar variáveis e objetos e definir e chamar funções. Você também deve aprender a trabalhar com objetos, matrizes, strings e datas, usando os métodos integrados do JavaScript.
Manipulação DOM
Ao escrever JavaScript, uma das coisas mais comuns que você fará é manipular o DOM.
O Document Object Model (DOM) é uma estrutura em árvore que representa a página da web atual. A API DOM do navegador permite que os desenvolvedores acessem elementos HTML programaticamente para adicionar a lógica de negócios necessária.
Por exemplo, você pode alterar a cor de um texto quando o ponteiro do mouse passa sobre ele:
Olá Mundo
const text=document.getElementById ("sampleText"); text.addEventListener ("mouseover", function () { text.style.color='red'
});
O objeto document possui diferentes métodos para acessar e adicionar interatividade aos elementos HTML. Você pode verificar a manipulação de DOM em mais detalhes aqui .
Recursos modernos (ES6 +)
O JavaScript percorreu um longo caminho desde o seu início. Novos recursos estão sendo adicionados ativamente todos os anos e, como um desenvolvedor de JavaScript, você precisará acompanhá-los. Desde 2015, muitos recursos como funções de seta, desestruturação de objetos e matrizes e declarações de variáveis const e let foram introduzidos e são comumente usados ao trabalhar com bibliotecas como React.
Outro recurso importante a aprender é como usar a Fetch API para obter e enviar dados para serviços externos. Este é um requisito muito comum na maioria dos aplicativos da web e móveis.
Aprender os fundamentos do JavaScript e os recursos do ES6 + fornecerá uma base sólida e ajudará você a entender melhor os conceitos básicos do React Native.
Até agora, as tecnologias mencionadas até agora são muito comuns no desenvolvimento web. A partir daqui, você pode escolher dominar uma biblioteca JavaScript como React, ou uma estrutura como Vue ou Angular, e é aí que você pode realmente mergulhar fundo no mundo do JavaScript.
Antes de passar para as estruturas, no entanto, é crucial que você tenha um conhecimento profundo de HTML, CSS e JavaScript, pois essas são as habilidades fundamentais que você exigirá mais adiante em sua jornada de desenvolvimento.
Recursos para aprender JavaScript
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Are-Introductionto_JavaScript
- https://javascript.info
- https://www.w3schools.com/js
Reaja
React é uma biblioteca JavaScript que permite aos desenvolvedores criar componentes de interface do usuário. As páginas da web tradicionais usam HTML e CSS para construir a IU, mas com React, a IU é construída puramente usando JavaScript. O React também é conhecido por conter um DOM virtual sob o capô, que é usado em vez de manipular o DOM diretamente.
Dominar o React antes de aprender o React Native tornará seu trabalho muito mais fácil. Embora React e React Native sejam usados para desenvolver aplicativos para plataformas diferentes, eles são muito semelhantes na sintaxe. Além disso, eles são baseados na mesma linguagem de programação-JavaScript.
Virtual DOM
O React cria um v IRtual DOM (VDOM), que é uma representação de objeto da estrutura DOM a ser renderizada na página da web. Se você deseja obter uma compreensão mais profunda de como o React funciona internamente, deve aprender sobre o VDOM. Virtual DOM é um conceito agnóstico de framework, então também é usado em outros frameworks como o Vue.
JSX
Usando o React, você pode construir componentes de IU reutilizáveis e passar dados entre eles. Os componentes são escritos usando uma extensão especial de sintaxe JavaScript chamada JSX (JavaScript XML) .
JSX é semelhante à sintaxe HTML e é muito poderoso, pois pode lidar com expressões JavaScript. Em JSX, em vez de atributos HTML, props são usados para passar dados do componente pai para o componente filho.
Tratamento de dados
Os componentes também podem manipular seus dados internamente usando state . props e state são dois conceitos muito importantes no React. Ter uma compreensão clara de como o tratamento de dados é feito no React é vital, pois é algo que você fará com bastante frequência.
Componentes de reação
Existem dois tipos de componentes-componentes de classe e componentes de função. Os componentes da classe React têm diferentes métodos de ciclo de vida que são chamados durante o processo de renderização. Os componentes da função React podem aproveitar ganchos para lidar com diferentes estados. Ambos os tipos de componentes têm seus prós e contras, e você precisa saber qual deles se adapta ao seu caso de uso.
Aprendizagem adicional
Depois que os princípios básicos do React forem abordados, você poderá mergulhar em tópicos avançados, como contexto, padrões de componentes, portais e testes de componentes. Além disso, você pode experimentar diferentes bibliotecas de terceiros, como Redux, Material UI ou Axios. Familiarize-se com os instaladores de pacotes npm ou yarn, pois você lidará com pacotes com frequência.
O melhor lugar para aprender o React é na documentação oficial . Se a leitura não é sua praia, você pode encontrar muitos recursos no YouTube e Udemy.
Tópicos como JSX, componentes, métodos de ciclo de vida, ganchos e gerenciamento de estado são os principais elementos do desenvolvimento de aplicativos com React Native. Você trabalhará nos tópicos mencionados acima diariamente como um desenvolvedor do React Native, então você deve se familiarizar com eles antes de aprender o React Native.
Conclusão
A esta altura, espero que você tenha uma ideia clara sobre os tópicos e tecnologias que precisa aprender antes de entrar no React Native. Neste guia, discutimos como aprender tecnologias da web como HTML, CSS, JavaScript e React pode ajudá-lo a aprender React Native. Eu recomendo fortemente que você se familiarize com o JavaScript, pois é a linguagem de programação usada no React Native. Ter uma base sólida lhe dará uma vantagem no aprendizado e também o ajudará a depurar e solucionar problemas com mais rapidez.
Para se preparar para aprender o React Native, você também pode aprender um pouco sobre as linguagens Java e Swift ou Objective-C, pois essas são as linguagens de programação nativas subjacentes para o desenvolvimento Android e iOS.
Fazer apenas a teoria não é suficiente. Depois de se familiarizar com a sintaxe, comece criando miniprojetos como uma calculadora de dicas ou gerador de senha. Conforme você pratica, mais você entenderá e se deparará com desafios. Quanto mais você resolver problemas, melhor. Se você ficar preso em um problema, pode pesquisar na web, pois a maioria das soluções já está disponível.
A postagem O que você deve aprender antes de aprender React Native apareceu primeiro no LogRocket Blog .
