Categorias
Sugeridos

CRIANDO UM APP DO ZERO COM REACT.JS (COM ÍNDICE – 2020)


Acesse: CriamosSite.com
Saiba Mais Sobre: criando um site do zero
[jetpack_subscription_form]



Este é um vídeo onde eu mostro a criação de um App utilizando uma das tecnologias mais utilizadas no mercado, o React.js.

Esta é a primeira parte da construção do nosso MVP (Produto mínimo viável) onde implementamos apenas a parte frontend (interface), estaremos implementando em outros vídeos, melhorias e a parte backend deste projeto.

Preview do App: https://conectadev.vercel.app/

Obs.: Se você ainda não tem conhecimento básicos sobre React.js, sugiro assistir o vídeo (https://youtu.be/3vtTGgicNdM) antes de assistir este vídeo.

✔ REDES SOCIAIS:
Plataforma: https://www.wazana.dev/
Comunidade Discord: https://discord.gg/RSCZbgNQBg
Instagram: https://instagram.com/wazana.dev
Linkedin: https://www.linkedin.com/company/wazana-dev/

✔ ÍNDICE:
0:00 | Introdução
2:46 | Configuração inicial do Projeto
4:52 | Criando a página inicial (Home)
11:07 | Aplicando estilos CSS no componente Home
16:57 | Criando componentes para página Home
18:50 | Versionamento de Código com Git
24:37 | Repositório na núvem com GitHub
29:42 | Interface Gráfica para Git com GitKraken
34:14 | Instalando biblioteca de componentes Material Design
36:27 | Utilizando componentes do Material Design
38:59 | Aplicando estilos nos componentes com Material Design
45:15 | Criando a Barra do topo
56:38 | Criando a Barra lateral da página Home
1:06:06 | Utilizando propriedades do tema
1:15:12 | Criando componente Feed
1:34:07 | Customizar o Tema do App
1:44:35 | Controle de rotas com react-router v6
1:46:34 | Criando componente de Login
1:55:20 | Customizando componente de Login
2:12:45 | Utilizando componente Grid
2:29:12 | Comunicação via API
2:36:52 | Chamada a API via Axios
2:43:16 | API mock
2:49:59 | Serviço de autenticação do App
3:11:16 | Controle de autenticação em Rotas
3:22:05 | Gerenciando estado do App com Redux
3:33:16 | Persistindo dados globais do Redux
3:48:48 | Chamadas assíncronas com Redux
3:53:18 | Persistindo usuário autenticado com “JWT Token”
4:32:02 | Criando componentes de exibição de notificações
5:03:46 | Criando componente de criação de post
6:20:21 | Context API para manipular dados entre componentes de Postagem
6:48:56 | Publicando o App no servidor da Vercel
6:57:53 | Aplicando Open Source no projeto
7:12:01 | Componente de visualização de Post
7:44:37 | Criar pagina de Perfil do Usuário
8:13:12 | Customizando tema Claro e Escuro (Dark Mode – Light & Dark)
8:36:55 | Considerações Finais
8:37:51 | Implementações Finais

✔ REFERÊNCIAS:
VS Code (PARA DOWNLOAD): https://code.visualstudio.com/
Node.js (PARA DOWNLOAD): https://nodejs.org/
Git (PARA DOWNLOAD): https://git-scm.com/
Create React App: https://create-react-app.dev/
React (oficial): https://reactjs.org/
CSS: https://www.w3schools.com/css/css3_flexbox.asp
GitHub: https://github.com/
GitKraken (PARA DOWNLOAD): https://www.gitkraken.com/
Material-ui: https://material-ui.com/
Material Design:https://material.io/design/
Axios: https://github.com/axios/axios
React-router: https://reactrouter.com/
Redux: https://redux.js.org/
React Redux: https://react-redux.js.org/
Middleware Redux Thunk: https://github.com/reduxjs/redux-thunk
ESLint: https://eslint.org/
Prettier: https://prettier.io/
React-dropzone: https://github.com/react-dropzone/react-dropzone
Vercel: https://vercel.com/
Tipos de licenças: https://choosealicense.com/
Github -Repositório do projeto: https://github.com/lucasnhimi/conectadev
React-markdown: https://github.com/rexxars/react-markdown

Hashtags: #CRIANDO #APP #REACTJS #ÍNDICE

Autor ID: UCVE9-HO_GzLtDK4IGKVSYXA

Autor: Lucas Nhimi

Deixe um comentário

O seu endereço de e-mail não será publicado.

%d blogueiros gostam disto: