react primeros pasos

es una libreria de javascript creada por facebook
se centra en la parte de UI, es la V de MVC.

del lado del servidor vamos a usar node.js. Node.js es un entorno Javascript del lado del servidor, basado en eventos.
asi que hay que instalarlo.

para probar que se instalo correctamente abrimos una consola, y ejecutamos

node -v

para que nos muestre la version instalada,
para probar que funciona correctamente ejecutamos

node
esto nos abrira la linea de comandos node, donde podemos escribir codigo javacript, como el sigt:

c:\xampp\htdocs>node
> var x="esta es una prueba";console.log(x+" satisfactoria");
esta es una prueba satisfactoria
undefined
>


creamos una carpeta para nuestro proyecto "react_1" nos situamos dentro de esa carpeta y ejecutamos el sgt comando
nmp init
que creara el archivo package.json con informacion del proyecto


vamos a usar webpack para empaquetar en un solo archivo js todos los js(pueden ser de otros tipos tambien) en uno solo.


npm install -s webpack

luego para poder usar el comando webpack debemos instalarlo de forma global asi

npm install -g webpack

crearemos una carpeta app y dentro una llamada dist
dentro los sgts archivos: index.js , modulo1.js y modulo2.js

a modo de ejemplo modulo1.js tendra como contenido esta unica linea de codigo

 console.log("modulo 1");

y modulo2.js

console.log("modulo 2");

y en index.js requeriremos de ambos, asi que su contenido sera:

require("./modulo1.js");

require("./modulo2.js");

crearemos un archivo dentro de la carpeta raiz de nuestro proyecto llamado webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./app/dist/index.js",
  output: {
    path: __dirname + "/app/js",
    filename: "index.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};


luego
desde la consola ejecutaremos el comando webpack el cual creara la carpeta app/js y dentro el archivo index.min.js como se indica en nuestro archivo webpack.config.js

JSX
react nos ofrece el pseudolenguaje llamado JSX que facilita el desarrollo de aplicaciones web con su sintaxis para crear elementos en el DOM.
Como ReactJS se enfoca en la visualización literalmente debemos armar el HTML que deseamos en JSX, con el fin de describir nuestros componentes por medio de etiquetas y de una sintaxis muy parecida a la de HTML, que es compilada a Javascript.