03 2Breactjs

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

03 2Breactjs

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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)