6 abril, 2021
Cómo se usan los Props en un aplicación React JS, veamos un ejemplo sencillo de entender
Suscríbete a nuestro canal en Youtube
SuscríbirseLas propiedades de un componente (props) pueden definirse como los atributos de configuración para dicho componente. Éstas son recibidas desde un nivel superior, normalmente al realizar la instanciación del componente y por definición son inmutables.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import React from 'react';
import Checkout from './components/Checkout'
class App extends React.Component {
constructor(props){
super(props);
this.state={
items:[
{id:1,nombre:'Polo A',foto:'./img/foto_1.jpeg',precio:10.00},
{id:2,nombre:'Polo B',foto:'./img/foto_2.jpeg',precio:20.00},
{id:3,nombre:'Polo C',foto:'./img/foto_3.jpeg',precio:40.00}
]
}
}
render(){
return( <div>
<Checkout items={this.state.items} />
</div> );
}
}
export default App;
Components/Checkout.js
import React from 'react'
import Card from './Card'
import './Checkout.css'
function Checkout(props){
return (
<div className="checkout">
<div className="checkout-header"><img src='./img/flecha.png' width='50' height='50' /><h1 className="title">Checkout</h1></div>
<div className="checkout-items">
{
props.items.map(item =>
<Card
key={item.id}
id={item.id}
nombre={item.nombre}
foto={item.foto}
precio={item.precio} />
)
}
</div>
<p className="textCantidad">Total <span>$340</span></p>
<a href="" className="btnCheckout">Checkout</a>
</div>
)
}
export default Checkout
Components/Card.js
import React from 'react'
import './Card.css'
export default class Card extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div className="card">
<div className="card-logo">
<img src={this.props.foto} width='100' />
</div>
<div className="card-content">
<h1>{this.props.nombre}</h1>
<p>{this.props.precio}</p>
</div>
</div>
)
}
}
checkout.css
.checkout{
margin: 0 auto;
width: 400px;
}
.checkout-header{
display: flex;
}
.title{ text-align: center; width: 100%;}
.textCantidad{
text-align: center;
font-weight: 500;
}
.textCantidad{
text-align: center;
font-weight: 500;
}
.btnCheckout{
text-align: center;
background-color: black;
width: 100%;
color: white;
font-weight: 500;
display: block;
padding: 20px;
margin-top: 20px;
text-decoration: none;
}
card.css
.card{
width: 100%;
border-radius: 1px;
background-color: white;
border-bottom:1px solid rgb(226, 226, 226);
display: inline-flex;
margin: 10px;
}
.card-logo{
padding: 10px;
}
.card-content{
color:black
}
Leido 1963 veces
Curso ReactJS y Laravel desarrollo fullstack directorio empresarial
Descarga del código fuente
USD 67.00
© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023