React Native Roadmap

O propósito deste documento é servir como um guia contendo os principais aspectos necessários para um desenvolvedor React Native conseguir desempenhar um bom trabalho.

Fundamentos

Fundamentos em JavaScript

Para alcançar bons resultados em React Native, é fundamental dominar os fundamentos do JavaScript, sabendo trabalhar com estruturas de dados, escrever um código otimizado e entender sobre o funcionamento da linguagem.

Conceitos importantes

• Escopo e Clojures

  • JavaScript Functions  — Understanding The Basics
  • You Don't Know JS: Scope & Closures [Book]

• JavaScript Engines (o básico)

  • JavaScript Engines

• Bitwise Operators

  • Programming with JS: Bitwise Operations
  • Conditional Rendering

• Laços

  • for vs forEach vs for..in vs for..of

• map, reduce e filter

  • JavaScript Functional Programming — map, filter and reduce

• Arrow Functions

  • JavaScript — Learn & Understand Arrow Functions
  • When (and why) you should use ES6 arrow functions — and when you shouldn’t

• Pure Functions

  • Understanding Javascript Mutation and Pure Functions

• Promises

  • Promise — MDN
  • What is a Promise?

• async/await

  • async/await — JavaScript.Info
  • Understanding JavaScript’s async await

Node e Npm

Boa parte do ecossistema do JavaScript gira em torno do Node e do NPM. Para que o React Native funcione isso não é diferente, então entender o básico sobre essas tecnologias acaba se tornando fundamental.

• NodeJs: https://nodejs.org/en/docs/
• Npm: https://docs.npmjs.com/

Tecnologias nativas

Para melhorar a experiência de desenvolvimento e alcançar melhores resultados, é importante ter familiaridade com ferramentas usadas no ecossitema "nativo". Saber programar em tecnologias nativas (Java, Kotlin, Objective-C ou Swift) é um diferencial, mas não algo fundamental, porém entender sobre o ferramental ao redor dessas plataformas e como ambas se comportam é importante.

Android

Importante ter o Android Studio instalado e com uma máquina virtual (AVD) instalada e pronta para rodar as aplicações.

Link: https://developer.android.com/studio/

iOS

Imporatnte ter o XCode instalado e também pronto para executar aplicações. A instalação pode ser feita através da App Store.

Importante ressaltar que o CocoaPods é o gerenciador de dependências default adotado em aplicações React native, dessa forma é necessário tê-lo instalado na máquina.

Link: https://cocoapods.org/

React

Antes de se aprofundar em React Native é fundamental aprender os fundamentos do React primeiro, visto que muitos aspectos são compartilhados entre a Web e o Native e portanto isso impacta bastante na curva de aprendizado da tecnologia.

O React oferece uma ótima documentação para quem está começando ou deseja se aprofundar em alguns aspectos da biblioteca. Abaixo estão listados alguns dos mais fundamentais:

• Introducing JSX
• Components and Props
• State e Lifecycle
• Composition vs Inheritance

State Management

Como geralmente em aplicações React Native toda a regra de negócio da aplicação é escrita em JavaScript, na maioria dos casos compartilhamos o mesmo ecossistema e consequentemente as mesmas bibliotecas para manipulação de estado em React e React Native.

Entender sobre manipulação de estado e como trabalhar com ferramentas que facilitam isso é fundamental para desenvolver aplicações robustas em React Native.

No caso da ioasys, adotamos o Redux como biblioteca principal, por ser a biblioteca com a maior adoção no mercado de trabalho e consequentemente possuir a maior comunidade.

Alguns links úteis:

• Getting Started with Redux
• Introduction To State Management With React

Para entender melhor sobre o funcionamento do Redux com o React, também é fundamental ler a documentação da biblioteca:

• Quick Start
• React Redux Hooks

Outra solução muito interessante para manipulação de estado está presente no core do React, ou seja, não é necessário instalar nenhuma dependência para conseguir compartilhar estado através dos componentes sem cair no cenário de prop drilling.

• React Context API

React Native

Para conseguir alcançar resultados que vão além de "criar uma tela" é importante aprofundar um pouco no funcionamento do React Native e entender o que se passa por baixo dos panos.

