Iniciar un servidor de render básico - Render en Server

Clase 18 de 58 • Curso Profesional de React con Redux 2016

Resumen

Recuerda:

renderToString, renderiza la aplicación a un string con el HTML
Node aun no soporta nativamente la sintaxis de modulos de ES2015

Michel Daniel Betancourt Gil

student•

Aquí comparto un repo que hago en git mientras avanzo en el tuto donde pueden seguir el curso moviéndose entre los commit

camilo andres reina cifuentes

student•

para produccion es mejor usar la version LTS de node? y usar babel

Sergio Daniel Xalambrí

student•

Si, aunque igual la versión LTS ya soporta muchas cosas, si usas la v8 (futura LTS) ya sólo tendrías que usar Babel para los módulos y para JSX.

Dante Jauregui Yallico Jauregui Yallico

student•

Hola Sergio, en un primer momento al estar usando server rendering para renderizar React y despues en otros videos haces Browser Rendering, ¿se podria decir que estas haciendo UNIVERSAL REACT?

o en caso no sea, asi… que faltaria para hacer Universal React? 😃

Sergio Daniel Xalambrí

student•

Sí, estamos usando React y React Router tanto en frontend como en backend para hacer una aplicación universal.

Markoz Peña Mendez

student•

**Hola Sergio 😃 ** oye ¿que diferencia ahí entre usar este método

const html = renderToString(<h1>Hola Sergio</h1>);

al que enseñas en el video ?

Yo me siento mas comodo usando el de sintaxis JSX

Sergio Daniel Xalambrí

student•

La diferencia es que necesitas usar Babel para soportar JSX, igual más adelante usamos Webpack y Babel en el servidor de render para soportar JSX.

Alejandro Hierro Dori

student•

No me queda claro cual es la necesidad de hacer render en el servidor, que ventajas y desventajas tiene sobre hacer render en el navegador, ¿por otro lado la decisión de si hacer server render no influye a la hora de escalar en el servidor, es decir en la cantidad de usuarios concurrentes que va a aguantar la aplicación?

David Toca

student•

si rendereas muchos componentes, es posible que tengas que hacer esperar algunos segundos antes de poder visualizar tu pagina web, esto impacta negativamente en la experiencia de usuario. Hacer server render no tiene un gran impacto en la escalabilidad, no es un proceso pesado de procesamiento, asi que no es muy diferente de los sistemas de templates de los frameworks actuales, aunque siempre esta la opcion de usar cache

Markoz Peña Mendez

student•

Que segnifica ¿ { renderToString } from ‘react-dom/server’; ?

¿importa funcion en especifico?

Sergio Daniel Xalambrí

student•

Así eso, react-dom/server exporta un objeto con varios métodos, al usar import { renderToString } from 'react-dom/server'; podemos importar solo renderToString, si no tendríamos que usar import ReactDOMServer from 'react-dom/server'; y luego ReactDOMServer.renderToString.

Markoz Peña Mendez

student•

Gracias 😄

Carlos Morales

student•

Refusing to install react as a dependency of itself, me sale este error

Carlos Morales

student•

Olvidalo

Sergio Daniel Xalambrí

student•

El error ese sale cuando la carpeta tiene el mismo nombre que la dependencia a instalar.

Juan Carlos Correa Herrera

student•

¿Por qué no usar const react= require(‘react’) y así con las demás dependencias?

Sergio Daniel Xalambrí

student•

import es la forma estándar en JS de importar módulos, require es un invento de Node.js, lo mejor es usar la forma estándar.

Juan Carlos Correa Herrera

student•

Ah oks! gracias 😃

Alexander Silvera

student•

Al comenzar el proyecto me salieron estos errores en NPM:

C:\Users\Acer\Desktop\Curso-React>npm i -S react react-dom
npm ERR! Windows_NT 10.0.15063
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “i” “-S” “react” "react-dom"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10

npm ERR! shasum check failed for C:\Users\Acer\AppData\Local\Temp\npm-1824-3a515847\react-dom-\react-dom-15.6.1.tgz
npm ERR! Expected: 2cb0ed4191038e53c209eb3a79a23e2a4cf99470
npm ERR! Actual: 6ce2381e7c0fa7c7fbae86646fcecf6cc5a8d8fb
npm ERR! From:
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Acer\Desktop\Curso-React\npm-debug.log

Alguien puede darme una ayuda??

Diego Forero

Team Platzi•

Acabo de probar el comando y me funciono, al parecer estaban actualizando la librería y no estaba actualizado el shasum (es un string que ayuda a verificar que bajes el archivo que es y no una copia modificada), intenta de nuevo y nos cuentas como te va.

Alexander Silvera

student•

listo gracias

Juan

student•

que es un function requestHandler(request, response)? alguien me lo dice porfa

Juan Diego Silva Garcia

student•

Es la función para el manejo de las peticiones http al servidor y se le pasan las propiedades request, que es una solicitud, por ejemplo, el nombre de usuario y el el response que es la respuesta del servidor a esa solicitud, por ejemplo un error 404 o un 200 si la solicitud fue procesada completamente.

Iniciar un servidor de render básico - Render en Server

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS