Skip to content

Instantly share code, notes, and snippets.

@bencooling

bencooling/README.md

Forked from anonymous/index.html
Last active July 11, 2016 05:15
Show Gist options
  • Save bencooling/91af6a278a50479206291260d836f7ce to your computer and use it in GitHub Desktop.
Save bencooling/91af6a278a50479206291260d836f7ce to your computer and use it in GitHub Desktop.
Download ZIP
React Redux Bootstrap Thunk Hello WorldReact Redux Bootstrap Thunk Hello World// source http://jsbin.com/bufuxi
Raw
README.md

Minimal prototype of React, Redux, Redux Thunks +React Bootstrap + Bootstrap Material Design + fetch + jsonplaceholder.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="React Redux Bootstrap Thunk Hello World">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Redux Bootstrap Thunk Hello World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.1/bootstrap-material-design.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
<script src="https://npmcdn.com/[email protected]/dist/redux.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/redux-thunk.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.5/react-bootstrap.min.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
</head>
<body>
<div id="root"></div>
<script id="jsbin-javascript">
// UMD
'use strict';
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var bindActionCreators = _Redux.bindActionCreators;
var thunk = ReduxThunk['default'];
var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;
var Provider = _ReactRedux.Provider;
var _ReactBootstrap = ReactBootstrap;
var Table = _ReactBootstrap.Table;
var rootReducer = function rootReducer(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case 'RECIEVED_USERS':
return action.payload.map(function (_ref) {
var id = _ref.id;
var name = _ref.name;
var email = _ref.email;
return { id: id, name: name, email: email };
});
default:
return state;
}
};
var store = createStore(rootReducer, applyMiddleware(thunk));
var fetchUsers = function fetchUsers() {
return function (dispatch) {
fetch('http://jsonplaceholder.typicode.com/users').then(function (response) {
return response.json();
}).then(function (payload) {
return dispatch({ type: 'RECIEVED_USERS', payload: payload });
});
};
};
var Row = function Row(_ref2) {
var id = _ref2.id;
var name = _ref2.name;
var email = _ref2.email;
return React.createElement(
'tr',
null,
React.createElement(
'td',
null,
id
),
React.createElement(
'td',
null,
name
),
React.createElement(
'td',
null,
email
)
);
};
var UsersTable = function UsersTable(props) {
var rows = props.state.map(function (user) {
return React.createElement(Row, user);
});
return React.createElement(
'div',
null,
React.createElement(
Table,
{ striped: true, bordered: true, condensed: true, hover: true },
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'Id'
),
React.createElement(
'th',
null,
'Name'
),
React.createElement(
'th',
null,
'Email'
)
)
),
React.createElement(
'tbody',
null,
rows
)
),
React.createElement(
'button',
{ onClick: props.fetchUsers },
'Get Users'
)
);
};
var mapStateToProps = function mapStateToProps(state, ownProps) {
return { state: state };
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchUsers: fetchUsers }, dispatch);
};
var App = connect(mapStateToProps, mapDispatchToProps)(UsersTable);
ReactDOM.render(React.createElement(
Provider,
{ store: store },
React.createElement(App, null)
), document.getElementById('root'));
</script>
<script id="jsbin-source-javascript" type="text/javascript">// UMD
const { createStore, applyMiddleware, bindActionCreators } = Redux;
const thunk = ReduxThunk.default;
const { connect, Provider } = ReactRedux;
const { Table } = ReactBootstrap;
const rootReducer = (state = [], action) => {
switch (action.type) {
case 'RECIEVED_USERS':
return action.payload.map(({ id, name, email }) => ({ id, name, email }));
default:
return state;
}
};
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
const fetchUsers = () => dispatch => {
fetch('http://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(payload => dispatch({ type: 'RECIEVED_USERS', payload }));
}
const Row = ({ id, name, email }) =>
<tr><td>{id}</td><td>{name}</td><td>{email}</td></tr>
const UsersTable = props => {
const rows = props.state.map(user => <Row {...user} />);
return (
<div>
<Table striped bordered condensed hover>
<thead>
<tr><th>Id</th><th>Name</th><th>Email</th></tr>
</thead>
<tbody>{rows}</tbody>
</Table>
<button onClick={props.fetchUsers}>Get Users</button>
</div>
);
}
const mapStateToProps = (state, ownProps) => ({ state });
const mapDispatchToProps = dispatch => bindActionCreators({ fetchUsers }, dispatch);
const App = connect(mapStateToProps, mapDispatchToProps)(UsersTable);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);</script></body>
</html>
Raw
jsbin.bufuxi.js
// UMD
'use strict';
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var bindActionCreators = _Redux.bindActionCreators;
var thunk = ReduxThunk['default'];
var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;
var Provider = _ReactRedux.Provider;
var _ReactBootstrap = ReactBootstrap;
var Table = _ReactBootstrap.Table;
var rootReducer = function rootReducer(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case 'RECIEVED_USERS':
return action.payload.map(function (_ref) {
var id = _ref.id;
var name = _ref.name;
var email = _ref.email;
return { id: id, name: name, email: email };
});
default:
return state;
}
};
var store = createStore(rootReducer, applyMiddleware(thunk));
var fetchUsers = function fetchUsers() {
return function (dispatch) {
fetch('http://jsonplaceholder.typicode.com/users').then(function (response) {
return response.json();
}).then(function (payload) {
return dispatch({ type: 'RECIEVED_USERS', payload: payload });
});
};
};
var Row = function Row(_ref2) {
var id = _ref2.id;
var name = _ref2.name;
var email = _ref2.email;
return React.createElement(
'tr',
null,
React.createElement(
'td',
null,
id
),
React.createElement(
'td',
null,
name
),
React.createElement(
'td',
null,
email
)
);
};
var UsersTable = function UsersTable(props) {
var rows = props.state.map(function (user) {
return React.createElement(Row, user);
});
return React.createElement(
'div',
null,
React.createElement(
Table,
{ striped: true, bordered: true, condensed: true, hover: true },
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'Id'
),
React.createElement(
'th',
null,
'Name'
),
React.createElement(
'th',
null,
'Email'
)
)
),
React.createElement(
'tbody',
null,
rows
)
),
React.createElement(
'button',
{ onClick: props.fetchUsers },
'Get Users'
)
);
};
var mapStateToProps = function mapStateToProps(state, ownProps) {
return { state: state };
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchUsers: fetchUsers }, dispatch);
};
var App = connect(mapStateToProps, mapDispatchToProps)(UsersTable);
ReactDOM.render(React.createElement(
Provider,
{ store: store },
React.createElement(App, null)
), document.getElementById('root'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment