Next Level Week - Rocketseat
- Semana Internacional do Meio Ambiente - 01/06/2020 a 05/06/2020
- Marketplace para conectar empresas e entidades às pessoas que estão descartando resíduos
- Entidades poderão cadastrar pontos de coleta
- API dentro dos padrões REST - Representational State Transfer
- Regras de Negócio
- Conexão com banco de dados
- Envio de e-mails ou conexão com serviços externos
- Autenticação e autorização dos usuários
- Criptografia e segurança
- /users
- Dados dos usuários (JSON)
- Listagem de usuários (HTML & CSS)
- Telas Mobile
- Superset
- "Javascript com super poderes"
- Tipagem estática
-
Biblioteca (lib) para construção de interfaces (UI)
-
Utilizado para construção de Single Page Applications (SPA)
-
Podemos considerar um framework? Sim! O ecossistema faz com que o React possa ser considerado um framework
-
Tudo no React é Javascript!
-
React | ReactJS | React Native
import React from 'react'; import './button.css'; import icon from './button.png'; function Button() { return ( <button> <img src={icon} /> </button> ); }
- Organização do código
- Componentização
- Divisão de responsabilidades
- Back-end: Regra de negócio
- Front-end: Interface
- Uma API, múltiplos clientes
- Uma única base de código para iOS e Android
- O código não é convertido, transpilado, para linguagens nativas
- O Javascript Core faz com que o iOS e o Android interpretem Javascript
- Não é necessário ambiente específico
Android Studio + SDKXcode + SDK
- Facilitador para acessar recursos nativos
- Não necessita geração de .apk ou .ipa
- O Expo é capaz de interpretar todo o código React Native
- Rota: Endereço da requisição
- Recurso: Entidade do sistema que estamos acessando
- GET: Recupera informações do back-end
- POST: Insere novas informações no back-end
- PUT: Atualizar informações no back-end
- DELETE: Remover informações no back-end
- request.params: Identificam um recurso requerido
- request.query: Parâmetros adicionados a rota, geralmente opcionais. Servem para realização de filtros, paginação e etc
- request.body: Parâmetros que chegam através do corpo da requisição
- SQL: Postgres, MySQL, SQLite, SQL Server
- NoSQL: MongoDB, CouchDB
-
Lib que permite trabalhar com banco SQL com linguagem unificada
-
Suporte a muitos Bancos de Dados
-
Query escrita em Javascript (query builder)
SELECT * FROM users WHERE name = 'Khayan' knex('users').where('name', 'Khayan').select('*')
- points (Pontos de Coleta)
- name
- img
- latitude
- longitude
- city
- uf
- items (Itens para Coleta)
- title
- img
- point_items (Quais itens um ponto coleta?)
- point_id
- item_id
- Histórico do Banco de Dados
- Cadastro de Ponto de Coleta
- Listar os Itens de Coleta
- Listar Pontos (filtro por estado/cidade/itens)
- Listar um único Ponto de Coleta
- index: Listagem de registros
- show: Um único registro
- create/store: Cria ou armazena novos registros
- update: Atualiza um registro existente
- delete/destroy: Remove um registro existente
- Service Pattern
- Repository Pattern/Data Mapper
- Define quais endereços externos podem acessar a aplicação
- React é uma lib de Javascript
- Toda a interface é montada a partir do Javascript
- A interface fica disponível a partir do momento em que o site já carregou
- Development Tools > View Page Source: Página sem ação do Javascript
- O Javascript cria os elementos em tempo de execução
- Elemento principal da aplicação
- Todos os arquivos devem importar o React
- Construção de interfaces
ReactDOM
integra o React com a DOM (árvore de elementos) do navegador webrender()
+document.getElementById('root')
insere/renderiza os elementos na aplicação
- Sintaxe de XML dentro do código Javascript
- Foi criado para facilitar a criação de elementos
- Separar a aplicação em blocos reutilizáveis
- Conjunto de HTML, CSS e JS que compõe um elemento/pedaço/componente da página
- Todo componente deve ser nomeado inicialmente com letra maiúscula
- Pode ser componentizado como:
function
const
(arrow function encapsulada) +React.FC<Generics>
class
(abordagem antiga)
- São atributos enviados para o component
- As
props
são passadas como parâmetros - Acessadas através da
interface
- A interface é um objeto que contém as props e seus respectivos tipos
- Estados são informações mantidas pelo próprio component
- Conforme o
state
de um component muda, este será renderizado novamente useSate
é o hook do React utilizado para manipular estadosimport React { useState } from 'react';
- Hook é uma função especial para acessar os recursos dos componentes React
- A função
useState()
sempre retorna um array com 2 posições- Na posição 0 retorna o valor do estado
- Na posição 1 retorna uma função para atualizar o valor do estado
- Para manipular/atualizar através do princípio da imutabilidade utilizamos
useState()
- Informação acessível em tempo real para o componente
Exemplo da declaração desestruturada:
...
const [counter, setCounter] = useState(0);
function handleButtonClick() {
setCounter(counter + 1);
}
return (
<>
<h1>{counter}</h1>
<button type="button" onClick={handleButtonClick}>Aumentar</button>
</>
);
...
- Components são funções que retornam elementos do React Native
- Container do React Native
- É como se fosse uma
<div>
do HTML, mas sem poder semântico
- Elemento de texto padrão
- Equivale ao
<p>
sem nenhuma formatação de estilos prévia
-
Não existem
ids
ouclasses
para estilização no React Native -
A propriedade
style = {styles.container}
está disponível em todos os elementos do React Native. Recebe um objeto que passa todos os estilos:const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'fff', alignItems: 'center', justifyContent: 'center', }, });
-
Yoga converte Javascript para estilos nativos do Android e/ou iOS
-
Todos os elementos por padrão são
display: 'flex'
-
Não existe herança ou cascata de estilos no React Native. Cada elemento deve ser estilizado individualmente