├── .gitignore ├── README.md ├── app └── App.js ├── index.html ├── package.json ├── public └── resources │ └── css │ └── styles.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aplicaciones reactivas con React, NodeJS & MongoDB 2 | 3 | [![Join the chat at https://gitter.im/Reactive-community/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link](https://camo.githubusercontent.com/405722eb674b9118f98b047f3332b3eecc1dd472/68747470733a2f2f6261646765732e6769747465722e696d2f65736375656c616469676974616c2f4544677269642e737667)](https://gitter.im/Reactive-community/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 4 | 5 | ![Snapshot](https://reactiveprogramming.io/img/banner-portada.PNG) 6 | 7 | 8 | Este es el repositorio oficial del libro Aplicaciones Reactivas con React, NodeJS & MongoDB. 9 | 10 | Puedes encontrar el libro en: https://reactiveprogramming.io 11 | 12 | Autor: Oscar Blancarte (http://oscarblancarteblog.com) 13 | 14 | 15 | ## Reseña del libro 16 | 17 | Este es el libro más completo para aprender a desarrollar páginas web modernas, utilizando el Stack MERN, en el cual aprenderemos a utilizar React + NodeJS con Express + MongoDB y aderezaremos todo esto con Redux, uno de los módulos más populares y avanzados para el desarrollo de aplicaciones Web profesionales. Finalmente aprenderemos a crear un API REST completo con NodeJS y utilizando el Estándar de Autenticación JSON Web Tokens. 18 | 19 | ## Demo (Proyecto Mini Twitter) 20 | 21 | Puedes acceder al proyecto mini twitter desde la siguiente URL: [Demo](http://minitwitter.reactiveprogramming.io:) 22 | 23 | 24 | ## Índice 25 | 26 | 27 | ### Capítulo 1: Por dónde empezar 28 | * Sin código fuente 29 | 30 | ### Capítulo 2: reparando el ambiente de desarrollo 31 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-02-Preparando_ambiente_desarrollo) 32 | 33 | ### Capítulo 3: Introducción al desarrollo con React 34 | * Sin código fuente 35 | 36 | ### Capítulo 4: Introducción a los Componentes 37 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-04-Introduccion-a-los-componentes) 38 | 39 | ### Capítulo 5: Introducción al proyecto Mini Twitter 40 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-05-Introduccion-proyecto-minitwitter) 41 | 42 | ### Capítulo 6: Introducción al Shadow DOM y los Estados 43 | * Sin código fuente 44 | 45 | ### Capítulo 7: Trabajando con Formularios 46 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-07-Formularios) 47 | 48 | ### Capítulo 8: Ciclo de vida de los componentes 49 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-08-Ciclo-vida-componentes) 50 | 51 | ### Capítulo 9: React Routing 52 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-09-Router) 53 | 54 | ### Capítulo 10: Interfaces interactivas 55 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-10-Interfaces_interactivas) 56 | 57 | ### Capítulo 11: Componentes modales 58 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-11-Componentes_modales) 59 | 60 | ### Capítulo 12: Redux 61 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-12-Redux) 62 | 63 | ### Capítulo 13: Introducción a NodeJS 64 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-13-Introduccion_a_NodeJS) 65 | 66 | ### Capítulo 14: Introducción a MongoDB 67 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-14-Introduccion_a_mongodb) 68 | 69 | ### Capítulo 15: Desarrollo de API REST con NodeJS 70 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-15-Desarrollo_de_API_REST_con_NodeJS) 71 | 72 | ### Capítulo 16: Producción 73 | * [Código fuente](https://github.com/oscarjb1/books-reactiveprogramming/tree/Capitulo-16-Produccion) 74 | -------------------------------------------------------------------------------- /app/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | class App extends React.Component{ 5 | 6 | render(){ 7 | return( 8 |

Hello World

9 | ) 10 | } 11 | } 12 | render(, document.getElementById('root')); 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mini Twitter 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "twitter-app", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "description": "Aplicación de redes sociales", 6 | "scripts": { 7 | "start": "node_modules/.bin/webpack-dev-server --progress" 8 | }, 9 | "author": "Oscar Blancarte", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^1.12.*", 13 | "webpack-dev-server": "^1.10.*", 14 | "babel-preset-react": "^6.24.1" 15 | }, 16 | "dependencies": { 17 | "react": "^15.0.0", 18 | "react-dom": "^15.0.0", 19 | "babel-core": "^6.24.1", 20 | "babel-loader": "^7.0.0", 21 | "babel-preset-es2015": "^6.24.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /public/resources/css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #F5F8FA; 3 | } 4 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: [ 3 | __dirname + "/app/App.js", 4 | ], 5 | output: { 6 | path: __dirname + "/public", 7 | filename: "bundle.js", 8 | publicPath: "/public" 9 | }, 10 | 11 | module: { 12 | loaders: [{ 13 | test: /\.jsx?$/, 14 | exclude: /node_modules/, 15 | loader: 'babel', 16 | query:{ 17 | presets: ['es2015','react'] 18 | } 19 | }] 20 | } 21 | }; 22 | --------------------------------------------------------------------------------