Skip to content

Instantly share code, notes, and snippets.

@HectorBlisS

HectorBlisS/index.html

Created October 25, 2017 01:54
Show Gist options
  • Save HectorBlisS/491e13d57c6c0b02638da18caced4c5d to your computer and use it in GitHub Desktop.
Save HectorBlisS/491e13d57c6c0b02638da18caced4c5d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/tipitad
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root">BlisS</div>
<button id="suma">+</button>
<button id="resta">-</button>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
<script id="jsbin-javascript">
"use strict";
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
var _Redux = Redux;
var createStore = _Redux.createStore;
var combineReducers = _Redux.combineReducers;
function counter(state, action) {
if (state === undefined) state = 0;
switch (action.type) {
case "SUMALE":
return state + 1;
case "RESTALE":
if (state < 1) return 0;
return state - 1;
default:
return state;
}
}
function lista(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case "ADD_ITEM":
return [].concat(_toConsumableArray(state), [action.item]);
default:
return state;
}
}
var rootReducer = combineReducers({
counter: counter,
lista: lista
});
var store = createStore(rootReducer);
//referencias
var root = document.getElementById("root");
var suma = document.getElementById("suma");
var resta = document.getElementById("resta");
//action Creators
suma.addEventListener("click", function () {
store.dispatch({
type: "SUMALE"
});
});
resta.addEventListener("click", function () {
store.dispatch({
type: "RESTALE"
});
});
var list = [{
id: 0,
text: "Holi"
}, {
id: 1,
text: "Lol"
}];
//funciones
function agregar() {
store.dispatch({
type: "ADD_ITEM",
item: { id: input, text: input }
});
}
//componenntes
var Lista = function Lista(_ref) {
var lista = _ref.lista;
return React.createElement(
"div",
null,
lista.map(function (i) {
return React.createElement(
"p",
null,
i.text
);
})
);
};
var input = undefined;
function onChange(e) {
input = e.target.value;
}
var App = function App() {
return React.createElement(
"div",
null,
React.createElement(
"div",
null,
"BlisS"
),
React.createElement("input", {
onChange: onChange,
type: "text"
}),
React.createElement(
"button",
{
onClick: agregar
},
"Agregar"
),
React.createElement(Lista, {
lista: store.getState().lista
})
);
};
function render() {
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
}
store.subscribe(render);
render();
//console.log(store.getState());
</script>
<script id="jsbin-source-javascript" type="text/javascript">const {createStore, combineReducers} = Redux;
function counter(state=0, action){
switch(action.type){
case "SUMALE":
return state + 1;
case "RESTALE":
if(state < 1) return 0;
return state -1;
default:
return state;
}
}
function lista(state=[], action){
switch(action.type){
case "ADD_ITEM":
return [...state, action.item];
default:
return state;
}
}
const rootReducer = combineReducers({
counter,
lista
});
const store = createStore(rootReducer);
//referencias
let root = document.getElementById("root");
let suma = document.getElementById("suma");
let resta = document.getElementById("resta");
//action Creators
suma.addEventListener("click", ()=>{
store.dispatch({
type:"SUMALE"
})
});
resta.addEventListener("click", function(){
store.dispatch({
type:"RESTALE"
});
})
const list = [
{
id:0,
text:"Holi"
},
{
id:1,
text:"Lol"
}
]
//funciones
function agregar(){
store.dispatch({
type:"ADD_ITEM",
item:{id:input,text:input}
});
}
//componenntes
const Lista = ({lista}) => (
<div>
{lista.map(i=><p>{i.text}</p>)}
</div>
);
let input;
function onChange(e){
input = e.target.value;
}
const App = () => (
<div>
<div>BlisS</div>
<input
onChange={onChange}
type="text"
/>
<button
onClick={agregar}
>
Agregar
</button>
<Lista
lista={store.getState().lista}
/>
</div>
);
function render(){
ReactDOM.render(<App/>, document.getElementById("root"));
}
store.subscribe(render);
render();
//console.log(store.getState());
</script></body>
</html>
Raw
jsbin.tipitad.js
"use strict";
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
var _Redux = Redux;
var createStore = _Redux.createStore;
var combineReducers = _Redux.combineReducers;
function counter(state, action) {
if (state === undefined) state = 0;
switch (action.type) {
case "SUMALE":
return state + 1;
case "RESTALE":
if (state < 1) return 0;
return state - 1;
default:
return state;
}
}
function lista(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case "ADD_ITEM":
return [].concat(_toConsumableArray(state), [action.item]);
default:
return state;
}
}
var rootReducer = combineReducers({
counter: counter,
lista: lista
});
var store = createStore(rootReducer);
//referencias
var root = document.getElementById("root");
var suma = document.getElementById("suma");
var resta = document.getElementById("resta");
//action Creators
suma.addEventListener("click", function () {
store.dispatch({
type: "SUMALE"
});
});
resta.addEventListener("click", function () {
store.dispatch({
type: "RESTALE"
});
});
var list = [{
id: 0,
text: "Holi"
}, {
id: 1,
text: "Lol"
}];
//funciones
function agregar() {
store.dispatch({
type: "ADD_ITEM",
item: { id: input, text: input }
});
}
//componenntes
var Lista = function Lista(_ref) {
var lista = _ref.lista;
return React.createElement(
"div",
null,
lista.map(function (i) {
return React.createElement(
"p",
null,
i.text
);
})
);
};
var input = undefined;
function onChange(e) {
input = e.target.value;
}
var App = function App() {
return React.createElement(
"div",
null,
React.createElement(
"div",
null,
"BlisS"
),
React.createElement("input", {
onChange: onChange,
type: "text"
}),
React.createElement(
"button",
{
onClick: agregar
},
"Agregar"
),
React.createElement(Lista, {
lista: store.getState().lista
})
);
};
function render() {
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
}
store.subscribe(render);
render();
//console.log(store.getState());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment