Crea tu primer Hola Mundo en React JS

2 minuto(s)

Demo Github

Vamos a mostrar un Hola Mundo como inicio a tus primeros pasos con React JS, logrando esto podrás poco a poco ir creando aplicaciones más complejas, las lineas de código que hagas las podras reutilizar cada ves que sea necesario.

Para poder trabajar con React JS necesitas tener conocimientos de Javascript, te recomendamos tomar un curso para que no compliques al trabajar con React JS, potente librería Javascript de Facebook.

Para que no se te haga mas sencillo vamos a dividir la aplicación en 2 secciones, primer la vista y segundo el Javascript de React JS.

Requerimientos

Antes de continuar con el tutorial debes considerar lo siguiente:

En este tutorial usaremos el compilador Babel JS que nos convierte nuestro código React JS a Ecma Script, asi valoramos las buenas prácticas en Javascript.
Debes tener instalado Node JS en tu Sistema Operativo.
Tener conocimientos de Javascript.

Con ello podemos dar paso al tutorial.

Para tener los archivos de nuestro proyecto crearemos una carpeta llamada /src en donde colocaremos (index.html, index.js, archivos JS y CSS) que son los archivos de nuestra aplicación.

La Vista

Como necesitaremos visualizar el Hola Mundo, vamos a crear una vista llamada index.html con Bootstrap, vamos a instanciar los archivos necesarios para trabajar con React JS, los colocamos antes de cerrar la etiqueta </head> de nuestro HTML.


<!-- React JS -->   
<script crossorigin src="src/js/react.production.min.js"></script>
<script crossorigin src="src/js/react-dom.production.min.js"></script>

En nuestra vista añadiremos una capa con el id root, en esta capa mostraremos el Hola Mundo.


<div class="col-md-12" id="root">
   <!-- Acá mostraremos el Hola Mundo -->
</div>

</div>

React JS

voy a crear un archivo llamado index.js y agregare lo siguiente


ReactDOM.render(
  <h1>Hola, Mundo!</h1>,
  document.getElementById('root')
);

ReactDOM.render(

<h1>Hola, Mundo!</h1>,

document.getElementById('root')

);

En el código anterior iniciamos con ReactDOM la manipulación del DOM en donde renderizaremos el texto Hola, Mundo! con formato <h1> y por último le decimos que lo muestre en la capa con id root que creamos en nuestra vista HTML.

Por último

Vamos a compilar lo que hemos creado ejecutando el comando


npm run build

npm run build

Se creará una carpeta llamada /dist en donde estara un archivo index.html y el archivo main.js

Si los estilos CSS y demás archivos no te aparecen, simplemente copia y pegalos dentro de la carpeta creada /dist

Si deseas verlo en tu navegador ejecuta:


npm start

npm start

Esperamos que entiendas lo sencillo que es crear aplicaciones One Page con React JS.

Siguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

React JS
18-06-2018
02-07-2018
Crear un Post - Eventos Devs - Foro