Saltar al contenido

Introducción al método de React.createelement con examplesDec, 10thIn este tutorial, vamos a aprender a escribir sin reaccionar JSX …

marzo 13, 2020

 

En este tutorial, vamos a aprender a escribir sin reaccionar JSX.

La JSX que escribir el interior de los react.js se transpiled a menudo a un método React.createElement, con la ayuda de compilador de Babel. Método

React.createElement toma los tres argumentos tipo , apoyos , niños .

tipo : Tipo del elemento html o componente. (Ejemplo: H1, H2, p, button..etc).

apoyos : El objeto de propiedades.

Ejemplo: {estilo: {color: “rojo”}} o className o controladores de eventos etc.

niños : todo lo que necesita para pasar entre los elementos DOM.

ejemplo simple método

let welcome = React.createElement('h1',{style:{color:"red"}},`Welcome to react world`)

ReactDOM.render(welcome,document.querySelector('#root'))

ReactDom.render acepta dos argumentos.

  • El primer argumento es el que las necesidades de componentes o elementos para la presentación en el DOM. El
  • segundo argumento es donde para rendir en el DOM.

Se trata de un puro JavaScript sin necesidad de utilizar JSX. refactor de

Let el código anterior mediante la creación de un componente de bienvenida.

class Welcome extends React.Component{
render(){
return React.createElement('h1',{style:{color:"red"}},
`Welcome to ${this.props.name}`)
}
}

ReactDOM.render(React.createElement(Welcome,
{name:"Home page"},null),document.querySelector('#root'))

dentro del componente de bienvenida, hemos añadido la props.so que hemos pasado los datos de los apoyos {name: “Página de inicio”} como segundo argumento.

Hasta el momento estamos construyendo componentes con construir sin interacción del usuario de dejar que un componente interactivo con el manejo del estado y evento.

Contador componente ejemplo

const el = React.createElement
function Button(props){
return el('button',{onClick:props.handleClick},props.name)
}

class Counter extends React.Component{

state= {
num: 0
}

handleIncrement = () =>{
this.setState({
num: this.state.num + 1
})
}

handleDecrement = () =>{
this.setState({
num: this.state.num - 1
})
}

render(){ return el('div',null, el(Button,{handleClick:this.handleIncrement,name:'Increment'},null), el(Button,{handleClick:this.handleDecrement,name:'Decrement'},null), el('p',null,this.state.num), }

}

ReactDOM.render(el(Counter,null,null),document.querySelector('#root'))

Código pluma demostración

Veamos el mismo ejemplo Contador utilizando JSX.

function Button(props) {
return
}

class Counter extends React.Component {

state = {
num: 0
}

handleIncrement = () => {
this.setState({
num: this.state.num + 1
})
}

handleDecrement = () => {
this.setState({
num: this.state.num - 1
})
}

render() {
return (

{this.state.num}

)
}
}

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

Mediante el uso de JSX, los aumentos de legibilidad del código y también podemos crear componentes fácilmente esta es la razón por la que usamos en JSX reaccionamos aplicaciones.