/Imersao-React

Projeto realizado na semana da Imersão React da Alura. Tem como proposta fazer um layout inspirado no site da Alura e Netflix.

Primary LanguageJavaScriptMIT LicenseMIT

Objetivo

Essa aplicação foi desenvolvida durante a semana de Imersão da Alura, o objetivo dessa aplicação é ensinar os conceitos básicos do React e algumas funcionalidades que tornaram esse framework tão grande! Segue o conteúdo que será (ou foi dependendo de quando abrir esse repositório) passado em cada dia da semana:

Dia 1

O que é React e componentes:

Entender a popularização do React, componentes, Create React App, Styled Components e fazer o primeiro deploy!

Desafio

Colocar a sua versão da AluraFlix, com o nome que você acha feliz;

Mudar as cores, logo e tudo mais que te der vontade;

Alterar os vídeos e categorias com conteúdos que você gosta;

Dia 2

Roteamento e State:

Aprender sobre as páginas no estilo SPA, as vantagens do State e criação de um carrossel para os vídeos

Desafio

Colocar algo legal na página 404;

Dia 3

Formulários reutilizáveis e mais componentes:

Explorar a fundo a criação de componentes, reutilizar lógicas comuns com hooks e criar campos de formulários animados

Desafio

Fazer o textarea funcionar;

Fazer a animação da netflix nos campos do formulário;

Fazer os estilos;

Criar uma página para fazer cadastro de pokémons e trazer seus pokémons favoritos dentro dos valores iniciais (ao invés de categorias);

Tentar criar um card para mostrar isso com styled components;

Dia 4

AJAX e Validação:

Entender o protocolo HTTP, aprender como enviar e buscar dados de um back-end, adicionar suporte de validação em nossos campos e colocar a cópia do seu projeto no ar

Desafio

Variar a animação do form com a propriedade transform

Tentar cadastrar uma categoria

Dia 5

Formulário de cadastro e remoção de vídeos:

Finalizar o cadastro de vídeos, configurar remoções e conhecer melhor o mercado de React

Comandos do projeto

Essa é uma aplicação feita utilizando o [Create React App] do Facebook (https://github.com/facebook/create-react-app).

Para rodar o projeto utilize o seguinte comando:

yarn start

Para preparar o projeto para deploy utilize o seguinte comando:

yarn build

Ferramentas ou Bibliotecas utilizadas

Styled Components - Biblioteca React para facilitação da criação de componentes - https://styled-components.com/

React Router - Biblioteca React para facilitação do routeamento da aplicação - https://reactrouter.com/web/guides/quick-start

React Slick - Biblioteca React para criação de Carousel - https://react-slick.neostack.com/

Fonts Google - Lugar onde pode pegar fonte diretamente desenvolvidas pelo Google - https://fonts.google.com/

Fontmeme - Site onde pode criar sua propria logo - https://fontmeme.com/netflix-font/

ESlint - biblioteca utilizada para melhor pradonização do código - https://eslint.org/

Prop-Types - biblioteca utilizada pelo ESlint - https://www.npmjs.com/package/prop-types

Json-Server - biblioteca para dados Fake - https://github.com/typicode/json-server

Concurrently - Permite rodar depois comandos que bloqueia o terminal ao mesmo tempo - https://www.npmjs.com/package/concurrently