Projeto Reflix

Anotações do desenvolvimento do projeto com base no Aluraflix

Link repositório reflix: https://github.com/NetoPaiva/reflix/

Etapa 02 - Criar componentes

Estrutura básica do componente no projeto

Criar pastas e arquivos referentes aos componentes

• dentro da pasta src
  • criar a pasta components

• dentro da pasta components
  • criar a pasta Menu

• dentro da pasta Menu criar os arquivos
  • index.js
  • Menu.css

> src
	> components
		> Menu
			- index.js
			- Menu.css

Se for desenvolver o projeto com styled-components utilizar estrutura específica, apenas com o index.js na pasta do componente, que conterá tanto o HTML quanto o CSS.

Estrutura básica do index.js do componente

No arquivo Menu/index.js

• importar a biblioteca React
• importar o arquivo CSS do componente
• criar a função do componente
• inlcuir o return da função
• exportar a função

import  React  from  "react";
import  './Menu.css';

function  Menu() {
	return(
	
	);
}

export  default  Menu;

Essa é a estrutura básica de componentes React. Toda a definição HTML do componente será declarada dentro do return da função.

Estrutura HTML do componente Menu

No arquivo Menu/index.js

• dentro do return da função Menu
  • declarar a tag nav com a classe menu

• a tag nav conterá duas tags de link a
  • do logo
    • com direcionamento para a "home" (/)
    • contendo a tag de imagem img com os atributos src e alt
  • do botão "Novo vídeo"
    • com a classe botao-menu
    • com direcionamento provisório para "home" (/)
    • contendo o texto "Novo vídeo"

return (
	<nav  className="menu">
		<a  href="/">
			<img  src=""  alt=""  />
		</a>
		<a  className="botao-menu"  href="/">Novo vídeo</a>
	</nav>
);

Incluir pasta de imagens do projeto

• dentro da pasta src
  • criar a pasta assets
• dentro da pasta assets
  • criar a pasta img

> src
	> assets
		> img

A pasta assets guardará todos os recursos adicionais do projeto, como imagens, fontes e outros.

Criar Logotipo

• site "Font Meme" ( https://fontmeme.com/pt/fonte-da-netflix/ )
• gerar imagem com:
  • tamanho 120px
  • cor #2A7AE4
• exportar e salvar imagem na pasta de imagens
  • src/assets/img/devflix-logo.png

Importar imagem do logo

No arquivo Menu/index.js

• abaixo da linha de importação do Menu.css
• importar a propriedade Logo indicando o caminho do arquivo
• na tag img definir os valores dos atributos:
  • className com o seletor logo
  • src com a propriedade Logo
  • alt com o texto explicativo da imagem

import  Logo  from  '../../assets/img/devflix-logo.png';
...
return (
	<nav  className="menu">
		<a  href="/">
			<img  className="logo"  src={Logo}  alt="Logotipo Devflix"  />
		</a>
		<a  className="botao-menu"  href="/">Novo vídeo</a>
	</nav>
);

Definir estilo do componente Menu

No arquivo Menu.css

• incluir os seletores do compomente com seus atributos e valores
  • body
  • menu
  • logo
  • button-menu
• incluir os valores responsivos

Código CSS completo do componente Menu

body {
	--bodyPaddingTop: 94px;
	padding-top: var(--bodyPaddingTop);
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;

	background: var(--black);
	border-bottom: 2px  solid  var(--primary);

	width: 100%;
	height: 94px;
	z-index: 100;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	padding-left: 5%;
	padding-right: 5%;
}

.logo {
	max-width: 168px;
}

.button-menu {
	display: inline-block;

	border: 1px  solid  var(--white);
	border-radius: 5px;
	box-sizing: border-box;

	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	color: var(--white);
	outline: none;
	text-decoration: none;

	cursor: pointer;

	padding: 16px  24px;

	transition: opacity  .3s;
}

.button-menu:hover,
.button-menu:focus {
	opacity: .5;
}

@media screen and (max-width: 800px) {

	body {
		--bodyPaddingTop: 40px;
		padding-top: var(--bodyPaddingTop);
	}

	.menu {
		height: 40px;
		justify-content: center;
	}

	.logo {
		max-width: 105px;
	}

	a.button-menu {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		background: var(--primary);
		border-radius: 0;
		border: 0;

		text-align: center;
	}

}

Incluir componente na aplicação

No arquivo src/App.js

• dentro do return da função "App"
  • incluir a tag <Menu />

O VSCode faz a importação automática do componente ao declarar a tag Menu. Caso esta ação automática não ocorra, a importação deverá ser feita manualmente, digitando no início do arquivo, abaixo da linha de importação do React:

 import  Menu  from  './components/Menu';

Código do arquivo src/App.js

import  React  from  'react';
import  Menu  from  './components/Menu';

function  App() {
	return (
		<div>
			<Menu  />
			<h1>Hello, World!!</h1>
		</div>
	);
}

export  default  App;

Estrutura atualizada do projeto

> reflix
	> node_modules
	> public
		- index.html
		- manifest.json
		- robots.txt
	> src
		> assets
			> img
				- devflix-logo.png
		> components
			> Menu
				- index.js
				- Menu.css
		- App.js
		- index.css
		- index.js
	- .gitignore
	- package.json
	- README.md

Registrar etapa do projeto

• fazer commit
• enviar para repositório remoto (GitHub)

( --> fim etapa 02 <-- )