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:
🖥️ 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.
- Header (vermelho) - contém o titulo da aplicação
- 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 👨🚀 |