O projeto foi criado para ser utilizado como guia (configurar de ambiente para desenvolvimento), visão geral sobre React e por fim apresentação de uma aplicação de listagem de pessoas, que será utilizado para ministrar o treinamento sobre React

📝 Funcionalidades

• Listagem de pessoas
• Acessar perfil de uma pessoa

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

• Choco
• Expo
• Node.js
• React Native
• JavaScript

🖥️ Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Choco, Node.js, Yarn, Expo e VSCode

🛠️ Instalando ferramentas

🍫 Choco

Vá ao botão iniciar no canto inferior do windows e clique com botão direito, será aberto a tela abaixo, clique WindowsPowerShell e(Admin)

# Digite o seguinte comando:
$ Get-ExecutionPolicy

Caso o retorno seja diferente de "Restricted" pode pular o próximo passo

Caso seja, restrito, digite a seguinte linha

$ Set-ExecutionPolicy AllSigned

Agora vamos instalar o Choco

$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Nesse passo e recomendavel fechar e abrir o terminal para subir as alterações

📌 Yarn

$ choco install -g yarn
# Será feita a instalação de forma global.

# Verifique a versão
$ yarn -v

⌨ Node.js

# Versão lts é mais estável de bugs e erros do que a current (recente)
$ yarn install nodejs-lts

# Verifique a versão
$ node -v ou npm -v

🧱 VSCode

Acesse Visual Code, faça o download e instale conforme seu sistema

Extensões VSCode

Abra o VScode e no lado esquerdo clique na seguinte opção:

Terá uma barra de pesquisar

Procure por:

• Dracula Official

• Color Highlight.

• Material Icon Theme.

  Precisa fechar e abrir novamente o VScode para ficar visível a extensão.

• Rocketseat React Native.

• Rocketseat ReactJS.

  Opcional essas últimas extensões.

🧬 Instalando extensões

Clique na opção install (em verde):

💡 Expo

yarn global add expo-cli

😎 Criando o Projeto

# Criar um projeto react native/expo
$ expo init random-peoples
# Em seguinda sera solicitado o template que deseja utilizar, somente pressione enter.`

# Entre no repositório
$ cd random-peoples

👾 Instalando dependências

Para não perdemos muito tempo instalando depedências que serão utilizadas no decorrer do treinamento, iremos instalar antes, as seguintes dependências:

⚡ React Navigation
$ yarn add @react-navigation/native

$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

$ yarn add @react-navigation/stack

💥 Axios

$ yarn add axios

# Depois de instalar as dependências, inicie o projeto
$ expo start

Será aberta uma aba no seu navegador padrão, conforme imagem abaixo.

Agora e preciso executar o projeto no seu celular, para isso, acesse a Playstore ou AppStore e baixe o aplicativo Expo, ao abrir o aplicativo, clique em Scan QR Code e escaneie o QR da tela que foi aberta em seu navegador. Aguarde até que aparece uma tela igual a essa:

Até aqui, já configuramos todo o ambiente necessario para iniciamos o desenvolvimento, a baixo sera apresentado de forma resumida alguns topicos que serão abordados no treinamento.

🔮Conceitos React

💎 O que e react?

React e um ferramenta criada pelo facebook, seu intuito e facilitar o desenvolvimento de aplicacões web ( React JS) e mobile (React Native), utiliza como linguagem de desenvolvimento javascript.

No treinamento iremos focar exclusivamente no desenvolvimento de aplicações mobile, através do React Native, com ele e possivel criar aplicações hibridas que funcionam tanto no Android como no iOs somente com único código javascript.

E umas das ferramentas utilizadas por grandes empresas, como Uber, Netflix, WhatsApp.

Um dos pontos interessantes é que você aprende uma vez os conceitos obtidos no React JS ou React Native e utiliza a mesma base para os dois.

🖇Componente

Um componente e uma parte visual da sua aplicação, seriam pedaços de informações que compõe uma tela.

1. Header (vermelho) - contém o titulo da aplicação
2. ListPeoples (Amarelo) - exibe a lista de pessoas

🧲 Props

Props (propriedades) são valores que podem ser passados para um componentes, podem ser string, númerico, até mesmo uma função, esses valores podem ser usados pelo componente que recebe e utilizados para alguma regra, esses valores somente pode ser lidos e não alterados.

⚖ State

State seriam variaveis utilizadas dentro de um componente que podem ser (alteradas)

🤴🏾 Ciclo de vida

Ciclo de vida seria fases que um componente tem, assim como uma pessoa, ela nasce, cresce e morre, com componente seria da mesma forma, mas utilizariamos outras expressões, como, montado, atualizado e desmotado. Seguindo esses conceito podemos executar determinado código em momentos particulares de acordo com a fase do componente.

🎖 Contribuição

Guilherme Machado 👨‍🚀

David Cruz 👨‍🚀