Saltar al contenido

Cómo crear reaccionar componentsDec, 16thComponents son las piezas reutilizables de interfaz de usuario, que nos ayudan a crear una vez …

marzo 13, 2020

 

componentes son las piezas reutilizables de interfaz de usuario, que ayuda a crear una vez y por todas partes utilizamos en nuestras aplicaciones. En el reaccionan, se trataron todo como un componente.

Nota: Lea JSX y Dom virtual antes de moverse hacia abajo.

Creemos nuestro primer componente.

function Header(){

return

This is my header component

}

Esta un simple componente de encabezado que devuelve h1 elemento DOM.

cómo representar un componente en el navegador?

rendir un componente de la lista tenemos que invocar el método ReactDOM.render () con dos argumentos.

ReactDOM.render(

,document.querySelector('#root'))

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

También puede pasar datos a los componentes mediante el uso de props.let de reemplazar el componente anterior con puntales.

function Header(props){

return

{props.name}

}

ReactDOM.render(

,document.querySelector('#root'))

Para saber acerca de los apoyos en los principiantes más detalladas de pagar una guía para reaccionar apoyos.

También hay otra manera de crear reaccionar componentes utilizando clases .

class Header extends React.Component{

render(){
return (

{this.props.name}

)
}

}

ReactDOM.render(

,document.querySelector('#root'))

En la clase de componente basa necesidad que devolver el JSX dentro del método de procesamiento.

Hasta ahora sólo han aprendido a crear reaccionar componentes. Ahora, es el momento de volver a utilizar nuestros componentes. En

function Button(props){
return
}

function App(){

return (

This my post heading

this is my article

)

}

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

del código anterior hemos creado nuestro componente Button y reutilizada una vez tres veces dentro del componente de aplicaciones.