Para visualizar e editar nosso código, precisamos de um editor e eu recomendo o uso do Visual Studio Code, um
IDE muito poderoso e gratuito, excelente para o desenvolvimento de Javascript, que é o que estamos fazendo aqui
no final.
Você pode obtê-lo a partir do código. estúdio visual. lá você
encontra versões para Mac, Windows e Linux, basta baixar a versão para o seu
sistema operacional e percorrer o instalador que você oferece. Depois de instalá-lo, abra o Visual Studio
Code e, abra seu projeto, vá para o arquivo aberto e, em seguida, basta escolher
seu projeto, no meu caso, rn-first-app. Clique em Abrir aqui e isso
abrirá o projeto aqui no Visual Studio Code. Agora, meu código do Visual Studio parece com a aparência aqui porque tenho um
tema especial ativado, que você pode alterar em preferências, tema de cores e lá estou usando o tema mais escuro.
Então, se você quer ter a mesma
aparência, você pode usá-lo e eu também instalei uma extensão especial que você pode fazer sob extensões de
exibição. Lá eu tenho o tema do ícone de material instalado, este aqui que é totalmente opcional, mas você pode instalá-lo a
partir de lá
também e depois volte ao viewer explorer para ver seus arquivos
novamente, para que você obtenha os mesmos
ícones de arquivo que eu tenho aqui, novamente é totalmente opcional e, com isso, esse é o nosso aplicativo React Native gerenciado pela expo.
Agora, deixe-me guiá-lo rapidamente pelo que temos aqui e depois mostrar o que você pode alterar no
código para alterar algo no seu aplicativo.
Agora temos algumas pastas e arquivos
aqui, o. A pasta expo mantém apenas
algumas configurações para a expo. Você não precisa tocar nisso. A pasta de recursos, que contém algumas imagens, neste caso,
como o ícone do seu aplicativo e a imagem da tela inicial, abordaremos como você pode personalizá-lo no final do curso e usaremos
outros recursos, como imagens em geral ao longo deste curso, é claro. A pasta modules do nó contém todas as dependências
deste projeto, como por exemplo, React e React Native, mas também as dependências das dependências e esta
pasta é gerenciada automaticamente para você, para que você não precise tocar nisto
e não deve tocá-lo de fato. . gitignore é um arquivo que nos ajuda com o git,
que é um sistema de gerenciamento de código-fonte ou uma ferramenta de gerenciamento de código-fonte e você não precisa
usar o git; se o fizer, provavelmente sabe o que o gitignore faz e se não sabe o que git é,
após esta palestra, você encontrará uma breve introdução a ele ou alguns recursos que o ajudarão a começar, mas não precisará usar
o git para trabalhar com o React Native. Watchmenconfig, isso é algo que você pode ignorar quando vê que está vazio aqui,
é uma ferramenta usada nos bastidores da exposição no final e no aplicativo. arquivo js, então o arquivo
que contém o código responsável por renderizar o que vemos aqui na tela.
Vamos mergulhar nisso em um segundo aplicativo. O json mantém algumas configurações para o nosso aplicativo React Native,
desenvolvido pela expo, e vamos abordar isso ao longo deste curso, por enquanto, vamos ignorá-lo. Babel config configura como o código
Javascript é otimizado e compilado. Você também pode deixar o padrão
aqui e o pacote. O arquivo json gerencia suas dependências e você
vê que está usando o expo, mas também React, também React DOM, porque o expo também suporta a criação de aplicativos React para a
web, mas também React Native aqui e React Native web porque, novamente, expo oferece a opção de também criar
aplicativos da Web com a ajuda do React Native, não é algo que focaremos neste curso.
Portanto, essa é a configuração que temos
aqui, o arquivo importante para nós no momento é o aplicativo. arquivo js porque, no final, é responsável
por colocar algo na tela.
Agora, o conteúdo exato do arquivo que você está vendo aqui no seu aplicativo. O arquivo js pode mudar com o
tempo, porém, esse projeto inicial que é gerado automaticamente simplesmente às vezes é alterado.
É claro que isso não afeta o que eu explico aqui ou neste curso, não significa que
algo está desatualizado ou algo
parecido, é apenas um projeto inicial diferente
e se você quiser acompanhar exatamente o mesmo que eu recebi, você ' o encontraremos anexado, para que você
também possa usá-lo, mas é claro, também poderá continuar com os espectadores se parecer
um pouco diferente, porque, como mencionei, é apenas um
projeto inicial, o React Native, é claro, ainda funciona da mesma forma que Expliquei aqui
e, portanto, você pode segui-lo e adicionar seu aplicativo. arquivo js do jeito que eu o adicionei e lá
vemos que importamos o React da mesma forma que o faria em um aplicativo da web do React.
Precisamos importar o React porque aqui, você também pode ver que estamos usando o jsx, que é
essa sintaxe Javascript especial que
se parece com HTML, mas no final
é apenas Javascript e, caso você nunca tenha visto isso, mergulhe definitivamente em um aplicativo React ou React tutorial
primeiro, espero que você saiba como o React geralmente funciona.
Sempre temos outra importação aqui e é a importação React Native, onde importamos a folha de estilo, o texto
e a visualização a partir daí.
Agora, esses são os componentes e recursos especiais dos quais eu estava falando anteriormente, texto e exibição são
componentes fornecidos pelo React Native que são compilados em widgets da plataforma nativa e a folha de estilo é um recurso
extra fornecido pelo React Native que ajuda você a estilizar.
Agora, aqui temos um componente React normal, como também o construiríamos em um aplicativo React for web.
Estamos tendo um componente funcional aqui e, com a ajuda dos ganchos React, podemos trabalhar com componentes funcionais
apenas como você provavelmente conhece e esse componente funcional retorna algum código jsx que é renderizado na tela e aqui
estamos usando
o widget de exibição ou o componente de visualização fornecido pelo React Native e o componente de texto e
o componente de visualização são como uma div,
é um bom invólucro, também é bom para aplicar alguns estilos em alguns contêineres e detecta e, em seguida, é usado para
gerar algum texto que você coloca entre a abertura e tags de fechamento.
E aqui em baixo, temos alguns estilos definidos, o React Native não usa CSS, mas usa uma
sintaxe de estilo baseada em CSS ou segue convenções de nomes semelhantes, mas vamos nos aprofundar em como estilizar seus
aplicativos React Native ao longo deste curso claro.
Então, com isso, vamos mudar o que vemos na tela e vamos adicionar um botão aqui.
Agora, o bom é que podemos importar um botão do React Native, esse é outro componente principal fornecido pelo React Native, para que possamos
adicionar essa importação e usar um botão lá embaixo. No entanto, não o usamos com uma tag de
abertura e fechamento,
mas como um elemento de fechamento automático e, em seguida, podemos adicionar um suporte de título aqui para definir o
texto que vemos em um botão, por exemplo, alterar texto.
Agora, quando tocamos neste botão, podemos querer alterar este texto aqui e, para isso,
precisamos gerenciar algum estado aqui, porque quero alterar alguns dados que devem levar à re-renderização
desse componente e, para isso, você precisa do estado .
Agora antes da Reagir 16. 8, que é suportado aqui, você teria que convertê-lo em um componente baseado
em classe para useState, desde o React 16. 8, podemos usar ganchos
do React e, caso você não saiba o que
são ganchos, você deve definitivamente mergulhar no básico dos ganchos; em anexo,
você encontrará recursos que o ajudarão a começar. Os ganchos são importados do React e, aqui, precisamos do gancho useState, que
nos permite gerenciar o estado em um componente funcional.
Com isso, podemos usar esse gancho chamando useState aqui e fornecendo um valor padrão que poderia ser esse texto aqui, vamos cortá-lo de lá e
adicioná-lo aqui como uma
string e, em seguida, aqui podemos usar a destruição de matriz para obter nossa saída texto e obtenha uma
função para alterar, redefinir ou substituir esse texto de saída, e é assim que o gancho useState funciona. Ele
fornece uma matriz com exatamente dois elementos,
onde o primeiro elemento é o instantâneo do estado atual, portanto, nosso estado inicial ou posteriormente
para ciclos de re-renderização subsequentes, o que quer que definimos nosso estado e a segunda é uma
função
que permite que você defina seu estado com um novo valor e chamar essa
função re-renderiza todo o componente e o texto de saída se refere às últimas novo estado.
Então, aqui, entre o texto, quero gerar o texto de saída e, ao pressionar este botão,
quero mudar isso.
Portanto, no botão, podemos registrar o onPress, que é basicamente o equivalente ao onClick
que teríamos na
web, aqui está o onPress e precisamos vincular isso a uma função, por exemplo, a uma
função anônima anônima aqui com esta sintaxe. onde chamamos definir texto de saída e definimos isso para o texto alterado.
Portanto, isso chamará essa função aqui, substituirá nosso estado e, portanto, renderizará novamente este componente,
isso será atualizado no próximo ciclo de renderização e, portanto, como enviamos o texto de saída
para lá, isso muda. Se agora salvarmos tudo
isso, o interessante é que seu aplicativo, que você ainda deveria ter aberto no telefone, deveria ter
sido
recarregado automaticamente, não
é necessário reiniciá-lo, não é necessário digitalizar esse código aqui novamente, apenas alterando o código e salvando
este arquivo, ele deve ser recarregado automaticamente aqui. E agora, se tocarmos agora em alterar texto aqui, você verá o texto
alterado e esse é o seu primeiro aplicativo React Native fazendo seu trabalho com
a expo, mas novamente você pode criar e publicar isso como um aplicativo independente e faremos isso até o final de
o curso e, portanto, essa é uma maneira incrível de começar e o desenvolvimento do React Native pode ser tão fácil
quanto isso.
Agora, com isso, vamos terminar este primeiro módulo antes de nos aprofundarmos no React Native e escrever o
código do React Native a partir do segundo módulo do curso.