Hola Mundo con React

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

Clase anteriorSiguiente clase

Resumen

Recuerda:

CDN, es un servidor donde podemos almacenar archivos que se replicaran al rededor del mundo para que sea rápida la carga.
Es importante agregar dos librerías, React y React DOM
React permite crear componentes y React DOM permite usar componentes en una aplicación web.
Los props son los datos que le pasamos al componente al momento de inicializarlo.

Edwin Torres

student•

Pasos para crear Hola Mundo con Reactjs

Crear index.html en editor de texto (Atom)
Descargar las librerías de React de

react (copy script tag) // Para crear componentes
react-dom (copy script tag) // Para usar los componentes

Pegarlas en el <body>
Crear script con function Hola(props), donde props es un objeto que hace referencia a los datos que queremos pasarle al componente al momento de inicializar la app. Además creamos una const name = props.name; como un dato nombre. Luego se crea lo que queremos y cómo queremos que se visualice, en este caso se usa un tag <h1>
return React.DOM.h1({
id: ‘Title’, // un identificador de nuestro tag h1
}, Hola ${name}); // se visualizará como un h1 Hola nombre ojo q no son comillas simples sino tildes
Instanciar el componente de React usando React.createElement
cost hola = React.createElement(Hola, {
name: ‘Platzi’,
});
Mostrarle en la UI con ReactDOM con el método render
ReactDOM.render(
hola,
document.getElementByID(‘app’)
)
Ahora después del body antes de los scripts crear el elemento id app entre un tag <main>

Jhon Fredy Beltrán León

student•

props = datos que queremos pasarle al componente

jeisson Andrade

student•

Ernesto Jiménez Villaseñor

student•

Arrow Functions (4:19)

(param1, param2, paramN) => { statements } 
(param1, param2, paramN) => expression 
// Equivalente a: () => { return expression; } 

// Los paréntesis son opcionales cuando sólo dispone de un argumento: singleParam => { statements } 
singleParam => expression 

// Una función sin argumentos requiere paréntesis: 
() => { statements }

https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions

Sergio Zapata Donado

student•

Me parece que el curso ya necesita una actualización. Para aquellos que están algo perdidos les dejo por acá como se hace un “Hola mundo” para la fecha en la que subo este comentario!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

Diego Forero

Team Platzi•

Ya estamos trabajando en la renovación del curso con React 16 😃

Eduardo Treviño Cárdenas

student•

Uncaught SyntaxError: Identifier ‘hola’ has already been declared
saben algo sobre el error?

Sergio Daniel Xalambrí

student•

hola es una constante no? las constantes no se pueden volver a definir, no podés hacer esto:

const hola = 'hola';
hola = 'hola!';

Eso da error en la segunda línea porque no se puede cambiar el valor de hola.

Eduardo Treviño Cárdenas

student•

listo, mi error fue poner en todos los “Hola” con la “H” en mayus. gracias, un saludo.

Jon Caicedo

student•

cdn servidor de archivos que se puede descargar para hacer mucho mas rápida la carga,

dom para utilizar componentes en una aplicacion web.

props son datos que se quieren mostrar en un componente devuelva ux

Carlos Eduardo Silva Aguilar

student•

recordar que para que el ${name} funcione debemos usar un template string osea que en lugar de usar " " o ’ ’ debemos usar para delimitar nuestro string. de lo contrario solo se vera " hola ${name} " en la pantalla

Johan Guzman Gil

student•

No encuentro react-dom ya no se usa o cambio de nombre ?

Sergio Daniel Xalambrí

student•

En cdnjs está junto a React https://cdnjs.com/libraries/react

Benjamín Peña Olvera

student•

Código más fácil de leer? O.o

Fausto David Sanchez Salazar

student•

No me renderiza la variable con mi nombre ejemplo “Hola David”, solo me muestra Hola ${name} y no muestra error en consola, a que se debe

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Hola mundo</title>
  </head>
  <body>
    <main id="app"></main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
    <script>
      function Hola(props){
        const name = props.name;

        return React.DOM.h1({
          id: 'Title',
        }, 'Hola ${name}');
      }

      const hola = React.createElement(Hola, {
        name: 'David',
      });

      ReactDOM.render(
        hola,
        document.getElementById('app')
      );
    </script>
  </body>
</html>

Sergio Daniel Xalambrí

student•

'Hola ${name}'

