Primeros pasos
con ExtReact
Fernando Rizzato
Lead Software Consultant, Latin America
Embarcadero Technologies Copyright 2019
AGENDA
§ ¿Qué es React?
§ Instalación y configuración
§ Conceptos Básicos
§ Ejemplos
§ ExtReact
§ Instalación y configuración
§ Ejemplos
Embarcadero Technologies Copyright 2019
¿QUÉ ES REACT?
§ REACT es una biblioteca JavaScript
§ REACT no es un framework (a diferencia de Angular o ExtJS)
§ REACT es un proyecto de código abierto creado por Facebook
§ REACT se utiliza para crear interfaces de usuario (UI)
§ REACT es la capa View de una aplicación MVC (Model View
Controller)
§ Con REACT usted va a crear componentes, que son como
elementos HTML personalizados y reutilizables
Embarcadero Technologies Copyright 2019
REACT - INSTALACIÓN Y CONFIGURACIÓN
§ Vía CDN (básicamente para fines didácticos)
Embarcadero Technologies Copyright 2019
REACT - INSTALACIÓN Y CONFIGURACIÓN
§ Vía NPM
§ Es necesario NPM 5.2+
§ npx create-react-app react-tutorial
§ cd react-tutorial
§ npm start
Embarcadero Technologies Copyright 2019
REACT - CONCEPTOS BÁSICOS
§ DOM (Document Object Model) es una interfaz que representa
cómo sus documentos HTML y XML son leídos por el navegador. Al
manipular el DOM, usted tiene infinitas posibilidades, pudiendo
crear aplicaciones que actualicen los datos de la página, o su diseño,
sin necesidad de un refresco
§ BABEL - Babel es un compilador JavaScript que se utiliza
principalmente para convertir código ECMAScript 2015+ en una
versión compatible con versiones anteriores de JavaScript en
navegadores o entornos más antiguos
Embarcadero Technologies Copyright 2019
EXTREACT
§ ExtReact proporciona todos los componentes que un desarrollador
necesita para crear aplicaciones web que utilizan grandes volúmenes
de datos
§ ExtReact incluye más de 115 componentes diseñados para trabajar
juntos de manera transparente, además del Data Package
§ ExtReact soporta React 15 y React 16, y también está integrado en
Sencha Themer y Sencha Test
Embarcadero Technologies Copyright 2019
EXTREACT - INSTALACIÓN Y CONFIGURACIÓN
§ Vía NPM
§ Es necesario NPM 5.2+
§ npm login --registry=[Link] --scope=@sencha
§ npm install -g @sencha/ext-react-gen
§ ext-react-gen app -i
§ cd ./my-app
§ npm start
Embarcadero Technologies Copyright 2019
Embarcadero Technologies Copyright 2019 9
RECURSOS ADICIONALES
Documentación
§ [Link]
§ [Link]
§ [Link]
§ [Link]
Blogs
§ [Link]
§ [Link]
§ [Link]
§ [Link]
§ [Link]
§ [Link]
Embarcadero Technologies Copyright 2019
GRACIAS!
Preguntas?
Me puedes encontrar en:
@FernandoRizzato
[Link]@[Link]
Síguenos en
[Link]/EMBTLatAm
Embarcadero Technologies Copyright 2019 11
