- Rota: É o endereço completo da URL inclusive o recurso.
- Recurso: É o final da URL representando provavelmente uma entidade da aplicação (ex.: users).
- GET: Buscar/listar uma informação no back-end;
- POST: Criar uma informação no back-end;
- PUT: Alterar uma informação no back-end;
- DELETE: Deletar uma informação no back-end.
- Query Params: Parâmetros nomeados enviados na rota após "?" (ex.: users/?nome=João). Utilizados em filtros, paginação, etc. Acessados através do request.query.
- Route Params: Parâmetros utilizados para identificar recursos. Enviados após a última informação na rota (ex.: users/35 -> 35 é um route param). Acessados através do request.params.
- Request Body: Corpo da requisição, utilizado para criar ou alterar recursos (ex.: JSON). Acessados através do request.body.
- npx knex init -> Inicia o projeto de DB.
- npx knex migrate:make create_ongs -> Cria uma nova migrate ("projeto"/blueprints das tabelas).
- npx knex migrate:latest -> Cria uma tabela a partir da última migrate criada.
- npx knex migrate:rollback -> Desfaz o último migrate:latest.
- npx knex migrate:status -> Lista as migrations que já foram executadas.
Uma função JavaScript que retorna HTML. Na verdade, para ser mais exato, ela retorna JSX (JavaScript XML), que é quando o HTML está integrado dentro do JS. Criamos componentes para isolar pedaços de código que vão ser utilizados mais de uma vez na aplicação, tornando o código-fonte mais modular. Exemplo: o header da aplicação.
Pode-se entender o conceito propriedade no React fazendo um paralelo com os atributos do HTML. Em HTML temos atributos que podemos passar dentro das tags, como o atributo id, por exemplo. Em React, os "atributos" que criamos são chamados de propriedades, que são passados para os componentes. As propriedades são escritas em camelCase.
Informação que será mantida pelo componente. Quando a aplicação tem alguma variável alterada, seja pela API ou por alguma função do front-end, os componentes renderizados que utilizam o conteúdo dessa váriável não são diretamente atualizados na interface da aplicação, justamente porque a renderização já aconteceu. Para que esses elementos sejam atualizados, é necessário utilizar um recurso do React denominado estado. Quando declaramos um estado, que é uma função, ele irá observar a variável escolhida, e sempre que essa for atualizada, o estado atualizará os componentes que utilizam do conteúdo dessa variável. O interessante é que o React não atualizará toda a página, mas somente esses componentes que dependem da variável.
Basicamente, todas as variáveis em React são "constantes"... 🤔️ como assim? Pode parecer confuso, mas é bem simples de entender. Quando desejamos que uma variável tenha seu valor alterado no React, não podemos alterar esse valor diretamente, ou seja, sobreescrever esse valor com outro valor, mas sim substituir a variável por uma nova variável. Daí o porquê de todas as variáveis serem "constantes": o valor dela nunca é trocado, mas sim a própria variável. Fazemos esse sobreescrever da variável com a utilização de uma função callback na criação do estado, cuja responsabilidade dessa função será setar uma nova variável para o estado.
Utilizado para fazer o redirecionamento para outro recurso da rota dentro de uma função JavaScript. Ex.: redirecionar para a tela de perfil após o usuário concluir um cadastro. Importado do 'react-router-dom'.
Utilizado para disparar uma função em algum determinado momento do componente. Recebe como primeiro parâmetro a função que deseja-se executar e, como segundo parâmetro, um array de dependências, ou seja, os elementos que se modificados irão disparar essa função no componente. Ex.: o usuário tem uma lista de To Dos e a opção de marcar o To Do como concluído. Sempre que o usuário marcar um desses To Dos como concluído, o useEffect irá disparar uma função que irá atualizar o componente (apenas ele na página), removendo o To Do concluído.
- npx create-react-app ;
- npm start .
- react-icons (biblioteca de ícones);
- react-router-dom (para utilização de rotas);
- axios (consumo de APIs).
-
Elementos/tags: Todos os containers (div, footer, header, section, etc.) são representados pela tag View, própria do React Native. Enquanto isso, qualquer texto (p, h1, h2, etc.) no React Native é representado pela tag Text.
-
Semântica: No React Native não há valor semântico, resultado significativo nas tags. Ex.: não há um Text que terá mais relevância que outro Text no React Native, como aconteceria entre o h1 e o h2 no ReactJS, por exemplo.
-
Estilização:
- Não há classNames, IDs, ou outros atributos de identificação para a estilização no CSS da tag desejada. Em vez disso, cada uma das tags pode receber um atributo chamado style, que recebe como valor a referência à alguma das stylesheets que podem ser criadas no projeto.
- Aliás, essa é mais uma das diferenças entre a estilização no ReactJS e React Native: a criação de uma variável que recebe um objeto da classe StyleSheet. No Native não utiliza-se arquivos de CSS comuns, como no ReactJS. Em vez disso, cria-se essas variáveis que recebem o objeto StyleSheet, onde dentro delas cria-se mais outros objetos, sendo esses objetos quem receberão os atributos de estilização CSS.
- Os atributos de estilização CSS são em camelCase. Exemplo: background-color passa a ser backgroundColor.
- No React Native, todos os elementos/componentes/tags já possuem como padrão o display Flex. Nesse framework não existem outros displays.
- Todos os valores que não são númericos, precisam estar entre aspas na estilização no RN.
- Não existe herança de estilos no React Native, diferente do ReactJS. Cada elemento precisa de ter seu próprio objeto de estilização.
- TouchableOpacity: utilizado para criar botões ou áreas de clique na interface no Native.
- FlatList: utilizado para criação de listas de elementos que serão renderizados no app.
- Linking: para utilizar deep linking no app (chamar outros apps através de um deep link do smartphone).
- Instalar o Expo (possui limitações, então é bom usar somente quando não houver a necessidade de utilizar algum recurso que ele não possue suporte);
- expo init ;
- yarn start .
(Preferi utilizar o Yarn, pois pelo que percebi, ele parece ser bem mais rápido que o NPM.)
- @react-navigation/native (biblioteca que facilita a utilização de rotas no React Native);
- react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view (dependências do react-navigation);
- @react-navigation/stack (para navegação em pilha);
- expo-constants (resolve problema do conteúdo do app entrar embaixo da status bar do smartphone);
- expo-mail-composer (envio de emails);
- axios (consumo de APIs).
- Restaurando todos os pacotes (node_modules) em um projeto que contenha o package.json em sua raiz: npm install ou yarn install.