SlideShare a Scribd company logo
Introducción a ReactJS
Rendering UI
Eventos UI
Gestión del modelo
Enrutamiento
Comunicación con servidor
Composición app y arquitectura
Cargamos scripts de React y JSX
¡Ojo al tipo de script!
Inicializamos JSX
Mostramos el componente
Introducción a ReactJS
Introducción a ReactJS
Introducción a ReactJS
propTypes: {
propiedad: function(props, propName, componentName) {
// usar props[propName] para accedir a la propiedad
// Si la validación falla throw new Error(....)
}
}
Introducción a ReactJS
Introducción a ReactJS
Introducción a ReactJS
{a:10, b:20}
props: {a:10} props: {a:10} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 10, b:20}
{a:10, b:20}
props: {a:10} props: {a:10} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 11, b:20}
{a:11, b:20}
props: {a:10} props: {a:10} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 11, b:20}
{a:11, b:20}
props: {a:11} props: {a:11} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 11, b:20}
{a:11, b:20}
props: {a:11} props: {a:11} props: {b:20}
props: {b:20}props: {b:20}props: {a:11}
props: {b:20}
props: {a:11} props: {a:11}
state:{a: 11, b:20}
{a:11, b:20}
props: {a:11} props: {a:11} props: {b:20}
props: {b:20}props: {b:20}props: {a:11}
props: {b:20}
props: {a:11} props: {a:11}
state:{a: 11, b:20}
Introducción a ReactJS
Introducción a ReactJS
• <div id="msg"
div {id:"msg"}
<Beer name={if(condicion) {
“name”} else {“other”} />
React.createElement(Beer, {name: if
(condicion) {“name”} else {“other”}});
var beer;
if (condicion) {
beer = <Beer name=“name” />
}
else {
beer =<Beer name=“other” />
}
for (var i=0; i<beers.length; i++) {
<Beer />
}
for (var i=0; i<beers.length; i++) {
React.CreateElement(Beer));
}
for (var i=0; i<beers.length; i++) {
data.push(<Beer />);
}
return <div>{data}</div>
Introducción a ReactJS
Introducción a ReactJS
Introducción a ReactJS
Introducción a ReactJS

More Related Content

More from Eduard Tomàs

KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDAKCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
Eduard Tomàs
 
Escalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con KedaEscalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con Keda
Eduard Tomàs
 
C#9 - Más C# que nunca
C#9 - Más C# que nuncaC#9 - Más C# que nunca
C#9 - Más C# que nunca
Eduard Tomàs
 
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDACollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
Eduard Tomàs
 
Keda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en ServerlessKeda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en Serverless
Eduard Tomàs
 
.NET Memoria y Rendimiento
.NET Memoria y Rendimiento.NET Memoria y Rendimiento
.NET Memoria y Rendimiento
Eduard Tomàs
 
Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)
Eduard Tomàs
 
Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)
Eduard Tomàs
 
Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++
Eduard Tomàs
 
El "peor" lenguaje del mundo
El "peor" lenguaje del mundoEl "peor" lenguaje del mundo
El "peor" lenguaje del mundo
Eduard Tomàs
 
Containerize a netcore application with aks
 Containerize a netcore application with aks Containerize a netcore application with aks
Containerize a netcore application with aks
Eduard Tomàs
 
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Eduard Tomàs
 
Aplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramosAplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramos
Eduard Tomàs
 
Serverless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDbServerless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDb
Eduard Tomàs
 
Docker y todo eso... más o menos
Docker y todo eso... más o menosDocker y todo eso... más o menos
Docker y todo eso... más o menos
Eduard Tomàs
 
Microservices: Yes or not?
Microservices: Yes or not?Microservices: Yes or not?
Microservices: Yes or not?
Eduard Tomàs
 
ASP.NET MVC Core
ASP.NET MVC CoreASP.NET MVC Core
ASP.NET MVC Core
Eduard Tomàs
 
Azure functions
Azure functionsAzure functions
Azure functions
Eduard Tomàs
 
React native - Unleash the power of your device
React native - Unleash the power of your deviceReact native - Unleash the power of your device
React native - Unleash the power of your device
Eduard Tomàs
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
Eduard Tomàs
 

More from Eduard Tomàs (20)

KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDAKCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
KCDS 2021- Escalando workloads serverless en Kubernetes con KEDA
 
Escalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con KedaEscalando workloads serverless en Kubernetes con Keda
Escalando workloads serverless en Kubernetes con Keda
 
