ReactNative — O que precisamos saber

1. O que é React?

React é uma biblioteca JavaScript open-source desenvolvida pelo Facebook, usada para construir interfaces front-end, voltada principalmente para aplicativos single page. React tem o foco na construção de componentes, o que ajuda a tornar o código reutilizável.

O React Native é um framework baseado em React, desenvolvido pela equipe do Facebook, que possibilita o desenvolvimento de aplicações mobile, tanto para Android, como para iOS, utilizando apenas Javascript.

2. Cite algumas funcionalidades do React.

• Segue um fluxo de dados unidirecional, que é de cima para baixo na aplicação.
• Utiliza componentes reutilizáveis para o desenvolvimento da UI da aplicação.

3. Quais são as vantagens do React?

• Facilita a criação de componentes reutilizáveis para a interface da aplicação.
• É de fácil integração com outros frameworks, por ser uma biblioteca de UI (sendo apenas o “V” — view — da arquitetura MVC).
• Possui o padrão de sintaxe JSX, que facilita a criação de componentes de UI.

4. Quais as limitações do React?

• React não é um framework completo, é apenas uma biblioteca, portanto geralmente não funciona sozinho.
• Requer um boilerplate considerável, ou seja, um código mínimo inicial, geralmente com ferramentas de build, além da própria biblioteca do React, o que gera um certo peso e trabalho, mesmo para fazer uma aplicação bastante simples.
• Curva de aprendizado pode ser difícil para iniciantes, pois dependendo da referência, o React introduz um novo paradigma para construção de aplicações.
• O código pode ficar bastante complexo quando aliado à estilização inline.

5. O que é JSX?

JSX é uma abreviação de JavaScript XML. Em termos simples, é código JavaScript que utiliza o estilo de sintaxe do HTML para tornar o código mais fácil de entender. Por debaixo dos panos, o código JSX se transforma no React.createElement(), que gera os elementos DOM que estamos acostumados. Abaixo um exemplo de código JSX:

<View styles={{styles.btn}} onClick={ ()=> onClick()}>Login</View>

6. Como se cria Higher Order Components (HOCs) em React?

Higher Order Components em React são criados através de uma função que recebe como parâmetro um componente, e retorna um novo componente.

É basicamente uma forma de reutilizar a lógica de um componente, encapsulando-o com uma função e gerando dinamicamente um novo componente.

Você pode usar HOCs para o seguinte:

• Injetar ou manipular props e state.
• Alterar a renderização do componente.
• Reutilizar ou abstrair a lógica de um componente existente.

7. O que é state em React?

State é um objeto JavaScript que mantém o estado de um componente em React, ou seja, ele mantém todas as informações que aquele componente precisa durante seu ciclo de vida.

O objeto state é imutável, individual, e não é compartilhado entre outros componentes.

8. Por que não podemos alterar o objeto state diretamente?

Alterar o objeto state diretamente não vai disparar render().

O correto é usar o método setState(), que agenda uma nova atualização de state e em seguida renderiza novamente o componente.

9. Pra que serve o segundo argumento de setState?

O segundo argumento de setState é uma função callback, que é chamada quando o método setState() finaliza e o componente é re-renderizado, já que setState() é um método assíncrono.

É importante usar este callback quando você precisar garantir que aquele trecho de código deve ser executado sempre depois que o state foi devidamente atualizado.

10. O que faz o método render?

O método render() do React.Component é responsável por gerar o novo DOM daquele componente.

Basicamente, este método renderiza o componente de acordo com o estado e propriedades atuais. Por padrão, ele é chamado sempre que o objeto props ou state é alterado.

11. O que são props em React?

Props são as propriedades dos componentes. A nomenclatura e a forma de atribuição é similar aos atributos HTML. O papel das props é passar informações do componente “pai” para os componentes “filho” e chamar a mudança de estado de componentes.

12. O que são keys em React?

Uma key é um tipo especial de prop. Ela é definida por uma string e é usada pelo React no algoritmo de diferenciação para identificar mudanças no DOM Virtual.

É comum utilizar a propriedade key em arrays de componentes, para que o React tenha um comportamento estável quanto à cada item de uma lista

13. O que é Flux?

Flux é um paradigma que difere do MVC tradicional. Apesar de existirem bibliotecas que implementam o Flux, o Flux em si não é uma biblioteca.

Flux usa o padrão unidirecional de fluxo de dados do React em uma arquitetura que se baseia em store, dispatcher e action.

14. O que é Redux?

Redux é uma biblioteca usada para manter todo o estado da aplicação em um mesmo container, que então é passado para todos os componentes da aplicação, de forma unidirecional. Redux usa o conceito de store, action e reducer:

• Store: É onde o estado da aplicação é salvo. É imutável e garante que todos os componentes tenham um estado consistente, em uma estrutura previsível.
• Actions: É um objeto que descreve que tipo de ações podem acontecer para alterar o estado do store.
• Reducers: São funções que pegam o estado atual + a ação despachada e retornam um novo estado para a aplicação.

15. O que são arrow functions? Qual a vantagem no React?

Arrow functions foram introduzidas no ES6 e são uma forma de abreviar a sintaxe da função padrão com function() {}.

Diferente da sintaxe padrão, as arrow functions não tem seu próprio contexto (this, arguments, super). Elas são úteis também como “higher order functions”, ou seja, funções que englobam outras funções, o que no React é legal, pois dispensa o uso de binding.

Sintaxe de uma arrow function:

const soma = (a, b) => {
	return a + b;
}

Arrow como higher order function:

render() {
	<View onChange={ (event) => { this._onChange(event) } } />
}

16. Quais as diferenças entre class Component e functional Component?

Class Components são instanciados por uma classe JavaScript e permitem funcionalidades adicionais, como ter métodos específicos e principalmente, manter um state interno.

/* Exemplo de um stateless class component */
class App extends React.Component {
	render() {
		return <div>Hello world!</div>
	}
}
/* Exemplo de um stateful class component */
class App extends React.Component {
	constructor(props) {
		super(props);
		
		this.state = {
			message: 'Hello World'
		}
	}
	render() {
		return <div>{ this.state.message }</div>
	}
}

Class Components podem ou não ter state, como no exemplo acima.

Já functional Components são instanciados por uma função, que é basicamente um render, portanto por padrão eles não possuem state, mas podem possuir props.

import { View } from 'react-native';
const App = (props) => (
	<View>Hello World</View>
)

Você pode ter state em functional Components através de Hooks:

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';
const App = (props) => {
    const [ message, setMessage ] = useState('Hello World');
	
    return <View>
	      { message }
	      <TextInput styles={{styles.text}} value={ message }    onChangeText={text => setMessage(text)} />
	   </View>
}