ReactJS- Express - NodeJS

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

fuente