Estás usando un string normal en vez de usar un template string. La diferencia es que un string lo definís con ' o " mientras que los template strings usas `. Cuando usas un string normal no sirve de nada hacer ${name} ya que se va a mostrar tal cual, tiene que ser un template string para que se coloque el valor de la variable name.

Fausto David Sanchez Salazar

student•

Muchísimas gracias por el tip, ya funciona bien, y no habia notado ese detalle, en verdad muchas gracias!!!

Froylán Eloy Hernández Castro

student•

¿Alguien sabe porqué aparece el siguiente warning en la consola del navegador?

Warning: Accessing factories like React.DOM.h1 has been deprecated and will be removed in v16.0+. Use the react-dom-factories package instead.  Version 1.0 provides a drop-in replacement. For more info, see https://fb.me/react-dom-factories

Sergio Daniel Xalambrí

student•

En la última versión de React se decidió que los métodos como React.DOM.h1 se van a eliminar de la librería principal de React y se van a mover a otro módulo llamado react-dom-factories. Por ahora funciona, pero en la v16 va a dejar de funcionar.

Juan Diego Silva Garcia

student•

Sergio entiendo, significa que la la V16 hay que realizar el método React.DOM.h1de otra forma o como se debería hacer para eliminar el mensaje de advertencia?

Juan C Felizzola

student•

Con el cdn de React actualizado no funciona tal cual está en el vídeo

Diego Forero

Team Platzi•

React cambio mucho de su API en la versión 16 que fue lanzada hace un par de días, ya estamos trabajando en la actualización del curso.

Juan C Felizzola

student•

Me gustaría la actualización pronto. Estaré esperando

Óscar Pinto Salazar

student•

Pesimo explicando

Nelson Andres Jaramillo Diaz

student•

Hola agluien me puede decir por que si yo sigo el mismo código de este video me saca el siguiente error: “Uncaught ReferenceError: ReactDOM is not defined”

<body>
    <main id="app"></main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <scrip src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></scrip>
    <script>
        function Hola(props) {
            const name = props.name

            return React.DOM.h1({
                id: 'titulo'
            }, 'hola ${name}')
        }

        const hola = React.createElement(Hola, {
            name: 'Andres'
        })

        ReactDOM.render(
            hola,
            document.getElementById('app')
        )
    </script>
</body>```

Diego Forero

Team Platzi•

Hola creo que el error esta en esta parte

return React.DOM.h1({
                id: 'titulo'
            }, 'hola ${name}')

Estas usando template literals que usan la comilla invertida ` o back-tick y no comillas sencillas, debe quedar así:

return React.DOM.h1({
                id: 'titulo'
            }, `hola ${name}`)

Christian Michelle Torres Martínez

student•

Pésimo explicando, espero en los siguientes videos mejore si no a buscar un curso de react en otro lado.

Juan

student•

q es instanciar?

Diego Forero

Team Platzi•

En programación orientada a objetos cuando creas un nuevo objeto de una clase estas intanciando o creando una instancia de la clase, por ejemplo en:

var hola = React.createElement(...)

hola es una instancia de React

Francisco Manuel Velásquez Escobar

student•

Explicación de ECMAScript6 también por Sergio https://platzi.com/clases/comunidad-platzi/concepto/frontend/ecmascript-6/material/

Augusto Gonzalez

student•

Alguien sabrá exactamente cuales plugins tendrá instalado en atom? Ok veo que tiene emmet, que tiene file icons. Y el theme es muy parecido al que viene por defecto. Muchas gracias.

Sergio Daniel Xalambrí

student•

Tengo instalados estos:

Y el tema que utilizo es Nucleous Dark y coloreado de sintaxis es Monokai Seti.

Augusto Gonzalez

student•

Excelente! Ya ando bajandome los plugins que me falta. Muchísimas gracias!

Adrián Natividad Hernandez León

student•

Hola que tal!, es lo mismo usar const que let?

Diego Forero

Team Platzi•

Hola, la respuesta corta es NO.

const se usan para definir variables que no van a cambiar su valor durante la ejecución del programa, se almacenan funciones ya que la función no cambia, cambia los parámetros que recibe pero la función como tal no.

let se usa para definir variable que van a cambiar su valor, por ejemplo acumuladores o cualquier variable que necesites modificar durante la ejecución del programa.

Hola Mundo con React

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