DEV Community

Cover image for React Native – Aprenda o básico
Alexandre Freire
Alexandre Freire

Posted on

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

Alt Text
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>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

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

Top comments (0)