The latest articles on Forem by Jose Carlos de Freitas (@josecarlosfreitas). https://forem.com/josecarlosfreitas https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1320588%2Fb2648d8d-8fdd-45a4-b706-de0531abad61.png https://forem.com/josecarlosfreitas en Jose Carlos de Freitas Sun, 03 Mar 2024 03:23:46 +0000 https://forem.com/josecarlosfreitas/criando-seu-primeiro-aplicativo-react-native-do-zero-um-guia-passo-a-passo-3obo https://forem.com/josecarlosfreitas/criando-seu-primeiro-aplicativo-react-native-do-zero-um-guia-passo-a-passo-3obo <p>O React Native é uma plataforma poderosa para criar aplicativos móveis multiplataforma usando JavaScript. Este guia irá te levar da instalação do React Native à criação de um aplicativo funcional, passo a passo.</p> <p><strong>Passo 1: Ambiente</strong></p> <p>Você terá que ter instalado estas ferramentas em seu sistema:</p> <ul> <li> <strong>Node.js</strong>. Basta acessar o link <a href="https://nodejs.org/en/" rel="noopener noreferrer">https://nodejs.org/en/</a>, realizar o download e seguir os passos da instalação. </li> <li> <strong>Git</strong>. Basta acessar o link <a href="https://git-scm.com/download/win" rel="noopener noreferrer">https://git-scm.com/download/win</a>, realizar o download e seguir os passos da instalação. </li> <li> <strong>Um editor de código</strong> como Visual Studio Code, Sublime Text ou Atom. </li> <li> <strong>Expo Go</strong>. Para testar o app no seu celular você precisa instalar o aplicativo Expo GO nele.</li> </ul> <p><strong>Passo 2: Criação do projeto</strong></p> <p>Navegue até o diretório em que queira os projetos salvos em seu sistema. Abra o bash do git:</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbk3sdgasj0p4h3vjg3el.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbk3sdgasj0p4h3vjg3el.png" alt="git bash" width="800" height="451"></a></p> <p>Digite o seguinte comando:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npx create-expo-app testeApp </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp35mwj4tikpv8uzh08yw.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp35mwj4tikpv8uzh08yw.png" alt="git bash" width="582" height="372"></a></p> <p>Com isso o seu app react-native estará criado. Vá para a pasta e abra ele no seu editor, no meu caso estou usando o visual studio code.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8tty50sdzknpy2ydv3g9.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8tty50sdzknpy2ydv3g9.png" alt="vs code" width="723" height="551"></a></p> <p>Abra o terminal e digite:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npx expo start </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq7b7bawyw2s9d8cjsx2v.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq7b7bawyw2s9d8cjsx2v.png" alt="terminal vs code" width="800" height="592"></a></p> <p>Após executar este comando será gerado o Qr Code para ser lido com o app do Expo Go baixado no seu celular.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb64c3grrx1r4flrftufx.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb64c3grrx1r4flrftufx.png" alt="qr code" width="800" height="695"></a></p> <p>Agora com o seu celular e o app Expo Go aberto, na tela inicial terá uma opção chamada Scan Qr Code.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk9lmsej0qzbtf7a5qhhh.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk9lmsej0qzbtf7a5qhhh.png" alt="scan qr code" width="240" height="528"></a></p> <p>Que você vai usar para escanear o qr gerado. Depois de escaneado irá abrir a tela inicial do seu app.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw36kl6lbkuwg9k698s8a.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw36kl6lbkuwg9k698s8a.png" alt="home app" width="240" height="519"></a></p> <p><strong>Hello World</strong><br> Agora vá para o vs code e edite o arquivo inicial do seu app.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18pg8hp168en10offuds.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18pg8hp168en10offuds.png" alt="inicial" width="800" height="446"></a></p> <p>Faça seu primeiro hello world em um aplicativo.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl27kilvcyejmfd4mtpgy.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl27kilvcyejmfd4mtpgy.png" alt="hello world" width="800" height="522"></a></p> <p>se o app está rodando no seu celular é só salvar o arquivo que ele já atualiza no app.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjcmk0wzyot37ophbwegr.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjcmk0wzyot37ophbwegr.png" alt="first hello world" width="244" height="516"></a></p> <p>Pronto agora você já pode começar a desenvolver seus próprios aplicativos, espero ter ajudado. Muito obrigado por ler até aqui e até a próxima.</p> reactnative javascript mobile beginners