Cómo definir una vista con ReactJS

Clase 14 de 33 • Curso Profesional de React.js 2017

Clase anteriorSiguiente clase

Abdón Rodríguez

student•

Creo que en el ejemplo se te ha pasado usar la función map(), César. :)

Cesar Anton

student•

Voy a revisar la copia el código del ejemplo, la versión en el repositorio esta siempre probada.

https://github.com/reicek/ReactJS-SimpleListFilter

Jhonatan Serna Murillo Serna

student•

Hola, también falta hacer el vinculo entre SimpleList y SimpleListRow, es decir, en la función render de SimpleList hacer el llamado a SimpleListRow

Cesar Anton

student•

Puedes ver la serie completo de artículos de ReactJS:
https://platzi.com/blog/?s=ReactJS

Fabian Allel Gallardo

student•

Para los que quisieron hacerlo con ES6 es importante destacar que todo el getInitialState se reemplaza por esto:

            constructor(props) {  
                super(props);  
                this.state = {simpleList: [  
                {  
                    row: 'cargando    ...'  
                }  
            ]};  
            }

Sino no funciona si no hacemos un init state.

Cesar Anton

student•

¡Muy buena! Creo vale actualizar este artículo.

Te invito a revisar la serie completa:
https://platzi.com/blog/?s=ReactJS

Raul Quispe Mendez

student•

Me confundiste al principio cuando dices : "Cuando estamos iniciando con una aplicación en ReactJS, debemos recordar que este es un lenguaje diseñado para definir Vistas"
ES ReactJS un lenguaje o solamente una librería de javascript, o es un framework completo para la administración de vistas ?, en el último caso ¿ incluye una sintaxis nueva, librerías de soporte, reutilización, módulos, preprocesadores, etc. ?

Cesar Anton

student•

En el modelo MVC, ReactJS se enfoca en generarVistas dinámicas de alto rendimiento.

No es un frameworks para 'administrar Vistas, es una librería para generar vistas dinámicas en front-end y backend, basado en JavaScript.

Generas las vistas por Javascript, para facilitar la programación usamos JSX para usar una sintaxis similar al HTML final, JSX se precompila a JavaScript para uso en producción. Esta diseñado para crear código modular y reciclable en forma de ReactJS components.

Se puede usar como HTML Template Engine cuando corre en el backend, en estos casos (aplicaciónes isomoficas) el backend pre-compila el HTML inicial y luego el front-end toma control de las actualizaciones.

Tenemos muchos artículos:
https://platzi.com/blog/?s=ReactJS

Kevin Caicedo Riascos

student•

La función .map() no es de react.js es una función que ya viene en javascript el método .map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

Stefany Zapata Naranjo

student•

la funcion map()de este ejemplo donde aparece?

inventr Miguel Gomez

student•

el ejemplo de simpleList_data.json para ser un json creo esta mal escrito. deberia quedar algo como

[  
    {  
        "row":"Leer la documentación"  
    },  
    {  
        "row":"Completar Tutoriales"  
    },  
    {  
        "row":"Crear un Demo"  
    },  
    {  
        "row":"Escribir sobre lo que aprendiste"  
    }  
]

Erledie Salazar

student•

Tengo una duda que no se si tengo la respuesta. cuando dices que compilar el jsx con nodejs por medio del comando "jsx extension jsx watch jsx/ js/" donde va el nombre del archivo jsx? Este comando haria lo mismo que hace el "stylus -c -w nombreArchivo.styl" seria como la misma figura? y en el html se llamaria es el js y no el jsx?. agradezco la colaboracion