Projeto Reflix

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


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


Etapa 01 - Iniciar e refatorar projeto básico

Documentação React


Ambiente de desenvolvimento

Recursos necessários


Iniciar projeto (create-react-app)

O comando irá criar a pasta com o nome do projeto e, dentro da pasta, criará a estrutura básica de projeto React

Atualmente, existem outras formas de criar um projeto React além do C-R-A, como o Vite demonstrado na Live do Desafio.


Manter controle de versão do projeto

O projeto básico do React já é criado com o controle de versão. Não precisa rodar os comandos git init, git add e git commit.



Abrir o projeto no VS Code


Rodar o projeto

O comando start trabalha com o recurso "hot reloading", todas as alteraçõs realizadas no código serão atualizadas no navegador, em tempo real, sem precisar recarregar a página. Por isso, mensagens de erro podem aparecer constantemente no navegador durante o desenvolvimento, enquanto a sintaxe do código não estiver correta.

Uma boa prática é cultivar o hábito de ler e compreender as mensagens de erro, são fortes aliadas no desenvolvimento profissional.


Limpar projeto padrão

Deletar arquivos da pasta src:


Refatorar o arquivo src/index.js


Código final do arquivo src/index.js:

import  React  from  'react';
import  ReactDOM  from  'react-dom/client';
import  './index.css';
import  App  from  './App';

const  root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

Refatorar o arquivo src/App.js



Código refatorado do arquivo src/App.js:

import  './App.css';

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

export  default  App;

Refatorar o arquivo public/index.html

<html  lang="pt-BR">


<link  rel="icon"  href="img/favicon.ico"  />
<title>Reflix | Projeto React</title>

<!-- importar fontes -->
<link  rel="preconnect"  href="https://fonts.googleapis.com">
<link  rel="preconnect"  href="https://fonts.gstatic.com"  crossorigin>
<link  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"  rel="stylesheet">

Deletar os arquivos da pasta public


Substituir o arquivo da pasta public

Substituir por um ícone do projeto, caso não tenha um ícone próprio é possível geral em plataformas online, como a favicon-generator.org, ou manter o símbolo do React ou deixar sem ícone.


Estrutura limpa do projeto

> reflix
	> node_modules
	> public
		- index.html
		- manifest.json
		- robots.txt
	> src
		- App.js
		- index.css
		- index.js
	- .gitignore
	- package.json
	- README.md

Reset CSS

Refatorar o arquivo src/index.css


Codigo Reset do projeto - arquivo src/index.css

* {
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
}

:root {
	--primary: #2A7AE4;
	--black: #000000;
	--blackLighter: #9E9E9E;
	--grayLight: #F5F5F5;
	--grayMedium: #e5e5e5;
	--white: #FFFFFF;
	--frontEnd: #6BD1FF;
	--backEnd: #00C86F;
}

html,
body {
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
}

#root {
	min-height: calc(100vh - var(--bodyPaddingTop));
	display: flex;
	flex-direction: column;
}

Registrar etapa do projeto


( --> fim etapa 01 <-- )