Want to create interactive content? It’s easy in Genially!

Get started free

Lección 1 ¿Qué es React Native?

Raul Alberto Toledo Piñon

Created on September 4, 2022

Start designing with a free template

Discover more than 1500 professional designs like these:

Practical Presentation

Smart Presentation

Essential Presentation

Akihabara Presentation

Pastel Color Presentation

Modern Presentation

Relaxing Presentation

Explore all templates

Transcript

¿Qué es React Native?

Sesión 1

Empezar

Índice

Definición de React Native

¿Como se construye la aplicación?

Ventajas de React Native

¿Como funciona internamente React Native?

React Native tras bambalinas ...

Virtual DOM

Ciclo de vida de Renderizado

JSX

Dando estilo a los componentes

Ejemplo de una aplicación Hola Mundo

01

Definición de React Native

Puedes escribir un subtítulo

Con React Native podemos crear aplicaciones móviles nativas para Android e IOS, empleando la librería de React y JavaScript

¿Como se construye la aplicación?

De manera similar a React, las aplicaciones de React Native se escriben con una mezcla de JavaScript y esquemas de XML(JSX). Invoca los metodos de renderizado nativos de cada plataforma, Objective-C para IOS o Java para Android, de esta manera emplearemos los componentes de Interfaz de usuarios (UI) nativos de cada plataforma, y no una serie de elemntos webviews. Podremos compartir una gran parte del código que escribamos entre IOS y Android, por lo que solo emplearemos un lenguaje (Javascript), un Framework (React).

Ventajas de React Native

Compartir conocimiento

Código reutilizable

Experiencia de desarrollo

¿Como funciona internamente React Native?

React Native tras bambalinas ...

Virtual DOM

Ciclo de vida de renderización

Envía la menor cantidad de información al hilo principal, enviando unicamente las diferencias.

La renderización de los componentes no se realiza de manera asincrona.

JSX

Dando estilo a los componentes

Es una extensión de JS que asemeja a XML.

Se emplea FlexBox para el diseño, y se centra en la simplicidad.

Virtual DOM

+ info

Ciclo de vida de Renderizado

+ info

JSX

Dando estilo a los componentes

Ejemplo de una aplicación Hola Mundo

Hola Mundo

¡Gracias!

Fuentes consultadas:

  • Learning React Native: Building Native Mobile Apps with JavaScript, Bonnie Eisenman, Segunda Edición, "O'Reilly Media, Inc.", 2017
  • Learning React: Functional Web Development with React and Redux, Alex Banks, Eve Porcello, "O'Reilly Media, Inc.", 2017
  • Mastering React Native, Eric Masiello, Jacob Friedmann, Packt Publishing Ltd, 2017