Saltar al contenido

¿Qué es JSX en reaccionar detailedDec, 14thBeginners al reaccionan probablemente se confunden acerca de por qué escribimos HTML …

marzo 13, 2020

 

principiantes al reaccionan probablemente se confunden acerca de por qué escribimos HTML dentro de la JavaScript.At final de este tutorial, obtendrá una mejor comprensión de JSX.

reaccionar sin escritura de JSX

Let algunos reaccionan código sin usar JSX para que podamos conocer mejor, por qué usamos JSX en reaccionar.

let h1 = React.createElement('h1',{style:{color:"green"}}," h1 element");
let p = React.createElement('p',{style:{color:"red"}},"p element");
let div = React.createElement('div',{className:"container"},h1,p)

ReactDOM.render(div,document.querySelector('#app'))

React.createElement (tipo, apoyos, niños) método toma los tres argumentos. tipo

: Significa que el tipo de elemento de HTML que necesitamos. (ejemplo:. h1, h2, P, div..etc)

apoyos: Todas las propiedades requeridas para este elemento de / no.

hijos: los datos que necesitamos para añadir el interior del elemento HTML (ejemplo: texto sin formato o elementos secundarios).

reaccionar con JSX

Ahora estamos sustituyendo el código anterior mediante el uso de JSX.

let green = {color:"green"},
red = {color:"red"}

let h1 =

h1 element

;
let p =

p element

;
let div =

{h1}{p}

ReactDOM.render(div,document.querySelector('#app'))

El JSX escribimos dentro del reaccionan a menudo se convierte en JavaScript utilizando el transpiler Babel.

¿Cuál es JSX?

JSX permite que escribamos HTML como sintaxis de JavaScript dentro del éstos no reaccionan es una cosa específica. Mediante el uso de JSX podemos hacer que nuestro código de manera más legible que reaccionan equipo recomienda que usemos JSX.

JSX no sólo se utiliza en reaccionan también hay algunos otros marcos como preactjs, Infernojs utiliza JSX.

Expresiones en JSX

En JSX, podemos incrustar expresiones JavaScript envolviendo con las llaves {}.

let h1 =

Odd number {2+3}

let users = ['user1','user2','user3']

let ul =

    {users.map((user,i)=>(

  • {user}
  • ))}

En el código anterior, se utilizó el método de mapa para iterar sobre matriz del usuario y crea tres elementos li.

atributos en JSX

Inline estilos

//object
let greenColor = {color:"green"}

let h1 =

This is heading

para el estilo en línea que necesitamos para pasar propiedades de estilo como un objeto dentro de las llaves porque objeto es un expresión de JavaScript.

También puede pasar directamente objeto de estilo dentro de las llaves en lugar de utilizar la variable adicional. estilos

let h1 =

This is heading

externos utilizando nombres de las clases

tenemos que utilizar className en lugar del atributo normal de clase que utilizamos en HTML, porque ya hay una clase de palabras clave dentro de la presente JavaScript.

let h1 =

This is heading

Reaccionar Componentes

El componente es una pieza reutilizable de código en reaccionan que devuelve un elemento reaccionar.

function Button(props){
return
}

condicionales en JSX

function ShowHide(props){

if(props.show){
return
}else{
return
}

}

ReactDOM.render(,document.querySelector('#app'))

Podemos hacer por encima de código del componente más simple mediante el operador ternario.

function ShowHide(props){

return

}

operador de propagación en JSX

Supongamos que necesitamos para pasar unos datos al componente del usuario mediante el uso de accesorios.

function User(props){
return (

{props.name}

  • {props.email}
  • {props.mobile }

)
}

vamos a pasar los mismos datos apoyos mediante el operador de difusión.

let user = {
name:"gowtham",
email:"[email protected]",
mobile:2134578
}