componente React

App.js

import React, { Component } from 'react';

import PropTypes from 'prop-types';

function MiPrimerComponente( props ) {
  return (
    <h3>
    {props.texto}
    </h3>
  )
}

function Persona( props ) {
  return (
    <p>
    {props.apellido}, {props.nombres}.
    {props.edad} años.
    <b>
    Profesión: {props.profesion}
    </b>
    </p>
    
  );
}



class App extends Component {
  render() {
    return (
      
      <div>
      
        <MiPrimerComponente texto="abc"/>
        <MiPrimerComponente texto="def"/>
        <MiPrimerComponente texto="gih"/>
        
        <Persona apellido="Pérez" nombres="Carlos" edad="44" profesion="programador"/>
        
        <Persona apellido="Torres Jiménez" nombres="Claudia" edad="24" profesion="funcionaria"/>
        
        <Contador inicio={Math.round(Math.random()*20)} incremento={10} />
      
      </div>
      
      
      
    );
  }
}

export default App;

Contador.js

class Contador extends Component {
  

  constructor( props ) {
    
    super( props );

    // definimos nuestro estado:

    this.state = {
      numeroClicks: this.props.inicio
    }

  }

  render() {
    return (
      <div onClick={ () => this.incrementar() }>
        Número de clicks: {this.state.numeroClicks}
      </div>
    )
  }

  incrementar() {
    
    this.setState({
      numeroClicks: this.state.numeroClicks + this.props.incremento
    })
    
  }
  
}

Contador.propTypes = {
  inicio: PropTypes.number
}