html Este es un ejerciciodecómoconsitirun componente con React usando clases。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Este es un ejerciciodecómoconsitirun componente con React usando clases。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Mundo React</title>
</head>
<body>
<!-- En este section por medio del Id='app' vamos a reenderizar todo nuestro componente -->
<section id='app'></section>
<!-- Este es el CDN para utilizar JSX con babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.0/babel.js"></script>
<!-- Estos son los CDN para utilizar React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<!-- Este es el código de nuestro componente React -->
<!-- El type es importante para que el navegador entienda que estamos usando babel para escribir en JSX -->
<script type="text/babel">
// COMPONENTE
//Hay varias formas de crear un componente con React.
//A continuación vemos como crear un componente con una Clase de js.
//La Ventaja de crear componentes con clases es que tenemos acceso al estado del componente.
class MiComponente extends React.Component {
//Constructor es uno de los primeros estados del componente.
constructor(props) {
//hacer super super(props) siempre es obligatorio cuando definimos el metodo constructor. De esta forma se los pasamos a nuestra clase.
super(props);
//este objeto de js nos permite setear un estado.
this.state = {
count: 0,
};
//El bind es para que el virtual dom no pise nuestro componente.
this.handleClick = this.handleClick.bind(this);
}
//Función para actualizar el estado al hacer clic en el botón
handleClick() {
//setState sirve para setear un nuevo estado. En este caso con el evento onClick
this.setState({
count: this.state.count + 1,
})
};
//No recive parametros porque se accede con this al ser una clase.
render() {
const variable = this.props.variable;
return (
<div>
<h1>
Cantidad de {variable} {this.state.count}
</h1>
<button onClick={this.handleClick}>Botón</button>
</div>
);
}
}
//Esta función sirve para instanciar a React y Crear el elemento
ReactDOM.render(
//En esta linea le pasamos nuestro componente 'MiComponente'
//Seguido de las props que vamos a utilizar 'variable='Clics''
//Esto es sintaxis de JSX
<MiComponente variable='Clics'/>,
//En esta linea obtenemos el id 'app' para reenderizar dentro nuestro componente
document.getElementById('app')
);
// TERMINA COMPONENTE
</script>
</body>
</html>
以上是关于html Este es un ejerciciodecómoconsitirun componente con React usando clases。的主要内容，如果未能解决你的问题，请参考以下文章