Aplicação Frontend

Abertura - 00:26 - Neste módulo aprenderemos a desenvolver aplicações Web utilizando ReactJS.
O que é ReactJS - 01:40 - Nessa aula aprenderemos o que é o ReactJS e porque ele é chamado de biblioteca e o seu objetivo na programação Web.

React JS é uma biblioteca JavaScript para a criação de interfaces de usuário — ou UI (user interface).

Vite - 02:23 - Nessa aula aprenderemos o que é o Vite e qual a diferença dele entre o Create React App (CRA). Vite é uma ferramenta de construção para front-end. Ele fornece uma ferramenta de criação rápida e opinativa pronta para uso, com API altamente personalizável usando plug-ins.
Criando projeto - 01:54 - Nessa aula aprenderemos a criar um projeto em React utilizando o Vite. Utilizando o seguinte comando: npm create vite rocketnotes --template react
- npm install
- npm run dev
Estrutura de pastas e arquivos - 03:41 - Nessa aula aprenderemos a sobre a estrutura de pastas e arquivos dentro de um projeto ReactJS.
Executando o projeto - 01:22 - Nessa aula aprenderemos o comando para execução do nosso projeto.
Funcionamento do ReactJS - 06:30 - Nessa aula aprenderemos o funcionamento do ReactJS por baixo dos panos, como ele faz para renderizar arquivos .jsx
JSX - 03:08 - Nessa aula aprenderemos como criar um componente e o que é o arquivo .jsx e sua estrutura.
Fragment - 03:08 - Nessa aula aprenderemos o que é o Fragment no ReactJS.
Adicionando CSS - 03:07 - Nessa aula aprenderemos a criar o arquivo .css e como organizar a estrutura para começarmos a estilizar o nosso projeto.

CSS in JS - 05:17 - essa aula aprenderemos o que é o styled components e como adicionar em nosso projeto. styled-components

Instalar: npm install --save styled-components
Instalar a extensão (Syntax highlighting for styled-components): vscode-styled-components
ext install styled-components.vscode-styled-components

Tema - 05:03 - Nessa aula aprenderemos a criar temas globais para nosso projeto e importá-los para iniciarmos a estilização do mesmo

Figma - Rocket Notes: RocketNotes
Extensão: Highlight web colors in your editor Color Highlight
ext install naumovs.color-highlight

export default {
  COLORS: {
    BACKGROUND_900: "#232129",
    BACKGROUND_800: "#312E38",
    BACKGROUND_700: "#3E3B47",

    WHITE: "#F4EDE8",
    ORANGE: "#FF9000",

    GRAY_100: "#999591",
    GRAY_300: "#666360",

    RED: "#FF002E",
  },
};

Estilo Global - 06:40 - Nessa aula aprenderemos como criar um arquivo de estilização global para utilizarmos dentro do nosso projeto e com isso, o projeto já trará algumas configurações de estilos padronizadas.
Fontes personalizados - 04:00 - Nessa aula aprenderemos como adicionar fontes personalizadas em nosso projeto utilizando o Google Fonts.
Componente - 09:44 - Nessa aula aprenderemos o que é componentes no ReactJS e criaremos o nosso primeiro componente, o .
extensão: Visual Studio Code plugin that autocompletes filenames Path Intellisense: ext install christian-kohler.path-intellisense
Propriedade - 09:26 -0 Nessa aula aprenderemos sobre propriedades dos componentes no ReactJS. Informaremos propriedades diferentes para cada componente

Desenvolvendo Aplicação

Figma - Rocket Notes: RocketNotes
Componente Header - 06:34 - Nessa aula faremos o nosso componente Header para começarmos reproduzir o nosso layout de acordo com o Figma.
Imagem do usuário - 06:03 - Nessa aula continuaremos a estilização do nosso componente Header e também adicionaremos a imagem do usuário no cabeçalho da página.
Ícones - 04:33 - Nessa aula aprenderemos a utilizar lib react-icons em nosso projeto.
- React Icons
- Instalação: npm install react-icons --save
Children - 09:11 - Nessa aula desenvolveremos o componente de sessão utilizando a propriedade children do ReactJS para exibir dados em diferentes sessões.
Componente Tag - 04:31 - Nessa aula faremos o componente <Tag /> utilizando a mesma técnica da aula anterior para exibir os marcadores em nosso projeto.
- Extensão: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text Auto Close Tag
Componente ButtonText - 04:25 - Nessa aula faremos o componente *<ButtonText />* para reutilizá-lo em outras páginas do nosso projeto.
Finalizando Detalhes - 09:15 - Nessa aula finalizaremos a página de detalhes do projeto adicionando botões e alguns outros elementos.
Aplicando Grid na Home - 08:18 - Nessa aula daremos início a página Home utilizando display: grid
Logotipo - 02:09 - Nessa aula faremos a estilização do logotipo do projeto seguindo o layout do Figma
Filtros - 03:38 - Nessa aula faremos o menu de filtros do projeto destacando a em laranja a tag que estiver selecionada.
Botão Criar Nota - 01:46 - Nessa aula faremos o botão Criar Nota utilizando react-icons
Input - 08:55 - Nessa aula faremos o componente adicionando os respectivos ícones onde for necessário.
Componente de Notas - 11:26 - Nessa aula faremos o Componente Notas e finalizaremos a página Home.
Entendendo o Map - 12:07
Estrutura da SignIn - 02:16 - Nessa aula começaremos a montar a estrutura de Login do projeto.
Formulário da SignIn - 07:33 - Nessa aula faremos o formulário de login utilizando o pacote de ícones React Icons e estilizaremos com styled-components
Utilizando Imagens - 02:32 - Nessa aula adicionaremos o background na página de login do nosso projeto.
- Link para download da imagem:background.png
Importação de Imagem - 03:53
SignUp - 04:29 - Nessa aula reaproveitaremos a página de Login (SignIn) para desenvolveremos a página de Cadastrar (SignUp)
Profile - 08:24 - Nessa aula faremos a página de perfil do nosso projeto contendo a foto e formulários para cadastrar nome, e-mail e senha.
Avatar do usuário - 08:02 - Nessa aula faremos o componente de Avatar do usuário e o botão de upload de imagem para futuramente conseguirmos substituir o avatar.
Interface New - 02:57 - Nessa aula faremos a estrutura para cadastrar novas notas em nosso projeto.
Header da New - 02:47 - Nessa aula faremos o componente Header para ser exibido ao cadastrarmos novas notas.
TextArea - 03:36 - Nessa aula faremos um novo componente do tipo TextArea para que o usuário consiga escrever várias linhas ao adicionar uma nova nota.
Componente NoteItem - 04:22 - Nessa aula faremos um novo componente chamado NoteItem com a propriedade readonly
Estilizando o NoteItem - 08:04 - Nessa aula faremos a estilização do componente criado na aula anterior, o NoteItem
Finalizando o New - 03:48 - Nessa aula finalizaremos a página de criar nova nota adicionando as tags e o botão de salvar na interface.
Rotas - 08:56 - Nessa aula utilizaremos a lib chamada React Router para fazermos as navegações funcionarem corretamente dentro do projeto.
- React Router: Declarative Routing for React
Navegação - 07:01 - Nessa aula configuraremos as rotas para que a navegação funcione corretamente.
Encerramento - 00:31

mazera3/frontend-notes-nivel09

Aplicação Frontend

Desenvolvendo Aplicação