|
| 1 | +# React Native |
| 2 | +## Nivel 1 |
| 3 | +- [ ] **HTML - Fundamentos**: |
| 4 | + - HTML é uma linguagem de marcação que define a estrutura do seu conteúdo. HTML consiste em uma série de elementos que você usa para mostrar algo de uma determinada maneira ou agir de uma certo modo. As tags podem criar um hiperlink de uma palavra ou imagem para outro lugar, podem colocar palavras em itálico, podem aumentar ou diminuir a fonte e assim por diante. |
| 5 | + - Aprender quais tags são necessárias para um HTML básico |
| 6 | + - Criar um parágrafo de texto |
| 7 | + - Exibir uma imagem |
| 8 | + - Conhecer a diferença entre 'h1', 'h2', 'h3', etc |
| 9 | + - Criar um texto com hyperlink |
| 10 | + - Criar um formulário com campos relevantes |
| 11 | + - Criar uma lista de itens ordenada ou não ordenada |
| 12 | + - Criar uma lista de itens dentro de uma lista suspensa (dropdown list) |
| 13 | + - Conectar com um arquivo de CSS |
| 14 | + - Criar uma tabela |
| 15 | + - Adicionar IDs e classes |
| 16 | +- [ ] **CSS - Fundamentos**: |
| 17 | + - Cascading Style Sheets (CSS) é uma linguagem usada para descrever a apresentação de um documento escrito em uma linguagem de marcação como HTML ou XML. CSS pode ser usado para estilos de texto de documentos muito básicos — por exemplo, para alterar a cor e o tamanho de títulos e links. Ele pode ser usado para criar um layout — por exemplo, transformar uma única coluna de texto em um layout com uma área de conteúdo principal e uma barra lateral para informações relacionadas. Pode até ser usado para efeitos como animações. |
| 18 | + - Aprender a estrutura visual de uma página, com 'margin' e 'padding' |
| 19 | + - Estabelecer o tamanho com 'width' e 'height' |
| 20 | + - Aprender sobre a posição de um elemento ('static', 'relative' ou 'absolute) |
| 21 | + - Aprender sobre o 'display' de exibição de um elemento ('block', 'inline', 'inline-block') |
| 22 | + - Aprender a posicionar imagens em relação ao texto |
| 23 | + - Aprender sobre alinhamento |
| 24 | + - Aprender sobre estilo de fontes |
| 25 | + - Aprender as diferenças e vantagens de usar as diferentes unidades de medida em CSS (%, relativas, etc) |
| 26 | + - Conectar com os elementos (IDs, classes) de um arquivo HTML |
| 27 | + - Alterar características de um elemento quando o mouse passar por cima dele ('hover') |
| 28 | + - Aprender box-sizing |
| 29 | + - Aprender Flexbox |
| 30 | + - Aprender Grid |
| 31 | +- [ ] **JavaScript - Fundamentos**: |
| 32 | + - JavaScript é a linguagem de programação mais popular do mundo e é uma das principais tecnologias da World Wide Web, juntamente com HTML e CSS. Ela possui tipagem dinâmica, orientação a objetos baseada em protótipos e funções de primeira classe. Ela é multi-paradigma e suporta estilos de programação orientados a eventos, funcionais e imperativos. |
| 33 | + - Conhecer os tipos primitivos |
| 34 | + - Declarar variáveis, considerando a diferença entre 'var', 'let' e 'const' |
| 35 | + - Usar estruturas condicionais ('if', 'else') |
| 36 | + - Conhecer os operadores de atribuição e comparação ('=', '==', '===') |
| 37 | + - Usar estruturas de repetição e laços ('while', 'for') |
| 38 | + - Usar funções, passando parâmetros e argumentos |
| 39 | + - Manipular arrays e listas |
| 40 | + - Aprender o conceito de Orientação a Objetos |
| 41 | + - Fazer um CRUD |
| 42 | + - Obter dados de uma API |
| 43 | + - Fazer chamadas assíncronas usando 'Async/Await', 'Promise', etc |
| 44 | +- [ ] **DOM - Fundamentos**: |
| 45 | + - O Document Object Model (DOM) é uma interface de programação para documentos web. Ele representa a página para que os programas possam alterar a estrutura, o estilo e o conteúdo do documento. O DOM representa o documento como nós e objetos; dessa forma, linguagens de programação podem interagir com a página. |
| 46 | + - Entender como funciona a árvore do DOM |
| 47 | + - Acessar e manipular elementos do HTML e CSS |
| 48 | + - Acessar os pais e filhos de um elemento |
| 49 | + - Inserir um novo elemento na árvore |
| 50 | + - Remover um elemento da árvore |
| 51 | + - Esperar por um evento em certo elemento da página usando 'addEventListener()' |
| 52 | +- [ ] **Conceitos SPA**: |
| 53 | + - Um aplicativo de página única (SPA - single-page application) é uma aplicação web ou site que interage com o usuário reescrevendo dinamicamente a página web atual com novos dados do servidor web, em vez do método padrão de um navegador que carrega novas páginas inteiras. O objetivo são transições mais rápidas, que tornam o site mais parecido com uma aplicação nativa. |
| 54 | + - Entender o que é uma SPA |
| 55 | + - Estabelecer rotas para outras páginas |
| 56 | + - Conhecer frameworks SPA |
| 57 | + - Comunicação com APIs |
| 58 | +- [ ] **React - Componentes**: |
| 59 | + - O React permite definir componentes como classes ou funções. Componentes definidos como classes fornecem mais recursos. Eles aceitam entradas arbitrárias (chamadas "props") e retornam elementos React descrevendo o que deve aparecer na tela. |
| 60 | + - Para que servem e como funcionam componentes |
| 61 | + - Conhecer a biblioteca Styled Components |
| 62 | +- [ ] **React - Props**: |
| 63 | + - Props são um objeto que é injetado em componentes e fornece alguns dados que podem ser compartilhados entre outros componentes em um fluxo de dados unidirecional, de um elemento pai para um elemento filho. Props são de somente leitura. |
| 64 | + - Como passar props |
| 65 | + - Como manipular props |
| 66 | +- [ ] **React Hooks - State**: |
| 67 | + - O hook React `useState` nos permite rastrear o estado em um componente de função. O hook `useState` pode ser usado para acompanhar strings, números, booleanos, arrays, objetos, etc. |
| 68 | + - Controlar o estado de componentes |
| 69 | + - Manipular variáveis |
| 70 | + - Atualizar o valor de elementos |
| 71 | +- [ ] **Criando uma aplicação React**: |
| 72 | + - Estruturar um novo projeto React |
| 73 | + - Criar uma aplicação funcional do zero |
| 74 | +- [ ] **React Hooks - Effect**: |
| 75 | + - UseEffect() é um hook React que permite que você manipule efeitos colaterais em seus componentes funcionais do React. |
| 76 | + - Executar um componente somente após a renderização |
| 77 | + - Acessar as props de um elemento |
| 78 | + - Fazer chamadas a APIs |
| 79 | +## Nivel 2 |
| 80 | +- [ ] **React Native - Fundamentos**: |
| 81 | + - React Native é um framework de desenvolvimento de software de código aberto criado pelo Facebook. Ele permite desenvolver aplicativos para Android e iOS usando um único código-fonte. |
| 82 | + - No React Native, as interfaces são construídas usando componentes. Esses componentes, como View, Text, Image, Button e TextInput, são responsáveis por definir tanto a aparência quanto o comportamento da sua aplicação. A ideia é simplesmente descrever como a interface deve se comportar de acordo com o estado da aplicação. |
| 83 | +- [ ] **React Native - Pacotes Essenciais**: |
| 84 | + - O React Native permite o uso de pacotes e bibliotecas de terceiros para agilizar o desenvolvimento e adicionar funcionalidades extras aos aplicativos. |
| 85 | + - Conhecer e saber utilizar o NPM (Node Package Manager) para gerenciar pacotes. |
| 86 | + - Conhecer os principais pacotes do React Native e suas utilidades. |
| 87 | +- [ ] **React Native - Testes**: |
| 88 | + - Aprender as melhores práticas de testes em React Native. |
| 89 | + - Conhecer as ferramentas e bibliotecas de testes para React Native, como Jest e React Native Testing Library. |
| 90 | + - Aprender a escrever testes unitários, de integração e de interface de usuário para garantir a qualidade do código. |
| 91 | +## Nivel 3 |
| 92 | +- [ ] **React Native - Nativo**: |
| 93 | + - Conhecer as especificidades do desenvolvimento nativo para Android. |
| 94 | + - Conhecer as especificidades do desenvolvimento nativo para iOS |
| 95 | +- [ ] **React Native - Animações**: |
| 96 | + - Entender os conceitos básicos de animação no React Native. |
| 97 | + - Aprender a utilizar as bibliotecas de animação mais comuns no React Native. |
| 98 | + - Integrar animações em componentes e fluxos de navegação. |
| 99 | +- [ ] **React Native - Arquitetura**: |
| 100 | + - Compreender as melhores práticas de arquitetura para criar aplicativos React Native. |
| 101 | + - Conhecer os principais padrões de arquitetura no React Native. |
| 102 | + - Aprender como organizar pastas e componentes. |
| 103 | +## Habilidade Auxiliar: Infraestrutura e Back-end |
| 104 | +- [ ] **Git e GitHub - Fundamentos**: |
| 105 | + - Git é um sistema de controle de versão distribuído gratuito e de código aberto projetado para lidar com tudo, desde projetos pequenos a muito grandes com velocidade e eficiência. |
| 106 | + - GitHub é um serviço de hospedagem para desenvolvimento de software e controle de versão usando Git. |
| 107 | + - Criar um repositório |
| 108 | + - Clonar um repositório |
| 109 | + - Fazer commit, push e pull de e para o repositório |
| 110 | + - Reverter um commit |
| 111 | + - Criar branches e pul requests |
| 112 | + - Lidar com merge e conflitos |
| 113 | +- [ ] **HTTP - Fundamentos**: |
| 114 | + - HTTP significa Hyper Text Transfer Protocol. A comunicação entre computadores cliente e servidores web é feita enviando solicitações HTTP e recebendo respostas HTTP. |
| 115 | + - Entender a diferença dos verbos HTTP |
| 116 | + - Testar os requests e ver os status codes no navegador |
| 117 | + - Saber fazer uma requisição HTTP na linha de comando com WGET |
| 118 | + - Baixar uma imagem com WGET |
| 119 | + - Fazer um post |
| 120 | +- [ ] **JSON**: |
| 121 | + - JSON significa JavaScript Object Notation (notação de objeto JavaScript). É um formato de texto para armazenar e transmitir dados. |
| 122 | + - Criar um objeto |
| 123 | + - Transformar um objeto em uma string |
| 124 | + - Transformar uma string em objeto |
| 125 | + - Manipular um objeto |
| 126 | +- [ ] **Design Patterns**: |
| 127 | + - Na engenharia de software, um "padrão de projeto" (Design Pattern em inglês) é uma solução geral e reutilizável para um problema que ocorre normalmente dentro de um determinado contexto de projeto de software. |
| 128 | + - Conhecer e aplicar os principais Design Patterns |
| 129 | +- [ ] **Linha de comando - Fundamentos**: |
| 130 | + - CLI é um programa de linha de comando que aceita entradas de texto para executar funções do sistema operacional. |
| 131 | + - Conhecer os principais comandos |
| 132 | +- [ ] **Cloud - Fundamentos**: |
| 133 | + - Cloud, ou computação em nuvem é a distribuição de serviços de computação pela Internet usando um modelo de preço pago conforme o uso. Uma nuvem é composta de vários recursos de computação, que abrangem desde os próprios computadores (ou instâncias, na terminologia de nuvem) até redes, armazenamento, bancos de dados e o que estiver em torno deles. Ou seja, tudo o que normalmente é necessário para montar o equivalente a uma sala de servidores, ou mesmo um data center completo, estará pronto para ser utilizado, configurado e executado. |
| 134 | + - Conhecer a diferença entre IaaS, PaaS e SaaS |
| 135 | + - Conhecer os maiores provedores de cloud |
| 136 | + - Especializar-se em algum provedor |
| 137 | +- [ ] **SOLID**: |
| 138 | + - O Solid possui cinco princípios considerados como boas práticas no desenvolvimento de software que ajudam os programadores a escrever os códigos mais limpos, separando as responsabilidades, diminuindo acoplamentos, facilitando na refatoração e estimulando o reaproveitamento do código. |
| 139 | +- [ ] **Clean Architecture**: |
| 140 | + - A Clean Architecture (Arquitetura Limpa) é uma forma de desenvolver software, de tal forma que apenas olhando para o código fonte de um programa, você deve ser capaz de dizer o que o programa faz. |
| 141 | +- [ ] **Firebase**: |
| 142 | + - O Firebase é uma plataforma de desenvolvimento de aplicativos Backend-as-a-Service (BaaS) que fornece serviços de backend hospedados, tais como banco de dados em tempo real, armazenamento em nuvem, autenticação, relatórios de falhas, aprendizado de máquina, configuração remota e hospedagem para seus arquivos estáticos. |
| 143 | + - Entender como Instalar o Firebase |
| 144 | + - Conhecer a documentação do Firebase |
| 145 | + - Conhecer as ferramentas do Firebase disponíveis |
| 146 | +## Habilidade Auxiliar: UX e Design |
| 147 | +- [ ] **Design System**: |
| 148 | + - Um Design System (sistema de design) é uma coleção de componentes reutilizáveis, guiados por padrões claros, que podem ser colocados juntos para construir aplicações. |
| 149 | + - Criar e manter bibliotecas que serão consumidas e usadas como padrão para a construção de um projeto |
| 150 | + - Design tokens |
| 151 | + - Estilos fundamentais |
| 152 | + - Construção de componentes |
| 153 | + - Microinterações |
| 154 | + - Documentação |
| 155 | +- [ ] **Figma - Fundamentos**: |
| 156 | + - Figma é uma aplicação web colaborativa para design de interfaces. O conjunto de recursos do Figma se concentra na interface do usuário e no design da experiência do usuário, com ênfase na colaboração em tempo real, utilizando uma variedade de editores de gráficos vetoriais e ferramentas de prototipagem. |
| 157 | + - Criar layouts de páginas e componentes |
| 158 | +- [ ] **Componentes de design**: |
| 159 | + - Conhecer os componentes descrevem um layout ou interface |
| 160 | +- [ ] **Sistemas de cores**: |
| 161 | + - Definir uma paleta de cores que faça sentido para determinada interface |
| 162 | +- [ ] **Como usar fontes**: |
| 163 | + - Escolher a fonte mais adequada para determinado projeto |
| 164 | +- [ ] **Design Responsivo**: |
| 165 | + - Ajustar suas páginas para o tamanho da tela do usuário |
| 166 | + - Media queries |
| 167 | + - Conhecer o conceito de Mobile first |
0 commit comments