SlideShare una empresa de Scribd logo
1 de 2
Descargar para leer sin conexión
Primeros pasos en JSX
Como discutimos antes, React no incluye un lenguaje de plantillas como
HTML, en cambio, las plantillas y los elementos que conforman una vista
se escriben usando código de JavaScript.
React expone un método createElement que puedes usar para crear
elementos de React a usar en una vista. El código que se muestra a
continuación, crea un botón con el texto Enviar:
React.createElement(‘button’,{},’Enviar’);
Puedes usar el segundo argumento para enviar información hacia el
elemento button que se crea:
const Btn = ()=>{
return React.createElement("button",{
onClick: ()=> alert("Hola")
},"Enviar");
}
Puedes continuar usando createElement para representar tus vistas, sin
embargo, encontrarás pronto que usar esta función hará que el código de
tus vistas se vuelva extremadamente largo y verboso, además de difícil
de leer y reutilizar.
Para solucionar esto, se introduce JSX. JSX extiende la sintaxis de
JavaScript para representar vía etiquetas las declaraciones de
React.createElement. Internamente, JSX usa la misma función para crear
elementos, en el exterior, notarás que usar JSX hará tu código más
expresivo y simple.
El código del botón que vimos antes, se vería así con JSX
const Btn ()=> <button onClick={ ()=> alert(“Hola”)
}> Enviar </button>
Puedes notar que no colocamos comillas alrededor de la declaración de
la etiqueta button, esto es porque la sintaxis de JSX no es un string, de
nuevo, es JavaScript.
Por último, recuerda que aunque, al igual que HTML, JSX usa los
caracteres menor qué y mayor qué para represnetar elementos de React,
HTML y JSX no son la misma tecnología, JSX nos permite embeber
expresiones de JavaScript y pasar directamente nuestros datos a la
declaración de nuestras vistas.
A lo largo del bloque irás aprendiendo la sintaxis de JSX y sus
características principales, continuemos.

Más contenido relacionado

Similar a 05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf

Curso Programacion Desarollo web FrontEnd
Curso Programacion Desarollo web FrontEndCurso Programacion Desarollo web FrontEnd
Curso Programacion Desarollo web FrontEnd
RenzoCrisanto2
 
Como insertar una imagen en eclipse java
Como insertar una imagen en eclipse javaComo insertar una imagen en eclipse java
Como insertar una imagen en eclipse java
Josué Naquid
 
Jowin Rojas Venecia IED
Jowin Rojas Venecia IEDJowin Rojas Venecia IED
Jowin Rojas Venecia IED
deluxefalen
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
libidinosa
 

Similar a 05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf (20)

Creando mi primer bot application en Visual Studio 2017
Creando mi primer bot application en Visual Studio 2017Creando mi primer bot application en Visual Studio 2017
Creando mi primer bot application en Visual Studio 2017
 
Mvc
MvcMvc
Mvc
 
Curso Programacion Desarollo web FrontEnd
Curso Programacion Desarollo web FrontEndCurso Programacion Desarollo web FrontEnd
Curso Programacion Desarollo web FrontEnd
 
Como insertar una imagen en eclipse java
Como insertar una imagen en eclipse javaComo insertar una imagen en eclipse java
Como insertar una imagen en eclipse java
 
Jowin Rojas Venecia IED
Jowin Rojas Venecia IEDJowin Rojas Venecia IED
Jowin Rojas Venecia IED
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
 
Programa2 eclipse
Programa2 eclipsePrograma2 eclipse
Programa2 eclipse
 
Programa 2
Programa 2Programa 2
Programa 2
 
Programa2
Programa2 Programa2
Programa2
 
Conectar con bases de datos
Conectar con bases de datosConectar con bases de datos
Conectar con bases de datos
 
bases de datos desde visual basic
bases de datos desde visual basicbases de datos desde visual basic
bases de datos desde visual basic
 
Tutorial crear una app con ios
Tutorial crear una app con iosTutorial crear una app con ios
Tutorial crear una app con ios
 
Tutorial net beans
Tutorial net beansTutorial net beans
Tutorial net beans
 
284
284284
284
 
Practica 1 html_basico
Practica 1 html_basicoPractica 1 html_basico
Practica 1 html_basico
 
001 conexion-con-bd
001 conexion-con-bd001 conexion-con-bd
001 conexion-con-bd
 
El objeto Controls - Small Basic
El objeto Controls - Small BasicEl objeto Controls - Small Basic
El objeto Controls - Small Basic
 
C sharp manual
C sharp manualC sharp manual
C sharp manual
 
C sharp manual
C sharp manualC sharp manual
C sharp manual
 
