Skip to content

Instantly share code, notes, and snippets.

@artivilla
Last active June 8, 2022 06:11
Show Gist options
  • Save artivilla/ba1408aece35feb98e97c5aa2425e4e6 to your computer and use it in GitHub Desktop.
Save artivilla/ba1408aece35feb98e97c5aa2425e4e6 to your computer and use it in GitHub Desktop.
Snippets
Array mutations returning a new array
Adding item to an array (list, item)
return [...list, item];
Remove item from index (list, index)
return list
.slice(0,index).concat(list.slice(index+1));
return [...list.slice(0, index),
...list.slice(index+1)];
Incrementing array (list, index)
return [...list.slice(0, index),list[index]+1, ...list.slice(index+1)];
class Country extends React.Component {
constructor(props) {
super(props);
this.state = {loading: true, error: null, country: null};
}
componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, country: value}),
error => this.setState({loading: false, error: error}));
}
render() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var iso = this.state.country.iso;
var name = this.state.country.name;
return (
<span className="country">
<span className={"flag-icon flag-icon-"+iso}/>
<span className="country-name">{name}</span>
</span>
);
}
}
}
// same as setting in babel plugins
<script
type="text/babel"
data-plugins="transform-class-properties"
src="./js/app.js"
></script>
Object mutations
Toggle todo, (todo)
return Object.assign({}, ...todo, completed: !todo.completed};
If objects have same properties, the rightmost will override the previous source. The first args is returned with merged sources.
// component did update() alternative for es6
class EmbedModal extends React.Component {
constructor(props) {
super(props);
// Operations usually carried out in componentWillMount go here
}
}
//class property initializers for es7
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}
state = {
loopsRemaining: this.props.maxLoops,
}
}
//dynamically setting setState using template strings
class Form extends React.Component {
onChange(inputName, e) {
this.setState({
[`${inputName}Value`]: e.target.value,
});
}
}
1. Redux is a state tree for the application.
2. State is read-only. Any change you make fires an action (javascript object) {type: ACTION_NAME, ...action}.
3. Pure fuctions with no side effects meaning they don't fetch anything, the value that is returned is always the same given the same input. Mindful of pure functions.
4. Reducer function: state mutation functions are pure functions: (state, action) => state
How to view and change what's in store?
Redux Store methods
store.getState();
store.dispatch({type: 'SOME_ACTION', action});
store.getState();
Cb that will be called once an action has been dispatched. Doesn't fire the first time so the intial call won't be logged.
store.subscribe(() => {
document.body.innerText = store.getStore();
});
//Building a range using JS
//Array(5) will build an array with undefined slots but can't be iterated on using array funcs.
`Array.from({length: 5}, (v, i) => i);`
or
`[...Array(5).keys()]`
or
`Array.apply(null, Array(5))
or
`Array.from(Array(5)).map((v,i) => i)`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment