Como aprender React JS e dicas de carreira

O React JS é tão popular que achei necessário trazer um conteúdo introdutório para orientar seus conhecimentos e te ajudar a aprender o React JS!

Uma das bibliotecas front-end mais famosas do mundo possui uma variedade de ferramentas para ajudar no desenvolvimento de aplicações web. Você aprenderá mais sobre as vantagens de usar o React, seus elementos, como usar os componentes da ferramenta de diferentes maneiras e como começar a trabalhar e aprender o React!

O que é React?

React JS é uma biblioteca front-end baseada em JavaScript. Ele foi criado pela equipe de desenvolvimento do Facebook com o objetivo principal de fornecer aos desenvolvedores uma interface reutilizável comum.

Sua primeira versão foi lançada em 2013, e apesar de ser um framework mais novo, já é muito popular, com mais de mil colaboradores ativos no Github.

Ele usa componentes para ajudar a encapsular código e estado. O uso de componentes facilita a construção de interfaces de usuário mais complexas.

O React ainda usa JSX, uma sintaxe semelhante a XML que combina JavaScript e HTML, mas falaremos mais sobre isso posteriormente.

Mas por que o React JS é tão popular?

O React JS conquistou o desenvolvimento front-end. Isso acontece por vários motivos:

Menos complexo que as outras alternativas

Quando o React foi lançado em 2013, Angular 1.xe Ember.JS eram os principais frameworks na época. Mesmo assim, o React JS entrou no mercado como um framework de fácil integração com projetos existentes.

Isso atraiu muita atenção da comunidade front-end porque os benefícios de usar o React superam em muito os frameworks existentes.

Perfect timing

Naquela época, o Google anunciou o Angular 2.x, que trouxe algumas mudanças e incompatibilidades. A transição do Angular 1.x para o Angular 2.x é como migrar para uma nova estrutura.

Isso faz com que o React se destaque ainda mais como a melhor escolha. Se atualizar uma versão do Angular dá tanto trabalho, por que não mudar o framework e evitar fazer mais trabalho no futuro? Isto é o que eles fazem.

Mantido pelo Facebook

Uma das razões pelas quais o React é tão popular é que o Facebook é o principal mantenedor do projeto. Não apenas isso, mas é usado em sites como Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e muito mais, provando sua capacidade de atender a projetos de grande escala.

biblioteca-aprender-react

Por que usar o React JS?

DOM virtual em vez do DOM real;

Rápido e escalável;

O JSX fornece um código fácil de ler e escrever;

Facilmente integrável a outras estruturas JavaScript.

DOM virtual vs DOM real

DOM, abreviação de Document Object Model, é uma interface multiplataforma para representar e interagir com objetos em documentos XML e HTML.

A interface interpreta esses documentos como uma estrutura em árvore, onde cada ramo é um objeto que representa uma parte do documento.

Por exemplo, quando falamos de desenvolvimento web ou aplicativos móveis, DOM é usado para representar texto em HTML.

O React usa o que é chamado de DOM virtual, que é basicamente uma cópia simplificada do texto HTML do React, exceto que é uma representação do DOM real. O DOM virtual é melhor do que o DOM real porque é mais rápido e mais barato de usar.

É simples aprender React?

As informações que trago aqui podem dizer que o React é um framework simples, mas mergulhar fundo no React é complicado. Não por causa do framework em si, mas por causa das tecnologias embutidas nele, como Redux e GraphQL.

O React JS possui uma API simples, basicamente você precisa conhecer 4 conceitos:

Componentes;

JSX;

State;

Props;

Se todas essas empresas já estão usando React Native, você provavelmente já sabe para onde está indo, ou para onde está chegando, provavelmente estamos vendo cada vez mais oportunidades em torno de profissionais que entendem a ferramenta, e é por isso que neste artigo vou apresentá-lo às 3 estratégias que uso para aprender React Native.

1. Comece com o básico

Vejo muita gente querendo ir rápido ao começar a aprender React Native ou até mesmo outras ferramentas, pensando em grandes projetos que podem não ser possíveis até alguns meses de aprendizado, então comece pelo básico.

Você se lembra de quando criou seu primeiro Hello World em uma linguagem de programação? Não é ótimo? Torne sua jornada de aprendizado React Native maravilhosa dando pequenos passos para mostrar que você está progredindo (pequenos passos).

Além disso, não tente entender conceitos complexos e esqueça os nomes estranhos que você vê como Redux, Sagas, Thunk, Flux, Flow etc… você não precisa deles agora e se preocupe em usar sempre a melhor biblioteca para esta ferramenta Ecossistemas são inúteis em primeiro lugar porque é impossível e seu projeto precisará ser refatorado da mesma maneira o mais rápido possível.

Primeiro passo

Experimente aprender Javascript/ES6 antes de começar a usar React Native, isso lhe dará uma grande compreensão dos novos conceitos (estaremos lançando cursos gratuitos de Javascript e ES6, fique atento à nossa comunidade);

Configure seu ambiente de desenvolvimento, Android no Windows/Linux, recomendo iOS no Mac OS. Fiz um PDF ensinando como instalar e configurar o emulador, acesse aqui;

Faça o minicurso Rocketseat React Native para aprender os primeiros conceitos da biblioteca e construir seu primeiro projeto:

https://rocketseat.com.br/gostack-espera

2. Crie metas alcançáveis

Imagine se eu te dissesse que você precisa entregar um aplicativo de chat, quanto tempo você levaria? É difícil prever, certo? 1 semana, 2? Não sei. Agora, se eu fizer a seguinte pergunta:

Tela de login com e-mail/senha;

Uma tela de bate-papo em grupo com apenas um campo para inserir uma mensagem e enviar, todos receberão todas as mensagens;

Definir prazos é mais fácil, certo? Isso porque em cada etapa do desafio, é mais óbvio para você e mais fácil de alcançar. Você precisa fazer isso em seus estudos. Definir os pequenos passos que você deseja alcançar o ajudará a ver a luz no fim do túnel. Mas quais são esses passos? Eu recomendo o seguinte:

Componentização (explico no minicurso gratuito);

Estado e propriedades (explico no minicurso gratuito);

Trabalhar com API’s (https://www.youtube.com/watch?v=fBrOtR3pgPU)

Flexbox Layout (https://www.youtube.com/watch?v=Q7gT462aBU0)

Redux (https://www.youtube.com/watch?v=69e1MoUWE1g)

Redux Saga (https://www.youtube.com/watch?v=qU9DesjDJic)

Testes e TDD (explico no curso GoNative)

Push Notifications (explico no curso GoNative)

Build/entrega às stores (explico no curso GoNative)

Animações de UI (explico no curso GoNative)

3. Defina desafios pessoais

Se você se ater à teoria, pode chegar a lugar nenhum. Apesar de todos os livros que você leu e todos os vídeos que assistiu, dominar o código o levará ao próximo nível. Não se desespere quando encontrar problemas e bugs ao longo do caminho, eles lhe dirão que você está avançando.

Por isso, recomendo definir desafios pessoais e até mesmo vender/criar projetos para conhecidos que prometem completá-los, assim você chegará mais rápido aos seus objetivos. Não tenha medo de trabalhar em aplicativos menores em primeiro lugar, acredite em si mesmo e obtenha o código!

Mesmo que você não consiga vender ou criar projetos para pessoas próximas a você, você pode criar projetos pessoais. Duplicar apps é outra boa dica que dou, encontre seus apps favoritos no celular e tente duplicá-los, talvez nem todos os recursos, mas mesmo assim você terá um objetivo.

Suspeito que a abordagem de desafio funcione muito bem porque na Info Tech temos 7 aplicativos de desafio ao longo da jornada e é isso que leva os alunos ao próximo nível.

Conclusão

Claro que tudo isso leva muito tempo, mas se você realmente quer aprender React Native a sério e dominar a ferramenta em menos de 3 meses.