03.- Manejo de datos con Reactjs⚛️ y prop-types

En este tutorial vamos a aprender a usar prop-types y ustedes se preguntaran ¿que no estábamos trabajando con reactjs?, pues si es verdad, pero prop-types es una librería que nos ayuda a leer datos y pasarlos a nuestros componentes. Una mala noticia es que prop-types no viene pordefault con reactjs pero la buena es que es muy fácil de instalar, solo usamos este comando:
npm install –save prop-types

src/MiApp/MiApp.css
.MiApp {
text-align: center;
}

.MiApp-logo {
animation: MiApp-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}

.MiApp-header {
background-color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: black;
}

.MiApp-link {
color: blue;
}

@keyframes MiApp-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.menu{
list-style: none;
}
.menu li{
display: inline-block;
margin-left: 10px;
}
src/MiApp/MiApp.js
import React from 'react';
import logo from './../logo.svg';
import './MiApp.css';

function MiApp(props) {
const variable=props.variable;
const array=props.array;
console.log(props);
return (
<div className="MiApp">
<header className="MiApp-header">
<img src={logo} className="MiApp-logo" alt="logo" />
<p>
{variable}
</p>
<ul className="menu">
{
array && array.map(
(item,key)=> <li key={key}>{item.nombre}</li>
)
}
</ul>
</header>
</div>
);
}

export default MiApp;

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MiApp from './MiApp/MiApp';
import * as serviceWorker from './serviceWorker';
import array from './modelo/datos'
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<MiApp variable="texto" array={array} />, document.getElementById('MiElemento'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

src/modelo/datos.js
export default [
{
nombre: 'Inicio',
path: '/'
},
{
nombre: 'Contacto',
path: '/contacto'
}
];

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

🟢Editar código de un módulo en Dolibarr [04]

🟢Editar código de un módulo en Dolibarr [04]

En este tutorial vamos editar el código de nuestro módulo personas para poder personalizar algunas…

2 meses hace
🟢Crear un sub_módulo en Dolibarr [03]

🟢Crear un sub_módulo en Dolibarr [03]

En este tutorial vamos a crear un sub módulo llamado seguridad que será muy parecido…

2 meses hace
🟢Modificar un módulo en Dolibarr [02]

🟢Modificar un módulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
🟢Constructor de módulos en Dolibarr

🟢Constructor de módulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una política clara:…

2 meses hace
🟢Tickets en Dolibarr [19]

🟢Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
🟢Agenda en Dolibarr [18]

🟢Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace