E para isso, faz sentido começar aqui no aplicativo. arquivo js.
Agora deixe esse terminal aberto aqui e esse processo funcionando,
é claro, para que as alterações em seu código sejam automaticamente refletidas nos emuladores e
agora vamos ver como podemos começar com isso.
Eu já mencionei no primeiro módulo de curso que o React Native é tudo sobre esses
componentes internos embutidos, como texto e visualização. Uma visão seria o seu div do desenvolvimento da web,
caso você seja um desenvolvedor da Web, o que provavelmente você é, se você conhece o React.
Portanto, é um ótimo componente
contêiner, você pode estilizá-lo como você o vê aqui e pode envolver outro conteúdo nele.
Agora, um texto, por outro lado, é um componente central para a saída de texto,
que é seu objetivo, não está lá para produzir uma imagem, mas sim para produzir texto.
Agora, o que você não pode fazer no React Native e essa é a primeira coisa importante, você não pode, por
exemplo, emitir texto entre uma visualização como essa.
Se tentarmos salvar isso sem esse wrapper de texto, você verá um erro. É a propósito uma tela que você verá
de tempos em tempos quando estiver trabalhando com o React Native, isso lhe dará um
erro, isso explica o que deu errado. Aqui, por exemplo, há uma mensagem de erro bem clara nos dizendo que as strings de
texto devem ser renderizadas dentro do componente de texto e
por que isso é tão importante?
Por que estou enfatizando isso?
Como essa é uma diferença importante para o desenvolvimento da web, você pode
colocar o texto em qualquer lugar. No desenvolvimento web, você
poderia ter um div e entre as tags div de abertura e fechamento, você poderia ter qualquer texto e isso não funcionaria no React
Native, não só porque estamos usando um div que não é suportado lá, mas claro Reagir Native,
você realmente só pode imprimir texto entre tags de texto, então você precisa usar esse componente de texto fornecido pelo React Native para saída de
texto e isso é uma diferença crucial para a web onde você pode jogar seu texto em qualquer lugar e no
React Native, é maneira É mais importante que você use o componente interno correto para o trabalho que deseja
realizar e para o estilo, para configurar um contêiner onde você estrutura um conteúdo diferente, que seria uma exibição, para
a saída de texto, que poderia ser um texto. Para produzir uma imagem, por exemplo, você
terá um componente de imagem. Então é assim que o React Native funciona
e falando de estilo, de layout, a visão tem isso como um trabalho principal, é principalmente lá para aplicar estilos e para
o layout do conteúdo que você tem
lá e falando sobre isso, vamos começar com layout.
Digamos que no nosso aplicativo, queremos ter duas áreas principais aqui na tela. No topo, quero permitir que o usuário insira
um texto e, à direita disso, eu quero ter um botão para confirmar essa escolha e abaixo disso, então essa
é a
primeira parte, a
área de entrada e abaixo disso, temos a segunda parte e essa é a lista de objetivos
que o usuário digitou.
Então, portanto, aqui no aplicativo. js, podemos começar com uma visão de quebra automática,
pois, assim como no React normal, é necessário ter um componente pai e isso normalmente será uma
exibição no React Native, pois isso fornece mais opções de layout e estilo
e dentro dessa visualização. poderíamos ter outra visão para a área de entrada onde nós então adicionamos nossa entrada e abaixo disso,
outra visão para ter nossa lista de objetivos e eu vou me livrar desse texto e é bastante
normal no React Native que você tenha bastante de visualizações aninhadas umas nas outras, para que você possa construir qualquer layout que desejar.
Agora vamos nos livrar deste contêiner por aí e também desta atribuição de estilo e vamos começar
com tudo isso do zero.
Nota importante agora é que cada componente fornecido pelo React Native tem seu próprio trabalho, não há muitos
componentes, mas os que estão lá têm papéis claramente definidos e você constrói sua UI aninhando esses
componentes uns nos outros, dependendo do que Se você quer criar, por exemplo, se você
quer construir um layout, você começa com o aninhamento de alguns pontos de vista e,
em seguida, quando estiver na parte em que deseja produzir o conteúdo, você começará a adicionar
textos e assim por diante. Farei tudo isso nas próximas palestras. Você também pode ir para os documentos oficiais do React Native e, se clicar em Guias,
Componentes e APIs, você terá uma visão geral desses blocos de construção principais. Você encontrará a visão aqui, o texto, a imagem, a entrada
de texto que eu mencionei anteriormente e alguns outros componentes principais e você verá praticamente todos aqueles ou
a maioria daqueles ao longo deste curso e este é um ótimo lugar para mergulhar mais fundo
e aprender mais sobre eles e como você já pode dizer se vai deixar de
fora os que são específicos da plataforma, que são mais focados em nicho, então não há muitos componentes principais, apenas cerca de 10
componentes principais e é assim que o React Native funciona. No entanto, você poderá criar qualquer aplicativo
que quiser, como você verá.