Desafio técnico de front-end para o processo seletivo da Estante Mágica. O objetivo é reproduzir as páginas do figma utilizando ReactJS e Arquitetura Limpa (se possível).
Design retirado do figma.
- O primeiro passo é instalar o Git em seu computador caso você ainda não o tenha.
- Os pacotes que iremos utilizar durante o desenvolvimento desse projeto serão gerenciados pelo Node Package Manager (NPM), então precisaremos instalá-lo. Vamos até o site oficial do Node.js para instalar sua versão LTS (versão mais estável). Quando instalamos o Node.js, o NPM também é instalado no computador como parte do mesmo pacote.
- Através do NPM instalaremos em nosso projeto o Sass (um CSS com super poderes!).
- Além disto é interessante ter um bom editor para trabalhar com o código como por exemplo o VSCode.
# Abra seu terminal/cmd e clone este repositório
$ git clone https://github.com/MayllaRabay/estante-magica
# Acesse a pasta do projeto
$ cd estante-magica
# Baixe todas as dependências e pacotes da aplicação
$ npm install
# Execute a aplicação em modo de desenvolvimento pelo Yarn
$ yarn start
# A aplicação será aberta na porta:3000 - acesse em seu navegador
http://localhost:3000
Com o React é mais fácil e prático de manipular a interface de acordo com o que o usuário poderá interagir, graças à tríade que o compõe: COMPONENTES, PROPRIEDADES e ESTADOS.
Toda função dentro do React que retorna um HTML é um COMPONENTE! Os componentes facilitam a manutenção e a leitura do código, principalmente quando nossa aplicação começa a ficar grande, com muitas páginas, muitas linhas de código, muitas funcionalidades. O uso de componentes no React é excelente para evitar repetição, ou seja, quando temos o mesmo 'pedaço' de interface se repetindo ao longo da aplicação, um header ou footer por exemplo, nós podemos encapsular essa parte em um componente e utilizá-lo várias vezes dentro da nossa aplicação.
Além dos componentes serem uma forma de reutilizarmos código, eles também servem para isolar as responsabilidades de uma determinada funcionalidade, sendo assim mais fácil de resolver bugs e manter a integridade do código, com menos chance de quebrá-lo.
Para mais informações, veja a documentação do React.
Feito com ❤️ por Maylla Rabay 👋 Entre em contato!