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'
}
];
