O mundo da programação está em constante mudança e a velocidade com que novas tecnologias se inserem no mercado é elevada.
O ecossistema Javascript é o mais rico e vibrante do momento no mundo do desenvolvimento, com grandes mudanças de paradigma e muitas tecnologias novas a aparecer (Node.js, React, Vue, Babel, Next.js, Polymer, Meteor, etc).
Existem várias soluções no mercado e uma delas é o “React”. Com ele surge uma nova oportunidade de emprego. Queres saber mais? É só fazeres scroll…
React tomou por completo o mundo do desenvolvimento em 1 ou 2 anos. Um novo padrão de programação de front-end, que acreditamos que veio para ficar, seja em que tecnologia for. A primeira biblioteca em 10 anos a conseguir ultrapassar o jQuery em popularidade - fonte: medium
Um paradigma de desenvolvimento mais escalável e mais eficiente em termos de manutenção. Ah e sabias que desde junho do ano passado React domina o mercado de contratação de tecnologia (segundo o Hacker News Hiring Trends)?
Tempo é dinheiro e os próximos minutos de leitura deste artigo podem ajudar-te a poupar tempo e apinha a ganhar o quê? €€€
Índice
- Resumo: O que é React.js
- Perspetivas de Emprego Em Portugal
- Que Linguagens Deves Aprender Previamente
- Antes de Explorar React.js
- Onde Aprender (cursos)
Resumo: O que é React.js
Comecemos pelo que não é: o React NÃO É UMA FRAMEWORK. “Ah mas li não sei onde e chamavam framework”. Bem, essa entidade podia estar equivocada. No site oficial podem ler a definição dada por eles.
React, também conhecida como React.js surgiu em 2013, mas há cerca de três anos, surgiu, também pelas mãos do Facebook, o React Native que é uma framework que pretende ser útil na criação de native mobile apps usando JavaScript e a biblioteca React.
Voltando ao React: basicamente o React é uma biblioteca de JavaScript para criar interfaces de utilizador (a parte do front-end, ou seja, o que o utilizador vê e interage) de forma fácil, em componentes (ou seja, de forma modular), o que permite a reutilização.
O React é útil para dados que precisam de ser atualizados constantemente e é eficiente pois só “carrega” os dados que mudaram, ou seja, quando os componentes atualizaram o seu estado.
Contudo esta biblioteca pode não ser suficiente para projetos mais complexos e nesses casos pode ser necessário utilizar outras bibliotecas e/ou outras linguagens, contudo “facilita muito a vida” de qualquer developer.
Perspetivas de emprego em Portugal
Uma rápida pesquisa no Google pode facilmente levar-te a concluir que há muita procura em Portugal e até no Mundo! O React já vai na versão 16.3.0, foi lançada no final de março! Vê no gráfico em baixo como a procura sobre esta tecnologia está a crescer nos fóruns. Vê também alguns exemplos de ofertas de trabalho.
Nesta última oferta podes ver que se preenchesses todos os requisitos poderias ganhar algo como 2.357€ a 3.000€ por mês. (De referir que não temos qualquer relação com a empresa nem conhecemos esta oferta especificamente. Além disso isto é um exemplo).
Apesar de se conseguir receber bem com esta proposta. Há propostas ainda mais aliciantes. Descobre Onde é que se pode ganhar mais (e melhor) em IT
Que Linguagens/Tecnologias Deves Aprender Previamente
Para entrares no mundo React terás de dominar:
- HTML
- CSS
- Javascript (+ ES6/7)
- DOM APIs
De referir que ES6, é uma nova versão do JavaScript. Tem como objetivo resolver alguns problemas da linguagem Javascript e facilitar o desenvolvimento. Não é obrigatório usar ES6 para utilizar React, mas o seu uso muito frequente por parte da comunidade React faz como se seja muito aconselhável sabê-lo.
Também é recomendado saberes JSX, não é “obrigatório” mas bastante aconselhável. Vê este exemplo:
No fundo com JSX o código fica mais organizado pelo que se torna mais legível e consequentemente de fácil manutenção. Além disso é mais rápido executar um ficheiro JSX do que um em JavaScript “puro”.
Se já sabes as tecnologias referidas acima estás no bom caminho, se ainda não sabes, continua a ler este artigo, que te vamos explicar onde as podes aprender!
Antes de Explorar React.js
Comecemos por entender o que é uma Single-page Application (SPA). Uma SPA é uma aplicação que carrega numa única página os respetivos ficheiros de HTML, JavaScript e CSS (no React com JSX estes componentes podem estar no próprio código e não em ficheiros externos).
Desta forma as interações existentes na página não exigem que se carregue toda a página, mas sim os campos que mudam.
Esta é precisamente uma das características do React: só os componentes que alteram de estado são novamente carregadas.
Isto torna a experiência do utilizador mais rápida uma vez que não exige uma nova comunicação com tantos dados entre o cliente e o servidor.
Conceitos da Biblioteca
É importante saberes que os elements são os “building blocks” das aplicações desenvolvidas em React. Eles descrevem aquilo que se quer ver no ecrã e são imutáveis. Normalmente os elements não são usados diretamente mas sim como retorno das components.
Components
Os components são pequenas e reutilizáveis peças de código que retornam um elemento. Podem ser separadas por funcionalidades e usadas com outros components.
Algo que seja reutilizado persas vezes pelo utilizador (como botões, comentários, etc) serão possivelmente components. O seu nome inicia-se com letra maiúscula
Lifecycle Methods
Às funcionalidades personalizadas que são executadas durante as diferentes fases de uma component dá-se o nome de lifecycle methods. Há métodos disponíveis quando a componente é criada ou removida do DOM.
Props
As propriedades ou "inputs" dos components são denominadas por props (de properties). Visam reduzir a duplicação de código, por isso os dados são passados da “componente pai” para a “componente filho”, por isso a props.children contém o conteúdo da parent component.
Decora: “Props: Take One Down, Pass It Around!”. As props são read-only, ou seja, são imutáveis. Se se tiver de mudar o estado em função de algo que o utilizador faça deve-se utilizar o state.
State
Quando alguma componente muda no decorrer do tempo tem de se usar o state. De referir que quando alguma parte dos dados tem de ser usado em diferentes partes, estes não devem ser sincronizados por diferentes componentes, mas devem ser colocados num componente superior onde possam ser transmitidos como props para ambos.
Controlled Component
No desenvolvimento de um site são bastante comuns formulários (form inputs).
Para lidar com isso a React disponibiliza controlled components que são controlados pela própria biblioteca, sendo manipulados e validados.
Se não forem renderizadas irão permanecer inalterados. Este tipo deverá ser escolhido face a uncontrolled components, que funcionam como elementos fora do React, ou seja, a biblioteca não vai poder “forçar” ou validar se os dados introduzidos pelo utilizador estão ou não corretos.
Keys
Para o React detetar quando um array de elementos é criado, alterado, reordenado ou removido, a biblioteca contém o que denomina por keys.
Estas têm de ser únicas entre os elements do array, mas não precisam de ser únicas em toda a aplicação (apesar de ser aconselhado que sejam). As keys têm obrigatoriamente de ser identificadores estáveis.
Events
O React possui o que denomina os events. O seu tratamento tem algumas peculiaridades: deve usar-se a seguinte sintaxe palavraPalavra.
Quando se usa JSX a function é passada como um manipulador de eventos em vez de uma string. Nesta biblioteca quando se faz handling events estes não podem ser pré-definidos como false.
Reconciliation
De forma resumida. O processo de reconciliation é simplesmente o processo de verificação/alteração em cada atualização
As grandes vantagens de React
Se chegaste até aqui no artigo, parabéns, tens as noções básicas de como funciona o React, uma biblioteca pequena mas poderosa. Mas quais as razões que levaram a esta adoção em massa do paradigma React?
Uma das grandes vantagens que React veio trazer foi um padrão de desenvolvimento no mundo do Front-End baseado na reutilização de componentes o que permite criar software mais escalável.
"Forçando" os programadores a seguir este simples paradigma conseguimos ter um standard de desenvolvimento front-end que facilita a manutenção do código e comunicação em grandes equipas, sem impor uma forma de pensar muio rígida de outras grandes tecnologias (Angular)
Ao mesmo tempo, é uma simples billioteca a que podemos adicionar mais módulos facilmente, de forma mais ágil.
Onde Aprender (cursos)
Como percebeste antes de aprenderes React deves ter conhecimentos de outras linguagens, por isso vamos colocar pela ordem que nos parece mais indicada:
- HTML & CSS (Domina o Básico - Curso Gratuito)
- JavaScript (CodeCademy, FCC)
- JSX (JSX Github)
- React.js (FCC)
Contudo, se perder tempo não é para ti. A forma rápida e simples de aprender a programar é através de um Bootcamp como o da Eddfisrupt.
Como Te Deves Preparar Para Um Emprego em React
O Front-End já não é o que era, hoje em dia não há empregador que não peça alguma Biblioteca ou Framework como React (Angular, Vue, etc)
Para estares preparado deves primeiro dominar bem HTML, CSS e JS no Front-End, conhecendo bem o DOM e até usar uma biblioteca mais antiga como jQuery. De seguida deves aprofundar os teus conhecimentos em Javascript moderno (ES6 e ES7), numa entrevista de React é quase certo que surjam perguntas a esse nível.
Para além do óbvio - criar vários projetos em React com dezenas de componentes e com as melhores práticas da comunidade React - não te fiques pelo básico e simplesmente usar o Create React App.
Aprodunda os teus conhecimento de como funciona o Babel, Webpack e as suas configurações, tal como entender os conceitos de transpilação e polyfill.
Cria um projeto com JSX e um sem JSX para teres uma visão mais diferenciada do que o React pode fazer. Por fim, experimenta outra tecnologia no ecossistema React como o React router ou Redux.
Mais Informação
Ficaste interessado e este artigo não chegou para ti? ÓPTIMO! Começa por ler estes artigos:
