Instalacion de react js con todo lo nesesario

hola a todos debemos de tener en cuenta que tenemos que instalar las siguientes dependencias que son nodejs y npm entonces para esto haremos la instalacion para lo que es una maquina con ArchLinux pero que tambien pondremos lo comandos de instalacion para Ubuntu, Debian.

los comando para realizar la instalacion en ubuntu o distribuciones basadas en Debian son:

$ sudo apt-get install nodejs npm

Hay dos librerías que se utilizan con React para crear el bundle de nuestra aplicación, hacer live reload y mucho más una es browserify y la otra es Webpack, yo prefiero Webpack y por eso indico como se instala aquí, si prefieres browserify instala ese.

Para instalar Webpack simplemente ejecutamos:

$ npm install webpack -g

También necesitaremos el Webpack-dev-server para instalarlo ejecutamos:

$ npm install webpack-dev-server -g

Esto instalará el paquete de webpack y webpack-dev-server de manera global.

Instalar Babel

En nuestros ejemplos vamos a estar utilizando ES6 (o ES2015 como prefieras llamarlo) y para esto necesitamos Babel que “transpila” o transforma el código ES6 a la versión anterior para que sea entendido por todos los navegadores, sin tener que preocuparnos de nada.

Para instalarlo ejecuta:

$ npm install babel -g

Empezando un proyecto

Listo todas esas son las herramientas que necesitamos, ahora veremos como configurar un proyecto de ejemplo con estas herramientas.

En este ejemplo vamos a hacer un simple botón que al presionarlo nos muestre un número aleatorio.

Creamos un directorio que yo voy a llamar web-react

$ mkdir web-react

luego accedo a esa carpeta a la que yo eh creado

$ cd web-react

una vez dentro ejecutamos lo siguiente:

$ npm init

Presionamos Enter para seleccionar todas las opciones por defecto, después lo podremos cambiar en el archivo package.js.

Esto inicializará nuestro proyecto con un archivo package.js.

Ahora tenemos que instalar react y react-dom ejecutando:

$ npm install react react-dom --save

Eso lo instalará y lo guardará en nuestras dependencias.

Para que no tengamos errores en la instalación debemos declarar webpack y webpack-dev-server en nuestras dependencias para eso ejecutamos:

$ npm install webpack webpack-dev-server --save-dev

Ahora instalaremos algunos preset de Babel:

$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Nota: Recuerda que debes tener instalado babel, webpack y webpack-dev-server como lo indicamos en los pasos anteriores.

Ahora vamos a empezar a crear nuestra aplicación.

Primero creamos un archivo llamado webpack.config.js en tu editor favorito, este archivo es donde indicaremos como se compilará nuestro proyecto y donde se hará la transformación de JSX a Javascript, en este archivo colocamos lo siguiente:

Ahora bueno podemos usar lo siguiente tambien Create React App se puede utilizar con el nuevo gestor de dependencias Yarn, creado también por la gente de Facebook, o con el clásico NPM. En el artículo haré uso de NPM, aunque te aconsejo que le des una oportunidad a Yarn, tiene muy buena pinta.

El único requisito imprescindible para poder hacer uso de Create React App con NPM es tener instalado en el sistema una versión de NodeJs >= 4. Si ya dispones de npm puedes instalar create react app como cualquier otro paquete:

$ npm install -g create-react-app

Una vez instalado puedes inicializar el proyecto:

$ create-react-app react-app

Con este simple gesto tendrás configurado JavaScript ES6 con React, Webpack, Babel y Eslint, nada de instalar dependencias, ni de crear tareas. Está todo listo para ejecutar el servidor de desarrollo, y probar la aplicación:

$ cd react-app
$ npm start

Con el servidor corriendo, dirígete a la url 127.0.0.1:3000 para ver la aplicación en funcionamiento: