React Native está se tornando a solução definitiva para criar aplicativos em várias plataformas. O que React Native oferece é a possibilidade de criar aplicativos móveis nativos usando apenas JavaScript.

Neste artigo, vou fazer uma comparação entre React e React Native, e quais são as primeiras coisas que um Desenvolvedor React deve saber antes de começar a programar.

Blocos de construção

React Native usa o mesmo design do React, você usará JSX e JavaScript para criar seus componentes. No entanto, você tem que prestar atenção a algumas particularidades.

Você não está escrevendo para a web, então você não pode usar os elementos regulares de HTML, como div, input, span, button, etc… Ao invés desses elementos regulares, você tem um monte de componentes nativos que React Native fornece. É possível encontrá-los aqui.

Por exemplo, você pode usar um componente View em vez de um div, e usar um Text onde você usaria um span.

import React, { Component } from 'react';
import { Text } from 'react-native';
const HelloWorld = () => (
  <Text>Hello world!</Text>
);

Para informar React Native sobre qual componente é a raiz em seu aplicativo, você deve usar AppRegistry.

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
import HelloWorld from './HelloWorld';

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorld);

Geralmente, esse código entra no arquivo index.ios.js ou index.android.js. O resultado será como mostrado abaixo:

Componentes de estilização

React Native suporta a maioria das propriedades CSS. Se você estiver familiarizado com o CSS regular, você não terá grandes problemas para modelar seus componentes.

Vamos nos concentrar nas principais diferenças. Em React Native, você não é capaz de usar folhas de estilo, você tem que usar estilos inline. Eu sei que pode parecer estranho, mas é apenas como ele funciona e ele funciona muito bem.

Largura e Altura: Todas as dimensões são sem unidade e representam pixels de densidades  independentes. Em outras palavras, você não é capaz de usar porcentagem para definir largura, altura, preenchimento ou margem.

Veja o código abaixo e seu resultado:

import React, { Component } from 'react';
import { View } from 'react-native';

const FixedDimensionsBasics  = () => (
  <View>
    <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
    <View style={{ width: 100, height: 100, backgroundColor: 'skyblue' }} />
    <View style={{ width: 150, height: 150, backgroundColor: 'steelblue' }} />
  </View>
);

React Native não suporta porcentagem, mas ele suporta totalmente Layout Flexbox. Assim, você é capaz de criar layouts consistentes para diferentes tamanhos de tela.

Flexbox funciona da mesma maneira em React Native como faz em CSS na web, com algumas exceções. Os padrões são diferentes, com flexDirection sendo padrão para coluna em vez de row, e o parâmetro flex apenas suportando um único número. Veja a documentação.

Observe o código abaixo usando Flexbox:

 

import React, { Component } from 'react';
import { View } from 'react-native';

const FlexDirectionBasics = () => (
  <View style={{ flex: 1, flexDirection: 'row' }}>
    <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
    <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
    <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
  </View>
);

Além das particularidades sobre os valores de dimensão e valores padrão, alguns componentes suportam apenas atributos de estilo específicos. Por exemplo, você não pode usar atributos de fonte (fontSize, FontFamily, cor) em uma View esperando que os textos dentro dele herdem o estilo. É possível verificar todos os atributos permitidos dentro da documentação de cada componente. Confira os atributos permitidos para o componente View aqui.

Para obter informações mais detalhadas sobre o estilo, experimente a seção Estilo na documentação do React Native.

Eventos e interação do usuário

Em React, geralmente capturamos eventos de interação passando manipuladores de eventos para props específicos, como onClick, onFocus e onBlur. Em React Native, você pode fazer o mesmo, de forma semelhante.

Para criar um botão, por exemplo, você deve usar um componente tappable nativo, como TouchableHighlight, TouchableNativeFeedback, TouchableOpacity ou TouchableWithoutFeedback. Esses componentes são capazes de capturar eventos de toque. Para fazer isso, basta passar um manipulador de eventos para onPress.

import React from 'react';
import { Text, TouchableHighlight } from 'react-native';

class MyButton extends Component {
  _onPressButton() {
    console.log('You tapped the button!');
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

Também é possível pegar um longo evento press, passando apenas um manipulador de eventos para onLongPress, da mesma forma que fizemos com onPress.

Outro evento comum que é diferente é onChange, usado principalmente com componentes de entrada. Agora basta usar onChangeText em vez disso.

import React, { Component } from 'react';
import { TextInput } from 'react-native';

class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <TextInput
        onChangeText={(text) => this.setState({ text })}
        value={this.state.text}
      />
    );
  }
}

Conclusão

React Native é um projeto muito legal. O Facebook está investindo muito nisso e muitas empresas já adotam essa tecnologia, então você certamente pode dizer que é seguro para a produção. Com o React Native, é fácil criar e enviar aplicativos móveis nativos.

Com certeza, há muito mais sobre o React Native do que poderíamos abordar neste post. Se você estiver disposto a mergulhar nisso, gostaria de lhe avisar para começar a partir da Documentação, a comunidade tem feito um trabalho incrível lá.

Agradecimentos a Julia Possamai.

***

Artigo traduzido com autorização. Publicado originalmente em https://blog.coderockr.com/react-native-for-react-developers-769cca5ca6cc#.k32gxtxg8