C#9 - Más C# que nunca
C#9 - Más C# que nuncaC#9 - Más C# que nunca
C#9 - Más C# que nunca
 
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDACollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
CollabDays 2020 Barcelona - Serverless Kubernetes with KEDA
 
Keda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en ServerlessKeda o como convertir Kubernetess en Serverless
Keda o como convertir Kubernetess en Serverless
 
.NET Memoria y Rendimiento
.NET Memoria y Rendimiento.NET Memoria y Rendimiento
.NET Memoria y Rendimiento
 
Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)Containers en .NET (Dot Net 2018 - Spain)
Containers en .NET (Dot Net 2018 - Spain)
 
Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)Esos contenedores, ¡a producción! (Commit Conf 2018)
Esos contenedores, ¡a producción! (Commit Conf 2018)
 
Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++Codemotion 2015 - Bienvenido de nuevo c++
Codemotion 2015 - Bienvenido de nuevo c++
 
El "peor" lenguaje del mundo
El "peor" lenguaje del mundoEl "peor" lenguaje del mundo
El "peor" lenguaje del mundo
 
Containerize a netcore application with aks
 Containerize a netcore application with aks Containerize a netcore application with aks
Containerize a netcore application with aks
 
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
Escenarios avanzados en AKS (Global Azure Bootcamp Barcelona 2019)
 
Aplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramosAplicaciones de consola fáciles? Más quisieramos
Aplicaciones de consola fáciles? Más quisieramos
 
Serverless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDbServerless with Azure Functions and CosmosDb
Serverless with Azure Functions and CosmosDb
 
Docker y todo eso... más o menos
Docker y todo eso... más o menosDocker y todo eso... más o menos
Docker y todo eso... más o menos
 
Microservices: Yes or not?
Microservices: Yes or not?Microservices: Yes or not?
Microservices: Yes or not?
 
ASP.NET MVC Core
ASP.NET MVC CoreASP.NET MVC Core
ASP.NET MVC Core
 
Azure functions
Azure functionsAzure functions
Azure functions
 
React native - Unleash the power of your device
React native - Unleash the power of your deviceReact native - Unleash the power of your device
React native - Unleash the power of your device
 
JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)JavaScript in 2016 (Codemotion Rome)
JavaScript in 2016 (Codemotion Rome)
 

Introducción a ReactJS

  • 2. Rendering UI Eventos UI Gestión del modelo Enrutamiento Comunicación con servidor Composición app y arquitectura
  • 3. Cargamos scripts de React y JSX ¡Ojo al tipo de script! Inicializamos JSX Mostramos el componente
  • 7. propTypes: { propiedad: function(props, propName, componentName) { // usar props[propName] para accedir a la propiedad // Si la validación falla throw new Error(....) } }
  • 11. {a:10, b:20} props: {a:10} props: {a:10} props: {b:20} props: {b:20}props: {b:20}props: {a:10} props: {b:20} props: {a:10} props: {a:10} state:{a: 10, b:20}
  • 12. {a:10, b:20} props: {a:10} props: {a:10} props: {b:20} props: {b:20}props: {b:20}props: {a:10} props: {b:20} props: {a:10} props: {a:10} state:{a: 11, b:20}
  • 13. {a:11, b:20} props: {a:10} props: {a:10} props: {b:20} props: {b:20}props: {b:20}props: {a:10} props: {b:20} props: {a:10} props: {a:10} state:{a: 11, b:20}
  • 14. {a:11, b:20} props: {a:11} props: {a:11} props: {b:20} props: {b:20}props: {b:20}props: {a:10} props: {b:20} props: {a:10} props: {a:10} state:{a: 11, b:20}
  • 15. {a:11, b:20} props: {a:11} props: {a:11} props: {b:20} props: {b:20}props: {b:20}props: {a:11} props: {b:20} props: {a:11} props: {a:11} state:{a: 11, b:20}
  • 16. {a:11, b:20} props: {a:11} props: {a:11} props: {b:20} props: {b:20}props: {b:20}props: {a:11} props: {b:20} props: {a:11} props: {a:11} state:{a: 11, b:20}
  • 19. • <div id="msg" div {id:"msg"}
  • 20. <Beer name={if(condicion) { “name”} else {“other”} /> React.createElement(Beer, {name: if (condicion) {“name”} else {“other”}}); var beer; if (condicion) { beer = <Beer name=“name” /> } else { beer =<Beer name=“other” /> }
  • 21. for (var i=0; i<beers.length; i++) { <Beer /> } for (var i=0; i<beers.length; i++) { React.CreateElement(Beer)); } for (var i=0; i<beers.length; i++) { data.push(<Beer />); } return <div>{data}</div>