import React from "react";
class Alumno extends React.Component {
constructor(){
super()
}
render() {
return <h2>Me llamo {this.props.nombre}</h2>;
}
}
export default function App() {
return (
<article>
<Alumno nombre="Ralph"/>
<Alumno nombre="Lisa"/>
</article>
);
}
Varias propiedades:
import React from "react";
class Alumno extends React.Component {
constructor(){
super()
}
render() {
return (
<div>
<h2>Me llamo {this.props.nombre}</h2>
<h3>Y me gusta la asignatura de {this.props.asignatura}</h3>
</div>
);
}
}
export default function App() {
return (
<article>
<Alumno nombre="Ralph" asignatura="canicas"/>
<Alumno nombre="Lisa" asignatura="Música"/>
</article>
);
}
Propiedades en la clase
class Alumno extends React.Component {
render () {
return <h2 className="{this.props.clase}">Me llamo Ralph</h2>
}
}
function App () {
return (
<div className='App bg-primary'>
<Alumno clase="bg-success" />
</div>
)
}
Propiedades en JS:
import React from "react";
class Alumnos extends React.Component {
render () {
const alumnos = []
for (let i = 0; i < this.props.cantidad; i++) {
alumnos.push(<p key={i}>Alumno {i + 1}</p>)
}
return <div>{alumnos}</div>
}
}
export default function App() {
return (
<Alumnos cantidad="10"/>
);
}
En este ejemplo y en el anterior creamos una tabla para agrupar diferentes elementos. Los elementos, como están repetidos, incluyen un ‘key’ que es algo que pide el React, pero que funciona si no lo ponemos y a lo que no le vamos a prestar atención.
class Tabla extends React.Component {
render() {
const tabla = [];
for (let i = 1; i <= 10; i++) {
tabla.push(
<p key={i}>
{this.props.numero} x {i} = {this.props.numero * i}
</p>
);
}
return <div>{tabla}</div>;
}
}
export default function App() {
return <Tabla numero="7" />;
}