Como Criar uma Aplicação Full-Stack com React 2/3
Criando os Componentes com React
E ai devs, como vocês estão? Espero que bem :)
Na primeira parte desta série mostrei como criar uma REST API com node, express e mongoDB, pois bem, agora vamos para a parte onde eu explico como criar o front-end com React.
Estrutura de pastas
Bom a primeira coisa que vamos fazer é arrumar a pasta /src para que atenda ao padrão fractal, pelo menos no lado dos componentes.
Vou dar uma pincelada no conceito, mas se você quiser se aprofundar, pode dar uma lida neste link onde o autor explica com detalhes.
Para começar, delete todos os arquivos, menos o index.js e o serviceWorker.js dentro da pasta /src e digite o seguinte comando.
cd src/
mkdir actions components pages reducers store style- pages: componentes React que são a base das páginas da nossa aplicação. Por exemplo, se tivéssemos uma página chamada Home, os componentes que a compõem ficariam aqui.
- components: componentes React reutilizáveis em diversas partes da nossa aplicação, como botões e inputs.
- style: nossos arquivos de css.
- actions: definição das Redux actions.
- reducers: definição dos Redux reducers.
- store: onde será instanciado o Redux store da nossa aplicação.
Se você não entendeu o que são actions, reducers e store, não se preocupe, vou explicar isto quando chegarmos na parte do Redux.
Basicamente, a estrutura fractal dentro de um aplicativo React, funciona como um arquivo JSON. Vamos ter dentro da pasta /src um arquivo chamado index.js que será nosso arquivo principal para toda nossa aplicação. É dentro dele que serão carregados os componentes que estão definidos na pasta /pages. Como é o caso do componente Layout que por sua vez carrega o component Box e assim por diante.
Com a explicação acima, teríamos (mais ou menos) a seguinte estrutura em formato JSON
{
"index.js": {
"Layout.js",
layout: {
"Box.js",
box: {
...
}
}
}
}Como pode ser observado os arquivos javascript estão em CamelCase, enquanto que as pastas em lowerCamelCased. Isso é uma convenção da estrutura que eu vou adotar.
Caso você não tenha entendido por completo, fique tranquilo, conforme formos criando as pages e moldando a aplicação, tudo ficará mais claro.
1. Criando nosso primeiro componente
Nosso primeiro componente será o Layout, mas antes precisamos ajustar o arquivo index.js para renderizar nossa aplicação e após isso colocar o framework de css Bulma, para funcionar.
1.1. Ajustando nossa página inicial
Vocês devem ter algo parecido com isto no index.js de vocês.
A primeira e segunda linha fazem o import dos pacotes react e react-dom que são a espinha-dorsal da nossa e de qualquer aplicação web feita com React.
- react: pacote necessário para criação de componentes.
- react-dom: pacote utilizado junto ao
reactpara exibir os componentes criados no DOM.
O código abaixo renderiza o component App, que foi definido na linha 4, dentro do elemento com id root.
ReactDOM.render(<App />, document.getElementById('root'));Ok…que elemento de id root?
Toda página web é construída sobre um arquivo HTML que no caso do create-react-app é definido automaticamente dentro da pasta /pubic no arquivo index.html
Podemos ver que é um arquivo HTML normal, porém ele está vazio, a não ser pela linha 17, onde é definida uma tag div com o id root. E é exatamente nesta linha que o componente App será renderizado pelo nosso código React.
Vamos modificar o src/index.js.
Excluímos o import dos arquivos de css, já que vamos utilizar o Bulma mais a frente, do componente App, pois não vamos utiliza-lo. Vamos manter o arquivo serviceWorker.js que você pode entender o que é e como funciona nestes dois links: Introdução aos service workers e Making a Progressive Web App.
Alteramos o import do react-dom já que só vamos utilizar o método render dele e modificamos a linha que renderiza a aplicação para ficar mais concisa.
Agora não precisamos do
ReactDOM.render, chamamos o método diretamente e já que não temos mais o componentAppremovemos ele e adicionamos uma tagh1apenas para fins de teste.
Digite no terminal npm start para iniciar a aplicação React e se tudo der certo, você deve ter algo como a página abaixo.
1.2. Nosso primeiro componente
Nossos componentes ficarão dentro da pasta /pages então vamos executar o código touch pages/Layout.js para criarmos o componente Layout.
Agora abra o arquivo e digite o seguinte código nele.
Fazemos o import da classe Component, dentro do pacote react para que possamos criar um componente, nesse caso com o nome Layout. O único método necessário para criação de um componente é o render() que possui como retorno o que você deseja renderizar no browser. No caso eu mantive o mesmo texto para facilitar o entendimento.
Agora, para renderizarmos este componente dentro da nossa página, vamos importa-lo dentro do index.js.
Fizemos o import do componente que acabamos de criar e adicionamos ele dentro do método render(). Agora, se você rodar o código npm start você deve ter o mesmo resultado que obtivemos anteriormente.
Pronto! Você criou seu primeiro componente React, o importou dentro de um arquivo e o renderizou dentro da sua aplicação.
A seguir veremos como adicionar um pouco de estilo a esta página.
2. Adicionando Estilo
Escolhi o framework Bulma pois acho ele simples de entender, fácil de implementar e de modificar. Mas você pode adotar qualquer outro.
Vamos utilizar um pouco de Sass, mas nada muito complicado, já que não é a minha área também.
2.1. Instalando o Bulma através do npm
Primeira coisa que precisamos fazer, é instalar o Bulma através do npm i --save bulma.
Com ele instalado, vamos criar os arquivos Sass.
2.2. Criando os arquivos de estilo
Digite o código touch style/theme.scss style/utils.scss para criação dos nossos dois arquivos de estilo. O theme conterá o código principal do Bulma e o utils, qualquer código que formos adicionar.
O código dentro do
theme.scssfaz o import do framework Bulma e do arquivoutil.scss.
2.3. Transformando o Sass em Css
Para isso vamos utilizar o node-sass-chokidar que é uma biblioteca que que transforma o código Sass em Css e o npm-run-all, que serve para executar códigos do npm ao mesmo tempo.
npm i --save node-sass node-sass-chokidar npm-run-allCom eles instalados vamos escrever um pouco de código dentro do package.json. Dentro de scripts, adicione o código abaixo.
Vamos entender o que cada linha faz.
- start: executa os scripts (através do
npm-run-all)watch-css,start-jse oserver. - start-js: é o código responsável por iniciar o aplicativo React.
- build-css: analisa a pasta
/srcprocurando por arquivos Sass e os transforma em arquivos Css e fica observando estes arquivos para qualquer mudança fazer o hot reload. - watch-css: executa o script
build-css.
Agora execute o comando npm start e um novo arquivo theme.css deve ter sido criado dentro da pasta /style. É ele quem vamos importar para nosso site.
Executando o comando npm start novos arquivos .css serão criados dentro da pasta /style.
2.4. Utilizando o Bulma na nossa aplicação
Bom, para fazermos o import é bem simples. Vamos adicionar uma linha ao index.js e já poderemos começar a usar o Bulma. Adicione a linha abaixo.
Agora vamos colocar um pouco de estilo no componente Layout. Segue o código.
Para adicionar classe Css nos componentes React precisa ser através do className. Você pode ler mais sobre aqui.
Agora rode o comando npm start e você deve ter algo parecido com isto.
Pronto! Já temos um componente e agora temos o Bulma funcionando.
3. Criando os componentes da aplicação final
Agora é a parte onde criaremos todo o “esqueleto” da nossa aplicação. Ainda não entraremos na parte de conexão com a API que criamos, mas isso será importante para entender como os componentes conversam entre si e suas estruturas básicas.
3.1 Criando o componente Box, List e Form
Temos um componente chamado Layout que é composto por outros componentes. Os componentes “filho”, pelo padrão fractal, devem ficar em uma pasta com o mesmo nome do componente “pai”. Sendo assim digite o código mkdir pages/layout e crie o arquivo Box.js dentro da nova pasta.
E faça o import dele dentro do Layout.js e o adicione à função render().
Agora, se executarmos o npm start, teremos algo assim.
Dentro do Box temos dois componentes, o List e o Form. Sendo, respectivamente, um responsável por listar as tasks e o outro um formulário para criação ou edição delas. Digite o comando abaixo no terminal.
cd layout
mkdir box &&
touch box/Form.js box/List.jsSe você percebeu a tag
FragmentnoForm.jse está se perguntando o porque disso, segue um link para o doc do React. Vamos usar em outras partes do código também.
Agora no Box.js altere o código para adicionar os dois componentes que criamos.
Mas calma! Da forma como eu planejei esta aplicação, teríamos uma página para listar e outra para criar as tasks.
E como que lidamos com troca de página no React? Vamos ver agora!
3.2. O pacote react-router-dom
Navegação de páginas é algo bem simples com React, só vamos precisar importar um pacote chamado react-router-dom. Porém, diferente do react-dom ele não vem pré-instalado com o create-react-app. Então o precisamos instalar com código npm i --save react-router-dom
Após a instalação, faremos o import dentro do Box.js como segue o código abaixo.
Primeira coisa que fazemos é o import de três componentes do pacote react-router-dom. O primeiro a ser colocado dentro do nosso componente Box é o BrowserRouter, seguido do Switch.
Agora, para cada rota que queremos ter, utilizamos o Route com alguns atributos. O atributo component diz qual o componente deverá ser renderizado caso a URL digitada esteja igual ao path. Por exemplo, no nosso caso para criarmos uma nova Task temos que ir para o componente Form e para isso devemos ir para a rota /create ou /update/:id , sendo que neste caso iriamos editar a task.
Se você quer entender o porque de cada linha abaixo, sugiro que leia este link.
Inicie o servidor e teste o código digitando na URL /create e /update/1 . A seguinte tela deve estar aparecendo.
Ótimo! O componente List deve estar sendo renderizado também e já estamos prontos para criar o restante do componentes.
3.3. Componentes do List
Bem, para listar as tasks vamos criar dois componentes que por sua vez serão subdivididos em outros menores.
- Task: irá definir a estrutura de cada task na lista.
- MenuTab: responsável por exibir um menu onde poderão ser selecionadas as task já completadas e as que ainda não foram.
- task/DoneButton: Botão dentro da
Taskque irá disparar um comando para o servidor marcar a task como completed ou not completed. - task/EditButton: Botão dentro da
Taskque irá direcionar para a página de edição daquela task. - menuTab/Tab: Define as abas dentro do
MenuTab.
Vamos começar com o componente Task e seus subcomponentes. para isso digite o comando mkdir list && touch list/Task.js.
Como você pode ver, já temos 3 componentes novos, o TextInput, DoneButton e o EditButton . Vamos criar estes dois últimos primeiro e depois vamos para o TextInput. Digite mkdir task && touch task/DoneButton.js task/EditButton.js.
Você percebeu que criamos este componente de uma forma diferente dos outros? Normalmente declaramos
class nomeDoComponente extends Component {}mas dessa vez não utilizando o comando class nem extends Component. Este artigo explica muito bem a diferença entre os dois e quando usar cada um.
Outra coisa, podemos ver que há um import de um componente chamado FontAwesomeIcon. Esse é um componente do pessoal do Font Awesome que criaram uma forma de “componentizar” os seus ícones para o React. Para instalar é bem simples, basta digitar o comando abaixo no terminal e adicionar um pouco de código no index.js que também segue abaixo.
npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesomeAgora vamos para o EditButton.
Dessa vez dentro do parenteses passamos um parâmetro _id que depois é utilizado dentro de um componente Link. Esse parâmetro _id será utilizado mais para frente para que possamos entrar na página de edição de uma determinada task.
Através do componente Link que faz parte do pacote react-router-dom, criamos um componente clicável que nos leva até a rota determinada na propriedade to.
Para efeitos de teste podemos modificar o componente Task da seguinte forma.
Estamos passando através da propriedade _id o número 1, que o componente EditButton irá receber e passar para o componente Link. Antes de ver isso na prática precisamos criar o TextInput. Crie o arquivo TextInput.js dentro da pasta /components já que ele vai ser reusado em outros componentes como no Form. Agora digite o código abaixo.
Assim como o EditButton, ele também recebe alguns parâmetros que serão passados para a criação do input. Vamos alterar a chamada dele dentro do Task.
Agora só precisamos adicionar o componente Task no List e executar o npm start. Segue código do Task.
Você deve ter algo assim agora.
Ok, agora vamos criar o MenuTab.js e o Tab.js. Dentro da pasta /list digite o seguinte código no terminal touch MenuTab.js && mkdir menuTab && touch menuTab/Tab.js. Para o MenuTab segue o código abaixo.
Precisamos criar o Tab.js, segue o código.
Nada de novo por aqui. Chamamos o Tab dentro do MenuTab passando alguns parâmetros que são recebidos e renderizados pelo Tab. Agora vamos alterar o List e executar o comando npm start.
Você deve ter algo parecido com isto agora. Um menu que exibe a quantidade de tasks completas e incompletas.
No momento, estamos passando isso de forma estática, porém assim que estabelecermos conexão com o servidor isso mudará.
Agora vamos criar o botão que irá nos redirecionar para o form de cadastro de task. Crie um arquivo na pasta /list chamado CreateButton.js coloque o código abaixo e adicione ele ao componente List logo acima do MenuTab.
Ele possui um ícone do font-awesome que precisamos adicionar no src/index.js. Adicione as linhas abaixo para que possa ser renderizado corretamente.
3.4. Componentes do Form
Dentro da pasta /box digite mkdir form && touch form/Button.js form/Inputs.js.
Vamos começar criando o Button.js.
Como pode ser observado, este componente recebe um parâmetro chamado de _id e cria uma variável deleteTaskButton que só é renderizada caso tenha sido passado um _id. Isso porque vamos usar o componente Form tanto para criar quanto para editar uma task. E se formos editar deve haver um botão para exclusão e atualização, enquanto que se formos criar, apenas um botão para salvar a task é necessário.
Agora, o componente Inputs.js.
Aqui, chamamos o componente TextInput para o título da task e alguns outros inputs para os outros campos.
Por enquanto não vamos receber nenhuma task já que não fizemos a conexão com o banco de dados, mas quando fizermos, voltamos nos componentes para fazer as alterações necessárias.
Agora vamos alterar o Form.js para receber os seus componentes corretos.
E agora rodando o npm start e indo pra URL /create você deve ter algo assim.
Muito bem, criamos toda a estrutura da nossa aplicação. No próximo artigo vamos finalizar ela adicionando o Redux para gerenciamento do state e o Axios para conexão com o servidor que criamos.
Abs, galera. 👊
