Skip to content

Instantly share code, notes, and snippets.

@xalakox
Last active May 10, 2017
Embed
What would you like to do?
esnextbin sketch
<!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>
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'),
)
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react": "0.14.7",
"react-dom": "0.14.7",
"axios": "0.15.3"
}
}
'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