Inicio » Blog » React JS

6 abril, 2021

Props en React JS

Cómo se usan los Props en un aplicación React JS, veamos un ejemplo sencillo de entender

Props en React JS

Suscríbete a nuestro canal en Youtube

Suscríbirse

Propiedades (props) de react

Las 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;

 

Anidación de componentes

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 2345 veces

Compartir link del tutorial con tus amigos


ReactJS Básico ReactJS Básico

ReactJS Básico

Descarga del código fuente

USD 0.00

ReactJS y Laravel Directorio de Empresas ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel desarrollo fullstack directorio empresarial

Descarga del código fuente

USD 47.00

Aprende más sobre React JS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023