React Native – Aprenda o básico
Tags: react, reactnative
Published: 2020-08-25 00:25:42

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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wm86o5a3s6gf6r44skcp.png)
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á:
```react
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8eu0ilvu8su9ddth8td1.gif)

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 é <View><Text>Hello world!</Text></View>. 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 <div>ou <span>, você usa componentes React. Nesse caso, <Text>é um componente interno que apenas exibe algum texto e Viewé como o <div>ou <span>.

### Componentes | React Native – Aprenda o básico
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ggxs58du1ick6zwxv9y.jpg)

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