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
Top comments (0)