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.

ReactDOM.render()

Por sua vez, ele faz isso por meio de uma tag de ID root.

document.getElementById('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.

class Home extends Component { 
    constructor(props){
        super(props);

        this.state = { 
            autores: [],
        };
    }

    removerAutor = id => { ...
    }

    escutadorDeSubmit = autor => { ...
    } 

    componentDidMount(){ ...
    }

    render() { 
        return (
        <Fragment>
        <Header / >
        <div className="container mb-10">
        <h1>Casa do Código</h1>
        <Tabela autores={this.state.autores} removeAutor>{this.removeAutor} />
        Form escutadorDeSubmit={this.escutadorDeSubmit}/>
        </div>
        </Fragment>
    );
}

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 React, { Component, Fragment } from 'react'; 
import 'materialize-css/dist/css/materialize.min.css'; 
import './Home.css';
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';

class Home extends Component {

    constructor(props){
        super(props);

        this.state = {
            autores: [],
        };

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.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1150 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana