Javascript Semântica dos apps com ReactJS

[Anderson LTI]

Fala pessoal, eu já crio alguns sites a algum tempo usando JS e agora React, já tenho um certo conhecimento nessas linguagens pois a estudei, tenho interesse de entrar nesse mundo da programação e ganhar dinheiro com isso, mas eu não sei se a semântica dos apps que eu crio são compatíveis com o mercado e tenho muita insegurança em aceitar criar um projeto, mesmo que freelancer e mesmo sabendo que eu sei fazer o que foi proposto, enfim então tenho alguns projetos no git que já foram avaliados por algumas pessoas e obtive até um bom retorno, agora estou aprendendo ReactJS, e criei um app simples, bem simples mesmo o objetivo dele é fazer um cálculo, não há nenhum erro no código, mas eu queria saber de vocês se o app está seguindo os padrões etc...

import React from 'react';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <nav className="menu"></nav>
        <div className="display"></div>
        <Funcao />
        <Banner />
      </div>
    );
  }
}

//classe Funcao exibe todos os componentes para o calculo dos valores 
//e retorna o valor total dentro da classe App, no componente display.
class Funcao extends React.Component {
  handleClick() {
    var n1, n2, resultado;
    n1 = document.querySelector('.altura').value;
    n2 = document.querySelector('.peso').value;

    resultado = (n1 / n2);
    
    document.querySelector('.display').innerHTML= resultado;
  }

  render() {
    return (
      <div>
        <input type="text" className="altura"/>
        <input type="text" className="peso" />
        <button onClick={() => this.handleClick()}>calcular</button>
      </div>
    );
  }
}

class Banner extends React.Component {
  render() {
    return (
      <div className="fundo"></div>
    );
  }
}

export default App;

 

[GabrielSennaMs]

@Anderson LTI 

 

Bom amigo talvez o que falte no seu código é o uso do "State" no seu componente.

 

Fiz um exemplo pra deixar mais claro essa questão

import React from 'react';
import '../../assets/css/App.css';

class Layout extends React.Component
{
    render() {
        return (
            <div className="app">
                <Funcao />
            </div>
        );
    }
}
  
class Funcao extends React.Component
{
    constructor()
    {
        super();
        this.state = {height: 0, weight: 0, result: null};
    }

    handleClick = () => this.setState({result: (this.state.height / this.state.weight)});
    
    model = (event) => this.setState({[event.target.name]: event.target.value})
    
    render()
    {
      return (
        <div>
            <p>{this.state.result}</p>
            <input onChange={this.model} type="text" name="height" />
            <input onChange={this.model} type="text" name="weight" />
            <button onClick={() => this.handleClick()}>Calcular</button>
        </div>
      );
    }
}

export default Layout;