Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Uma curiosidade que tenho sobre a declaração de componente na aula.

Quando eu crio o componente meu código não roda da forma que o intrutor faz class Botao extends React.Component{ [...] } meu Vscode pede que eu declare o componente da seguinte forma class Botao extends react.Component{ [...] } escrevendo o react com letra minúscula caso contrario o código quebra, porque?

5 respostas

Salve, Alisson!

Consegue compartilhar o código inteiro do seu componente pra gente dar uma analisada juntos?

Claro Marcos, segue abaixo;

import react from 'react';
import './styles.scss'

class Botao extends react.Component{
    render(){
      return(
            <button className="botao">            
                Clique Aqui
            </button>
        )
    }
}

export default Botao;

Somente desta forma funcionou para mim, Caso queira dar uma olhada no projeto completo o link é esse: https://github.com/AlissonVieiraXavier/React.js/tree/main/my-react-app

Baixei seu projeto aqui, ele rodou direitinho. Fiz o ajuste do import e não tive problemas, dessa forma:

import React from 'react';
import style from './botao.module.scss'

class Botao extends React.Component {
    render() {
        return (
            <button className={style.botao}>
                {this.props.children}
            </button>
        )
    }
}

export default Botao;
solução!

Como utilizamos o export default do react, podemos nomear da forma que quisermos. Por exemplo:

import ReactEhUmaLibBacana from 'react';
import style from './botao.module.scss'

class Botao extends ReactEhUmaLibBacana.Component {
    render() {
        return (
            <button className={style.botao}>
                {this.props.children}
            </button>
        )
    }
}

export default Botao;

Hum entendi, Obrigado pela dica Marcos ;)