C sharp manual
C sharp manualC sharp manual
C sharp manual
 

Más de RolitoChc1

Más de RolitoChc1 (9)

gestion de entrada y salida de los procesos de los sistemas operativos.ppt
gestion de entrada y salida de los procesos de los sistemas operativos.pptgestion de entrada y salida de los procesos de los sistemas operativos.ppt
gestion de entrada y salida de los procesos de los sistemas operativos.ppt
 
tema7: gestion de entrada y salida los procesos en los sistemas.ppt
tema7: gestion de entrada y salida los procesos en los sistemas.ppttema7: gestion de entrada y salida los procesos en los sistemas.ppt
tema7: gestion de entrada y salida los procesos en los sistemas.ppt
 
Curso de Fundeweb2 desde cero a experto con ejemplos.ppt
Curso de Fundeweb2 desde cero a experto con ejemplos.pptCurso de Fundeweb2 desde cero a experto con ejemplos.ppt
Curso de Fundeweb2 desde cero a experto con ejemplos.ppt
 
Curso Fundeweb2 para java desde cero a experto.ppt
Curso Fundeweb2 para java desde cero a experto.pptCurso Fundeweb2 para java desde cero a experto.ppt
Curso Fundeweb2 para java desde cero a experto.ppt
 
Tema II INTRODUCCION A LAS Maqunas Virtuales.ppt
Tema II INTRODUCCION A LAS Maqunas Virtuales.pptTema II INTRODUCCION A LAS Maqunas Virtuales.ppt
Tema II INTRODUCCION A LAS Maqunas Virtuales.ppt
 
15.-Introducción a las props mas ejercicios.pdf
15.-Introducción a las props mas ejercicios.pdf15.-Introducción a las props mas ejercicios.pdf
15.-Introducción a las props mas ejercicios.pdf
 
15.-Introducción a las props con FSX y ejercicios.pdf
15.-Introducción a las props con FSX y ejercicios.pdf15.-Introducción a las props con FSX y ejercicios.pdf
15.-Introducción a las props con FSX y ejercicios.pdf
 
21.-Efectos secundarios para el manejo de FSX.pdf
21.-Efectos secundarios para el manejo de FSX.pdf21.-Efectos secundarios para el manejo de FSX.pdf
21.-Efectos secundarios para el manejo de FSX.pdf
 
37.-Qué son los componentes de clase.pdf
37.-Qué son los componentes de clase.pdf37.-Qué son los componentes de clase.pdf
37.-Qué son los componentes de clase.pdf
 

Último

PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 

Último (20)

Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Introduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptxIntroduccion-a-los-numeros-en-ingles.pptx
Introduccion-a-los-numeros-en-ingles.pptx
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 

05.-Primeros Pasos en JSXy ejercicios practicos paso a paso.pdf

  • 1. Primeros pasos en JSX Como discutimos antes, React no incluye un lenguaje de plantillas como HTML, en cambio, las plantillas y los elementos que conforman una vista se escriben usando código de JavaScript. React expone un método createElement que puedes usar para crear elementos de React a usar en una vista. El código que se muestra a continuación, crea un botón con el texto Enviar: React.createElement(‘button’,{},’Enviar’); Puedes usar el segundo argumento para enviar información hacia el elemento button que se crea: const Btn = ()=>{ return React.createElement("button",{ onClick: ()=> alert("Hola") },"Enviar"); } Puedes continuar usando createElement para representar tus vistas, sin embargo, encontrarás pronto que usar esta función hará que el código de tus vistas se vuelva extremadamente largo y verboso, además de difícil de leer y reutilizar. Para solucionar esto, se introduce JSX. JSX extiende la sintaxis de JavaScript para representar vía etiquetas las declaraciones de React.createElement. Internamente, JSX usa la misma función para crear elementos, en el exterior, notarás que usar JSX hará tu código más expresivo y simple. El código del botón que vimos antes, se vería así con JSX const Btn ()=> <button onClick={ ()=> alert(“Hola”) }> Enviar </button>
  • 2. Puedes notar que no colocamos comillas alrededor de la declaración de la etiqueta button, esto es porque la sintaxis de JSX no es un string, de nuevo, es JavaScript. Por último, recuerda que aunque, al igual que HTML, JSX usa los caracteres menor qué y mayor qué para represnetar elementos de React, HTML y JSX no son la misma tecnología, JSX nos permite embeber expresiones de JavaScript y pasar directamente nuestros datos a la declaración de nuestras vistas. A lo largo del bloque irás aprendiendo la sintaxis de JSX y sus características principales, continuemos.