html Este es un ejerciciodecómoconsitirun componente con React usando funciones。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Este es un ejerciciodecómoconsitirun componente con React usando funciones。相关的知识，希望对你有一定的参考价值。
<!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 función de js.
function Hola(props){
//Los props son todos los atributos que vamos a pasar para reenderizar en nuestro componente.
const name = props.name;
//Acá retornamos un elemento de UI para visualizar nuestro componente
//Este seria nuestro Componente HTML creado con la sintaxis de JSX
return (
<h1 id='Title'>
Hola {name}
</h1>
);
}
//Esta función sirve para instanciar a React y Crear el elemento.
ReactDOM.render(
//En esta linea le pasamos nuestro componente 'Hola'.
//Seguido de las props que vamos a utilizar 'name='mundo'.
//Esto es sintaxis de JSX
<Hola name='Mundo' />,
//En esta linea obtenemos el id 'app' para reenderizar dentro nuestro componente
document.getElementById('app')
);
// TERMINA COMPONENTE
//Esta funcion es para ejemplificar como funciona el Virtual DOM de React para hacer cambios sin refrescar toda la página.
setTimeout(
() => {
ReactDOM.render(
<Hola name='Mundo con React' />,
document.getElementById('app')
);
},
1000
);
</script>
</body>
</html>
以上是关于html Este es un ejerciciodecómoconsitirun componente con React usando funciones。的主要内容，如果未能解决你的问题，请参考以下文章