React Native – Aprenda o básico

React Native – Aprenda o básico: Antes de mais nada React Native é como React, mas usa componentes nativos em vez de componentes da Web como blocos de construção. Portanto, para entender a estrutura básica de um aplicativo React Native, você precisa entender alguns dos conceitos básicos do React, como JSX, componentes state e props.

Se você já conhece o React, ainda precisa aprender algumas coisas específicas do React-Native, como os componentes nativos. Portanto este tutorial é destinado a todos os públicos, tenha ou não experiência com o React.

Vamos fazer isso.

Olá Mundo

De acordo com as tradições antigas de nosso povo, precisamos primeiro criar um aplicativo que não faça nada, exceto dizer “Olá, mundo!”. Aqui está:

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

Se você estiver curioso, pode brincar com o código de amostra diretamente nos simuladores da web. Nesse sentido você também pode colá-lo no seu arquivo App.js para criar um aplicativo real na sua máquina local.

O que esta acontecendo aqui?

Algumas das coisas aqui podem não parecer JavaScript para você. Não entre em pânico. Este é o futuro.

Antes de tudo, o ES2015 (também conhecido como ES6) é um conjunto de melhorias no JavaScript que agora faz parte do padrão oficial, mas ainda não é suportado por todos os navegadores, e muitas vezes ainda não é usado no desenvolvimento da web. Reaja aos navios nativos com suporte do ES2015, para que você possa usar essas coisas sem se preocupar com a compatibilidade. import, from, class, E extends no exemplo acima são todos os recursos ES2015. Logo se você não estiver familiarizado com o ES2015, todavia provavelmente poderá adquiri-lo apenas lendo o código de exemplo como este tutorial. Se desejar, esta página possui uma boa visão geral dos recursos do ES2015.

Além disso, outra coisa incomum neste exemplo de código é Hello world!. Esta é JSX – uma sintaxe para incorporar XML em JavaScript. Muitas estruturas usam uma linguagem de modelo especial que permite incorporar código na linguagem de marcação. Sendo assim em React, isso é revertido. O JSX permite que você escreva sua linguagem de marcação dentro do código. A princípio parece HTML na Web, exceto em vez de coisas na Web como

ou , você usa componentes React. Nesse caso, é um componente interno que apenas exibe algum texto e Viewé como o ou .

Componentes | React Native – Aprenda o básico

Portanto, este código está definindo HelloWorldApp, um novo Component. Ao criar um aplicativo React Native, você estará criando muitos novos componentes. Tudo o que você vê na tela é algum tipo de componente. Um componente pode ser bastante simples – a única coisa necessária é uma renderfunção que retorna algum JSX para renderizar.

Este aplicativo não faz muito

Para fazer com que os componentes façam coisas mais interessantes, você precisa aprender sobre o Props.

Fonte: https://facebook.github.io/react-native/docs/tutorial