Mas antes de entrar nesse aspecto é importante entender os fundamentos por trás do React Native.

• Learn the Basics

React Navigation

Qualquer tipo de aplicação não muito básica necessita de lidar com navegação entre as telas, como o React Native não oferece nenhuma solução "out of the box" podemos usar soluções open source criadas e mantidas pela comunidade.

A solução mais robusta e que vem mais ganhando popularidade nos últimos anos é o React Navigation.

• Getting started

Prettier

O Prettier é um formatador que reescreve todo o código do zero seguindo uma série de regras e garantindo um padrão de estilo. A ferramenta torna o código mais legível e facilita o trabalho de diversos desenvolvedores de um mesmo projeto.

Sobre o Prettier e Documentção

• Instalação

1. No VSCode ir na área de extensões, procurar por Prettier e instalá-la.
2. No arquivo de configuração do VSCode inserir:

{
  ...
  "[javascript]": {
    "editor.formatOnSave": true
  },
  ...
}

• Configuração:

1. Caso não exista, criar um arquivo com o nome .prettierrc na raiz do projeto (versões do React Native > 0.61.0 criam este arquivo automaticamente em novos projetos)

2. O arquivo deve conter o seguinte código:

{
	"arrowParens": "avoid",
	"bracketSpacing": true,
	"htmlWhitespaceSensitivity": "css",
	"insertPragma": false,
	"jsxBracketSameLine": false,
	"jsxSingleQuote": true,
	"proseWrap": "always",
	"quoteProps": "as-needed",
	"requirePragma": false,
	"singleQuote": true,
	"tabWidth": 2,
	"trailingComma": "none",
	"useTabs": false,
	"printWidth": 80
}

Para maiores dúvidas e/ou informações, contate o líder técnico

---

ESLint

O ESLint é uma ferramenta utilizada para fazer análises estatísticas de código buscando trechos que não condizem com padrões de boas práticas. Ele facilita a descoberta de erros além de manter o código limpo e organizado de maneira fácil e prática.

Sobre o ESLint e Documentção

Nós possuímos um padrão base do ESLint que deve ser implementado em todos os projetos. Caso necessário, os desenvolvedores responsáveis por cada projeto têm liberdade para implementar novas regras, desde que sejam mantidas as regras base.

• Instalação:

1. No VSCode ir na área de extensões, procurar por ESLint e instalá-la.
2. Na linha de comando executar: yarn add eslint -D

Nossas regras do ESLint utilizam algumas bibliotecas com definições de regras que devem ser instaladas via linha de comando:

3. eslint-config-airbnb: yarn add eslint-config-airbnb -D
4. eslint-config-prettier: yarn add eslint-config-prettier -D
5. eslint-plugin-prettier: yarn add eslint-config-airbnb -D
6. eslint-plugin-react: yarn add eslint-plugin-react -D
7. eslint-plugin-react-hooks: yarn add eslint-plugin-react-hooks -D
8. eslint-plugin-import: yarn add eslint-plugin-import -D

• Configuração:

1. Caso não exista, criar um arquivo com o nome .eslintrc.js na raiz do projeto (versões do React Native > 0.61.0 criam este arquivo automaticamente em novos projetos)

2. O arquivo deve conter o seguinte código:

module.exports = {
  	parser: "babel-eslint",
	extends: ["airbnb", "plugin:prettier/recommended", "prettier/react"],
	plugins: ["react", "prettier", "react-hooks"],
	globals: {
		__DEV__: true,
		fetch: false,
	},
	env: {
		jest: true,
	},
	rules: {
		"comma-dangle": "off",
		"react/jsx-filename-extension": [1, {extensions: [".js", ".jsx"]}],
		"import/prefer-default-export": "off",
		"react/jsx-one-expression-per-line": "off",
		"react/prop-types": ["error", {ignore: ["navigation"]}],
		"react/state-in-constructor": "off",
		"react-hooks/rules-of-hooks": "error",
		"react-hooks/exhaustive-deps": "warn",
		'import/order': [
			'error',
				{
					groups: ['external', ['internal', 'sibling']]
				}
		],
		strict: 0
	},
};