Hola Mundo React JS
hola a todos hoy comento una forma de hacer hola mundo con react js, bueno empezemos ojo que solo estoy usando GNU/Linux cualquire distribucion tambien sirve para macOs y windows.
por si acaso deben de tener pre instalado lo que es nodejs.
bueno ahora empezamos.
primero create una carpeta con cualquier nombre ejemplo:
mkdir react-holamundo
ahora accedemos a la carpeta creada por nosotros
cd react-holamundo
bueno una vez dentro ejecutamos los siguientes comandos
este comando generara una carpeta con todas las dependencias de node_modules bueno en si creara esa carpeta con el nombre que ya menciones node_modules.
npm install --save react react-dom babelify babel-preset-react
y este paquete de browserify nos servira para obtener librerias cuando unos las nesecite.
npm install browserify
este otro comando con el mismo nombre de paquete pero que agregamos con el -g es para que globalmente este disponible en cualquiere proyecto y asi no tengamos que hacer refencia independiente.
npm install -g browserify
bueno ahora ya que estas dentro de la carpeta de react-holamundo, verifica que la carpeta de node_modules este creada, una vez hecho esto crea un archivo con el nombre de main.js
touch main.js
dentro de este archivo ingresa el siguinte codigo
var React= require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>! Hola mundo</h1>,
document.getElementById('mensaje')
);
por si acaso aca esta la definicion de que es:
Browserify es una herramienta open source que nos permite crear módulos en el cliente, utilizando la misma sintaxis que en Node.
tamben para que sirve:
babelify para convertirlos a la especificación ES5 entendida por todos los motores de JavaScript.
bueno una vez escrito estas lineas de codigo dentro de main.js ahora en la terminal de tu sistema operativo ejecuta el siguiente comando.
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
bueno ahora ya que ejecutaste este comando puede que tengas un error como este :
module.js:557
throw err;
Error: Cannot find module 'babel-core'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/srv/http/scesi-website/node_modules/babelify/index.js:2:14)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
bueno solo para a los que haya salido este error deben de instalar las siguientes dependencias y con estas instaladas podras resolver el problema.
npm install babel-core babel-loader --save-dev
y bueno volvemos a ejecutar el siguiente comando
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
el -o bundle lo explico el -o = output y bundle.js es el nombre del archivo de salida donde estara el codigo java script.
bueno ahora lo que hacemos es crear un archivo index.html.
touch index.html
y dentro de este archivo ingresamos el siguiente codigo HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>react js</title>
</head>
<body>
<div id="mensaje"></div>
<script src="bundle.js"></script>
</body>
</html>
vemos que creamos una etiqueta <div id="mensaje"> y con esto recordamos que en el archivo main.js usamos getElementById('mensaje') entonces lo que hace el archivo index.html hace referencia llamando al id="mensaje"
y la etiqueta <script src=bundle.js> hace referencia al archivo generado por browserify y bueno si tienes un servidor http (web) pues solo ingresas desde tu navegador o si no desde tu archivo abres directamente con un navegador y asi veras tu primer hola mundo con reactjs.
Comentarios: