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




Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04