Para crear un proyecto con ReactJS y NodeJS, debemos seguir los siguientes pasos:
NODE JS
Para iniciar un proyecto con NodeJS vamos a la carpeta que creamos para el proyecto y por consola digitamos lo siguiente:
npm init
Diligenciamos todas las opciones que se nos muestra en la interfaz. Al finalizar se debe crear un archivo llamado
package.json el cual tiene toda la configuración del aplicativo.
REACT JS
React no es un framework como Angular, es únicamente una
librería
(como podía ser jQuery, o Polymer) diseñada únicamente para la interfaz
gráfica. Puedes combinarla con cualquier framework o utilizar Vanilla
JavaScript. React js es muy usado para hacer la V(View) en MVC tal cual se recomienda en su guía oficial, el uso de estándar CommonJS, para ello puedes usar Browserify o Webpack.
Instalamor primero
Express:
npm install --save express
Instalamos el WebPack que es lo que nos ayuda a que no tengamos que agregar manualmente la referencia de los archivos
js en cualquier archivo. Vamos al directorio donde tenemos nuestros directorios de
js, css, img. En mi caso lo tengo en la carpeta
SRC:
npm install webpack --save
eLuego creamos el archivo
webpack.config.js donde vamos a configurar todo lo que lleva dicho archivo:
module.exports = {
entry: "./src/test.js",
output: {
path: __dirname + "/src",
filename: "bundle.js" },
module:{
loaders: [
{
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
watch: true}
Instalar:
npm install --save react react-dom
npm install --save redux react-redux
npm install --save babel-loader babel-core
npm install --save babel-preset-es2015 babel-preset-react
Para ejecutar el servidor solo necesitamos ejecutar el siguiente comando:
npm run webpack
Estructura del directorio del proyecto
tutorial React JS
¿QUE ES JSX?
JSX es una extensión de JavaScript creada por
Facebook para el uso con su librería React. Sirve de preprocesador (como
Sass o Stylus a CSS) y transforma el código a JavaScript. ... Recuerda,
no es escribir HTML dentro de JS, es una forma de crear JS de una
manera más práctica ;)
Flux
Facebook por su parte diseñó Flux, una arquitectura para crear aplicaciones web con React, pero sin usar ningún Framework, únicamente JavaScript puro sin añadidos.
El patrón de diseño que nos proporciona React es componetizar nuestras aplicaciones (No es lo mismo que webcomponents).
No pienses en un MVC completo para la aplicación.
Piensa en pequeños átomos (componentes) que conforman la materia (aplicación completa). Cada átomo tiene sus propiedades y estados.
Es una definición un poco complicada de digerir al principio, pero una vez que la conoces, no quieres desarrollar de otra manera :D
