made with esnextbin
Last active
May 10, 2017 15:28
-
-
Save xalakox/9804cc005973a39ad1e309070fb22285 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNext Bin Sketch</title> | |
| <!-- put additional styles and scripts here --> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> | |
| <!-- CSS Reset --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> | |
| <!-- Milligram CSS minified --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css"> | |
| <style> | |
| body { | |
| color: white; | |
| background-color: #575A65; | |
| font-family: 'Roboto', cursive; | |
| } | |
| #app { | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .name { | |
| font-size: 1.7em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| import axios from 'axios' | |
| const postsUrl = 'https://jsonplaceholder.typicode.com/posts' | |
| // reto : deberas traer del endpoint postsUrl y mostrarlos en un listado de | |
| // 10 componentes a la vez con paginacion del lado del cliente y para hacerlo | |
| // deberas usar la libreria de axios para agregar y borrar vease los enpdoints | |
| // en https://jsonplaceholder.typicode.com/ | |
| // tambien se deber´á maquetar el listado, el boton de borrado y el formulario | |
| // de agregar. | |
| // Specs, el elemento del listado debera ser un component por separado | |
| // declarado en la siguiente variable | |
| const post = null | |
| const App = React.createClass({ | |
| getInitialState() { | |
| return { | |
| titulo: '[Click para mostrar elementos]', | |
| posts: [] | |
| } | |
| }, | |
| bringPosts(){ | |
| // aqui es donde traeras los elementos | |
| }, | |
| borraPost(postID){ | |
| // aqui es donde deberas mandar el borrado de elementos | |
| }, | |
| agregarPost(titulo, cuerpo){ | |
| // aqui es donde deberas mandar el agregado del nuevo elemento | |
| }, | |
| render() { | |
| return ( | |
| <div> | |
| <h1>Le Posts List</h1> | |
| {this.state.posts.length === 0 ? | |
| <div className="name">{this.state.titulo}</div> | |
| : | |
| <div className="listdado"></div> | |
| } | |
| <hr /> | |
| <button onClick={this.bringPosts}> | |
| Traer Elementos | |
| </button> | |
| </div> | |
| ) | |
| } | |
| }) | |
| ReactDOM.render( | |
| <App />, | |
| document.getElementById('app'), | |
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "react": "0.14.7", | |
| "react-dom": "0.14.7", | |
| "axios": "0.15.3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var _react = require('react'); | |
| var _react2 = _interopRequireDefault(_react); | |
| var _reactDom = require('react-dom'); | |
| var _reactDom2 = _interopRequireDefault(_reactDom); | |
| var _axios = require('axios'); | |
| var _axios2 = _interopRequireDefault(_axios); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var postsUrl = 'https://jsonplaceholder.typicode.com/posts'; | |
| // reto : deberas traer del endpoint postsUrl y mostrarlos en un listado de | |
| // 10 componentes a la vez con paginacion del lado del cliente y para hacerlo | |
| // deberas usar la libreria de axios para agregar y borrar vease los enpdoints | |
| // en https://jsonplaceholder.typicode.com/ | |
| // tambien se deber´á maquetar el listado, el boton de borrado y el formulario | |
| // de agregar. | |
| // Specs, el elemento del listado debera ser un component por separado | |
| // declarado en la siguiente variable | |
| var post = null; | |
| var App = _react2.default.createClass({ | |
| displayName: 'App', | |
| getInitialState: function getInitialState() { | |
| return { | |
| titulo: '[Click para mostrar elementos]', | |
| posts: [] | |
| }; | |
| }, | |
| bringPosts: function bringPosts() { | |
| // aqui es donde traeras los elementos | |
| }, | |
| borraPost: function borraPost(postID) { | |
| // aqui es donde deberas mandar el borrado de elementos | |
| }, | |
| agregarPost: function agregarPost(titulo, cuerpo) { | |
| // aqui es donde deberas mandar el agregado del nuevo elemento | |
| }, | |
| render: function render() { | |
| return _react2.default.createElement( | |
| 'div', | |
| null, | |
| _react2.default.createElement( | |
| 'h1', | |
| null, | |
| 'Le Posts List' | |
| ), | |
| this.state.posts.length === 0 ? _react2.default.createElement( | |
| 'div', | |
| { className: 'name' }, | |
| this.state.titulo | |
| ) : _react2.default.createElement('div', { className: 'listdado' }), | |
| _react2.default.createElement('hr', null), | |
| _react2.default.createElement( | |
| 'button', | |
| { onClick: this.bringPosts }, | |
| 'Traer Elementos' | |
| ) | |
| ); | |
| } | |
| }); | |
| _reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment