React: boas práticas e refatoração | Alura Cursos Online
Primeiras aulas do curso React: boas práticas e refatoração
React: boas práticas e refatoração
Conhecendo o MaterialUI - Introdução
Bem-vindo e bem-vinda ao curso de React Parte 3. Este curso é para você que quer se aprofundar cada vez mais no React e aprender melhor suas práticas, outras formas de lidar com essa biblioteca e outras formas de trabalhar dentro desse universo.
Nesse curso aqui aprenderemos as melhores práticas para trabalhar com React e o JavaScript. Também vamos aprender a lidar com uma biblioteca chamada MaterialUI que é um framework usado para trabalhar com estilos de componentes dentro do React e também vamos aprender bastante sobre técnicas e métodos de refatoração do nosso código.
Para fazer esse curso, é preciso que você tenha feito a Parte 1 e Parte 2 do React, porque vamos trabalhar com a mesma aplicação. Além disso, é preciso ter algum conhecimento básico de JavaScript.
Nesse curso, vamos trabalhar novamente na Casa do Código. Então vamos refatorar nossas tabelas, nossos botões, nossos formulários e jeitos diferentes de trabalhar com nosso estado.
Vamos aprender muitas coisas como trabalhar com tipografia dentro do MaterialUI, como usar estilos específicos dentro do MaterialUI também, que seriam os styles. Por fim, trabalharemos com nosso pop up,o toast do MaterialUI.
Conhecendo o MaterialUI - Instalando MaterialUI
No decorrer deste curso vamos trabalhar nossa aplicação da Casa do código. Vamos abri-la para estudá-la. Algumas informações já estão cadastradas e daremos continuidade isso vendo a terceira parte do React. Daqui para frente vamos aprimorar nosso aplicativo.
Dentro do nosso sistema inde.js estamos inicializando todos os componentes e estamos importando, inicializando nosso React com o render.
Por sua vez, ele faz isso por meio de uma tag de ID root.
Como não usaremos o service work, vamos removê-lo. Se um dia ele for necessário novamente, o programador o adicionará com as configurações necessárias para seus fins.
Continuando, dentro da pasta page temos todas as pastas referentes ao nosso Router dentro dele encontramos Home, sobre, livros, autores e NotFound e uma pasta para cada um deles. Primeiramente vamos configurar Home, que é a página inicial.
Vamos em Home > Home.js. Nesse nosso curso, não estamos testando, então podemos remover o arquivo de testes. Agora vamos analisar o o código de Homee refatorar se necessário.
removerAutor = id => { ...
escutadorDeSubmit = autor => { ...
componentDidMount(){ ...
<div className="container mb-10">
<h1>Casa do Código</h1>
<Tabela autores={this.state.autores} removeAutor>{this.removeAutor} />
Form escutadorDeSubmit={this.escutadorDeSubmit}/>
Estamos usando aqui uma class Home e ela vai pegar dessa class e vai estender para componente para gente conseguir trabalhar direitinho. Dentro do render, retornamos um Fragment que vai ser o nosso código. Dentro desse nosso código, ele tá fazendo muita coisa. e vamos entender um pouco melhor como vamos separar isso de outras formas, mas o mais importante aqui que a gente vai mudar por enquanto vai ser o seguinte...
import Header from '../../Components/Header/Header';
import Tabela from '../../Components/Formulario/Formulario';
import Form from '../../utils/PopUp';
import PopUp from '../..utils/ApiService';
import ApiService from '../..utils/ApiService';
Aqui, estamos importando o materialize-css dentro de um arquivo minificado.Porém, o materialize não é feito para React. Ele é sim uma biblioteca, um framework css, mas ele não é feito para isso. Por isso, neste curso, vamos introduzir o Material - Ui.
O Material - Ui também é um framework de várias utilizações, mas neste caso aqui ele é feito para React, ele é um React Component, por isso, se precisarmos de um componente pegamos diretamente ele e não de classes. Então vamos migrar todo essa materialize que temos aqui para Materil Ui e vamos entender como funciona com componentes externos que personalizaremos.
Antes de mais nada, precisamos instalar o Material Ui, para isso, vamos digitar npm install material-ui/core em nossa linha de comando. No próximo vídeo, começamos a trabalhar com ele!
Conhecendo o MaterialUI - Tabela MaterialUI
Sobre o curso React: boas práticas e refatoração
O curso React: boas práticas e refatoração possui 131 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.