React

React (también llamada React.js o ReactJS) es una biblioteca Javascript de código abierto para crear interfaces de usuario con el objetivo de animar al desarrollo de aplicaciones en una sola página. Es mantenido por Facebook, Instagram y una comunidad de desarrolladores independientes y compañías. - Wikipedia

React: A JavaScript library for building user interfaces - React

We built React to solve one problem: building large applications with data that changes over time. - Why React?

React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time. React isn't an MVC framework. React doesn't use templates. - Why did we build React?

Conocimientos previos

HTML5
CSS3
ECMAScript 5
- DOM
- XMLHttpRequest

Inicio

La documentación oficial por parte de React ya hace uso de ECMAScript 6 por lo que en lo siguiente se hará uso de Babel (archivo browser.min.js en index.html) mediante https://cdnjs.com/libraries/babel-core.

Descarga el Starter Kit de React: archivo react-*.zip.

Nota: la versión usada en este documento es 0.15.1, por lo que el archivo descargado ha sido react-0.15.1.zip.

Crea el proyecto (directorio) $HOME/www/react01 con la siguiente estructura:

 alumno@servidor:~ $ mkdir -p $HOME/www/react01
 alumno@servidor:~/www/react01 $ mkdir -p css js/lib/react
 alumno@servidor:~/www/react01 $ pwd && tree
 /home/alumno/www/react01
 .
 ├── css
 └── js
     └── lib
         └── react

 4 directories, 0 files

Dentro del archivo react-0.15.1.zip encontrarás el directorio react-0.15.1/build/, descomprime su contenido en el directorio js/lib/react, obteniendo la siguiente estructura:

 alumno@servidor:~/www/react01 $ pwd && tree
 /home/alumno/www/react01
 .
 ├── css
 └── js
     └── lib
         └── react
             ├── react-dom.js
             ├── react-dom.min.js
             ├── react-dom-server.js
             ├── react-dom-server.min.js
             ├── react.js
             ├── react.min.js
             ├── react-with-addons.js
             └── react-with-addons.min.js

 4 directories, 8 files

Descarga a Babel (archivo browser.min.js) dentro del directorio js/lib/babel-core.

Nota: la versión a usar de Babel es la 5.8.34 (aún cuando existe una versión más actual, 6.x) y se encuentra en https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js.

 alumno@servidor:~/www/react01 $ mkdir -p js/lib/babel-core
 alumno@servidor:~/www/react01 $ wget https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js -P js/lib/babel-core
 alumno@servidor:~/www/react01 $ pwd && tree
 /home/alumno/www/react01
 .
 ├── css
 └── js
     └── lib
         ├── babel-core
         │   └── browser.min.js
         └── react
             ├── react-dom.js
             ├── react-dom.min.js
             ├── react-dom-server.js
             ├── react-dom-server.min.js
             ├── react.js
             ├── react.min.js
             ├── react-with-addons.js
             └── react-with-addons.min.js

 5 directories, 9 files

Observación: los únicos archivos que nos serán útiles son react.min.js y react-dom.min.js por lo que los demás puedes borrarlos.

Crea el archivo index.html con el siguiente contenido:

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>react01</title>
   </head>
   <body>
     <div id="panel"></div>
     <script src="js/lib/react/react.min.js"></script>
     <script src="js/lib/react/react-dom.min.js"></script>
     <script src="js/lib/babel-core/browser.min.js"></script>
     <script type="text/babel" src="js/app.js"></script>
   </body>
 </html>

Crea el archivo js/app.js con el siguiente contenido:

 var Saludo = React.createClass({
   render: function() {
     return (
       <h1>¡Hola mundo!</h1>
     );
   }
 });

 ReactDOM.render(
   <Saludo />,
   document.getElementById('panel')
 );

En este momento el proyecto tendrá la siguiente estructura:

 alumno@servidor:~/www/react01 $ pwd && tree
 /home/alumno/www/react01
 .
 ├── css
 ├── index.html
 └── js
     ├── app.js
     └── lib
         ├── babel-core
         │   └── browser.min.js
         └── react
             ├── react-dom.js
             ├── react-dom.min.js
             ├── react-dom-server.js
             ├── react-dom-server.min.js
             ├── react.js
             ├── react.min.js
             ├── react-with-addons.js
             └── react-with-addons.min.js

 5 directories, 11 files

Inicia el servidor web thttpd:

 alumno@servidor:~/www/react01 $ thttpd -D -p 8080 -nor -l -

Accede a http://127.0.0.1:8080 con Firefox, teniendo activado a Firebug y verifica en la pestaña de Red/Network que no se presente algún error.

React

Conocimientos previos

Inicio

PENDIENTE

Properties o Props

npm

Webpack - Browserify

react-router

Flux / Redux

Immutable.js

etc

Objetivo Final

Enlaces