JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div id="app"></div>
const { createStore, bindActionCreators } = Redux;
const { Provider, connect } = ReactRedux;
const userList = [{id:1,name:"Leanne Graham",username:"Bret",email:"Sincere@april.biz",phone:"1-770-736-8031 x56442",website:"hildegard.org"},{id:2,name:"Ervin Howell",username:"Antonette",email:"Shanna@melissa.tv",phone:"010-692-6593 x09125",website:"anastasia.net"},{id:3,name:"Clementine Bauch",username:"Samantha",email:"Nathan@yesenia.net",phone:"1-463-123-4447",website:"ramiro.info"},{id:4,name:"Patricia Lebsack",username:"Karianne",email:"Julianne.OConner@kory.org",phone:"493-170-9623 x156",website:"kale.biz"},{id:5,name:"Chelsey Dietrich",username:"Kamren",email:"Lucio_Hettinger@annie.ca",phone:"(254)954-1289",website:"demarco.info"},{id:6,name:"Mrs. Dennis Schulist",username:"Leopoldo_Corkery",email:"Karley_Dach@jasper.info",phone:"1-477-935-8478 x6430",website:"ola.org"},{id:7,name:"Kurtis Weissnat",username:"Elwyn.Skiles",email:"Telly.Hoeger@billy.biz",phone:"210.067.6132",website:"elvis.io"},{id:8,name:"Nicholas Runolfsdottir V",username:"Maxime_Nienow",email:"Sherwood@rosamond.me",phone:"586.493.6943 x140",website:"jacynthe.com"},{id:9,name:"Glenna Reichert",username:"Delphine",email:"Chaim_McDermott@dana.io",phone:"(775)976-6794 x41206",website:"conrad.com"},{id:10,name:"Clementina DuBuque",username:"Moriah.Stanton",email:"Rey.Padberg@karina.biz",phone:"024-648-3804",website:"ambrose.net"}];
class App extends React.Component {
componentDidMount = () => {
this.props.getUsers();
}
handleChange = (event) => {
this.props.selectUser(event.target.value);
}
render() {
return (
<div>
<Select onChange={this.handleChange} userList={this.props.userList} />
<CurrentUser currentUser={this.props.currentUser} />
</div>
)
}
}
const Select = (props) => {
renderOptions = () => (
props.userList.map(user =>
<option value={user.id} key={`user-${user.id}`}>{user.name}</option>
)
)
return (
<select onChange={props.onChange} defaultValue="">
<option value="">Select an avatar</option>
{this.renderOptions()}
</select>
);
}
const CurrentUser = (props) => {
return (
<div>
<p>{props.currentUser && JSON.stringify(props.currentUser)}</p>
</div>
)
}
/* --- REDUCERS --- */
function reducer(state, action) {
switch (action.type) {
case "GET_USERS":
return {
...state,
userList: action.userList
}
case "SELECT_USER":
return {
...state,
currentUser: state.userList.find(user => user.id == action.currentUser)
}
default:
return state
}
};
/* --- ACTION CREATORS --- */
const actionCreators = {
getUsers: () => {
return {
type: "GET_USERS",
userList
}
},
selectUser: (currentUser) => {
return {
type: "SELECT_USER",
currentUser
}
}
};
/* --- STORE --- */
const preloadedState = {userList: [], currentUser: null};
const store = createStore(reducer, preloadedState);
/* --- CONNECT --- */
const AppContainer = connect(
function mapStateToProps(state, props) {
return {
userList: state.userList,
currentUser: state.currentUser
}
},
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
)(App);
/* --- RENDER THE APP --- */
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById("app")
);
Also see: Tab Triggers