Menú con ReactJS

In this example below you will see how to do a Menú con ReactJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0utKast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0utKast ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Menú con ReactJS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='https://codepen.io/chriscoyier/pen/yIgqi.js'></script>
<script src='https://fb.me/react-0.11.1.js'></script>
<script src='https://fb.me/JSXTransformer-0.11.0.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0utKast/menandxfa-con-reactjs-rVONJW */
* {
    padding:0;
    margin:0;
}

html{
    font:14px normal Arial, sans-serif;
    color:#626771;
    background-color:#fff;
}

body{
    padding:60px;
    text-align: center;
}

ul{
    list-style:none;
    display: inline-block;
}

ul li{
    display: inline-block;
    padding: 10px 20px;
    cursor:pointer;
    background-color:#eee;
    color:#7B8585;
    
    transition:0.3s;
}

ul li:hover{
    background-color:#beecea;
}

ul li.focused{
    color:#fff;
    background-color:#41c7c2;
}

p{
    padding-top:15px;
    font-size:12px;
}

/*Downloaded from https://www.codeseek.co/0utKast/menandxfa-con-reactjs-rVONJW */
/** @jsx React.DOM */

var MenuExample = React.createClass({

    getInitialState: function(){
        return { focused: 0 };
    },

    clicked: function(index){

        // El handler click actualizará el estado con
        // el índice del menú de entrada en el foco

        this.setState({focused: index});
    },

    render: function() {

         // Aquí leeremos la propiedad items, que ha sido pasada
        // como un atributo cuando el componente fue creado
        var self = this;

        // El método map hará loop sobre el array de las entradas del menú,
        // y devolverá un nuevo array con elmentos <li>.
        return (
            <div>
                <ul>{ this.props.items.map(function(m, index){
        
                    var style = '';
        
                    if(self.state.focused == index){
                        style = 'focused';
                    }
        
                     // Observa el uso del método bind() method. Hace el
                    // índice disponible a la función pulsada: 
        
                    return <li className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;
        
                }) }
                        
                </ul>
                
                <p>Seleccionado: {this.props.items[this.state.focused]}</p>
            </div>
        );

    }
});

// Render the menu component on the page, and pass an array with menu options

React.renderComponent(
    <MenuExample items={ ['Principio', 'Servicios', 'Sobre', 'Contáctanos'] } />,
    document.body
);

Comments