👋🏽 Fala devs! Nesse repositório estarei trazendo um guia de estudo direcionado sobre as tecnologias que utilizamos no NDS - Setor de Desenvolvimento de Softwares do IFCE campus Maracanaú.
Obs.: o checklist pode sofrer alterações conforme o avanço no desenvolvimento do projeto.
Obs.: clique aqui, caso queria acompanhar no Notion.
Essencial (required):
-
HTML:
- Headings: usados para exibir títulos ou subtítulos em suas páginas da web.
- Forms: usados para coletar entradas de dados como nome de usuário, e-mail, detalhes de contato.
- Elements: definem como os navegadores da web formatarão e exibirão o conteúdo.
- Attributes: fornecem informações adicionais sobre os elementos HTML.
- Layout: define as diferentes maneiras como um site exibe o conteúdo. É aconselhável usar elementos HTML semânticos.
-
CSS:
- Box Model: consiste na margin, border, padding e o content.
- Positioning: ajuda a manipular um elemento para locais diferentes, como fixed, relative, absolute, static e sticky.
- Grid: sistema bidimensional com linhas e colunas.
- Flexbox: sistema unidimensional que nos permite escolher entre uma linha ou uma coluna como layout principal ou estrutura de uma página web..
- Responsive Design: abordagem onde uma aplicação deve ser construído ou projetada com o usuário em mente, independentemente de seu ambiente, como tamanho de tela do dispositivo.
-
Javascript (ES6+):
- Syntax: primitives, objects, array, classes, destructuring, loops, conditionals, error, promise (async / await), debugging, etc.
- DOM Manipulation: document, events, etc.
-
React:
- Create React App: conjunto de ferramentas integrado para a melhor experiência de usuário e desenvolvedor.
- JSX: se parece com HTML, é baseado em XML, JSX transformado em tags HTML durante o tempo de execução.
- Component: permite que você divida a UI em partes independentes e reutilizáveis e pense em cada uma delas isoladamente.
- Hooks: use o estado e outros recursos do React sem escrever uma classe.
- Handling Events: semelhante ao tratamento de eventos em elementos DOM.
- Conditional Rendering: permite criar componentes distintos que encapsulam o comportamento de que você precisa. Então, você pode renderizar apenas alguns deles, dependendo do estado do seu aplicativo.
- List and Keys: as chaves ajudam o React a identificar quais itens foram alterados, adicionados ou removidos.
- Context API: fornece uma maneira de passar dados pela árvore de componentes sem ter que passar os parâmetros manualmente em todos os níveis.
Avançado (optional):
- Typescript: nos oferece mais controle sobre nosso código por meio de anotações de tipo, interfaces e classes.
- React Router: Dependência para navegação e roteamento da aplicação com a mudança da UI
- Styled Components: permitem que você escreva o código CSS real para estilizar seus componentes.
- React Bootstrap: reimplementação completa dos componentes do Bootstrap usando React
- Axios: dependência de requisições HTTP e consumo da API
- Local Storage: API para salvar dados no navegador
- React Hook Form: dependência para manipulação de formulários
Valeu rapaziada, até a próxima! 🤙🏽