Ir ao conteúdo
  • Cadastre-se

Javascript Semântica dos apps com ReactJS


Posts recomendados

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;

 

Link para o comentário
Compartilhar em outros sites

@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;

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Redes-Wi-Fi-capa-3d-newsletter.png

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!