Hola mundo – ReactJS

Fuente: https://es.reactjs.org/tutorial/tutorial.html

Ejercicio 1. Hola mundo en https://codepen.io/

  • Ingresar a https://codepen.io/
  • Crear un Pen

Agregar el siguiente código a la sección de HTML

<div id="root">
    <!-- Este contenido será sustituída por su componente. -->
</div>

Configurar la sección de JavaScript

JavaScript Preprocessor

Babel

Javascript

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js

Código de la sección de CSS

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

Código de la sección de JS

class HolaMundo extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola Mundo ReactJS!</h1>
      </div>
    );
  }
}
ReactDOM.render(
  <HolaMundo />,
  document.getElementById('root')
);

Ejemplo