APRENDER PROGRAMACION ORIENTADA A LA WEB A TRAVES

DE LA JAVASCRIPT Y REACT

¿Qué es React?
v

React es una librería de JavaScript para la generación de ¿Inicios de React?

interfaces visuales. Esta pensado para generar componentes y
ser utilizados en proyectos medianos y grandes.

React es un Proyecto desarrollado por

¿Ventaja de React? la empresa Facebook y tiene sus
inicios en el año 2013.

React nos facilita la implementación de paginas SPA (Single-Page Application) o aplicaciones de

página única en un sitio web, este tipo de aplicaciones tiene por objetivo dar al visitante una
experiencia mas parecida a las aplicaciones de escritorio.

¿Metodología Utilizada?

2
APRENDER PROGRAMACION ORIENTADA A LA WEB A TRAVES
DE LA JAVASCRIPT Y REACT

CODIFICACION REACT – EJEMPLO

Diseñe un Programa en la cual le permite ingresar dos números e imprima el
resulta de la sumatoria de estos dos números a través de un alert o mensaje a
través de JavaScript.
Deberá crear una función en JavaScript la cual será la responsable de procesar la
información de los números suministrados por el usuario

Autor: Fuente Propia

2
FRAMEWORK PARA ESTILOS CSS – BOOTSTRAP

Autor: Fuente Propia

Autor: Fuente Propia

Instalación de Bootstrap para el uso de los estilos de css y brindar estilos a
nuestros diseños a través de Bootstrap
2
 Interfaz o Formulario en HTML
Autor: Fuente Propia

Código JavaScript y HTML

Autor: Fuente Propia
2
FUNCION JAVASCRIPT

Autor: Fuente Propia

Lo mas importante en este problema es ver como se enlaza el evento OnSubmit
con la función presión.

En la función App inicializamos el evento OnSubmit con la referencia de la función

presión.

Ejemplo 2:
Se deberá de crear un segundo proyecto en React con el nombre que desee para
mi caso el nombre serio numeroaleatorio.

Como se puede observar tenemos nuestros dos proyectos que hemos creado
hasta el momento para el desarrollo de esta capacitación la estructura del
Proyecto que nos brinda React es la misma para todos los Proyectos que creamos
2

de ahora en adelante.
Carpeta de interés el src

Autor: Fuente Propia

Estos son los archivos que nos interesan ubicados en la carpeta src del proyecto
que acabamos de crear nos brinda una estructura básica para trabajar, pero si hay
archivos que nos vamos a usar y podemos eliminar sin ningún problema

Autor: Fuente Propia

La Función app no retorna ni HTML, ni JavaScript puro, es un nuevo formato
propuesto por los creadores de React que luego de ser compilado se genera
JavaScript puro que lo pueden entender los navegadores.
2
Hay ciertas reglas que den cumplir el formato JSX (JAVASCRIPT XML),
presentaremos algunas de ellas en este segundo ejercicio.

Se procede a modificar valor devuelto por la función App:

Autor: Fuente Propia

Autor: Fuente Propia

La Función App tiene por objetivo retornar el elemento JSX que representa la
interfaz visual de la componente App , por el momento desarrollaremos toda
nuestra aplicación en una único componente, luego veremos que un programa se
descompone en muchos componentes.

Una restricción de JSX es que siempre los elementos HTML deben tener su marca
de comienzo y fin, y en el caso que solo tengan una etiqueta que es tanto de
comienzo como de fin debemos agregar el carácter ‘/’

Si nos olvidamos de agregar la barra de cierre se genera un erro cuando tratamos

de compilar la aplicación
2
 Autor: Fuente Propia
Dentro del bloque JSX podemos acceder a variables o constantes indicando entre
llaves dicha variable o constate:

Autor: Fuente Propia

2
Luego cuando se compila en lugar de la expresión se muestra el contenido de la
variable o constante

Autor: Fuente Propia

Oras restricciones que tiene el formato JSX

Se Recomienda dividir el JSX en varias líneas para facilitar la lectura, también se
recomiendan envolverlo entre paréntesis para evitar los inconvenientes de la
inserción automática de punto y coma.
Para definir valores a las propiedades de unos elementos HTML mediante
expresiones no debemos disponer las comillas. Por ejemplo modifique el método
render y pruebe esto

2
2