Skip to content

Instantly share code, notes, and snippets.

View oreqizer's full-sized avatar
💪
Gainz o'clock

Boris oreqizer

💪
Gainz o'clock
View GitHub Profile
@oreqizer
oreqizer / TodoItem.jsx
Created December 1, 2016 14:21
An example of a dumb component.
import React, { PropTypes, PureComponent } from 'react';
import Todo from '../../../universal/containers/Todo';
const doneStyle = {
textDecoration: 'line-through',
};
const notDoneStyle = {
@oreqizer
oreqizer / Contextful.jsx
Last active December 1, 2016 17:09
An example of a simple component connected to Redux store.
import React from 'react';
import { connect } from 'react-redux';
import { injectIntl } from 'react-intl';
import messages from './messages';
const TodoList = props => (
<div className="TodoList">
<h3>{props.intl.formatMessage(message.listHeader)}</h3>
{props.todos.map(todo => (
@oreqizer
oreqizer / Contextless.jsx
Created December 1, 2016 17:11
An example of a nice, independent component.
// @flow
import React from 'react';
import Todo from '../containers/Todo';
type Props = {
header: string,
todos: Todo[],
}
@oreqizer
oreqizer / CountryIcon.jsx
Last active December 2, 2016 12:48
A sample 'shouldComponentUpdate' function.
// ... code
shouldComponentUpdate(nextProps) {
const { geo, ...rest } = this.props;
const geoOk = geo.lat === nextProps.geo.lat && geo.lon === nextProps.geo.lon;
return !(geoOk && Object.keys(rest)
.reduce((acc, key) => acc && rest[key] === nextProps[key], true));
}
// ... code
@oreqizer
oreqizer / CleanComponents.jsx
Last active December 2, 2016 13:02
An example of logic-less components.
import React, { Component } from 'react';
const FnComponent = props => (
// ...your JSX
);
class ClassComponent extends Component {
// ...lifecycle hooks
// ...handlers
@oreqizer
oreqizer / Todos.jsx
Created December 2, 2016 13:24
An example how to use a selector.
// ...your component
export default connect((state, props) => ({
todos: todosSelector(state, props),
}), todoActions)(Todos);
@oreqizer
oreqizer / SelectedTodos.jsx
Created December 2, 2016 13:37
An example of a context-less component with a selector.
// @flow
import React from 'react';
import Todo from '../containers/Todo';
import todoSelector from './todoSelector';
type Props = {
filter: string,
header: string,
@oreqizer
oreqizer / DumbTodo.jsx
Created December 2, 2016 13:58
An example of a very dumb todo component.
import React from 'react';
import Todo from '../../../universal/containers/Todo';
const doneStyle = {
textDecoration: 'line-through',
};
const notDoneStyle = {
textDecoration: 'none',
@oreqizer
oreqizer / Todos.jsx
Last active December 6, 2016 12:20
An example of a smart component.
import React, { PureComponent, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { List } from 'immutable';
import TodoItem from './TodoItem';
import TodosForm from './TodosForm';
import todosSelector from './todosSelector';
import * as todoActions from '../../../universal/modules/todo/todoDuck';

Keybase proof

I hereby claim:

  • I am oreqizer on github.
  • I am oreqizer (https://keybase.io/oreqizer) on keybase.
  • I have a public key whose fingerprint is 6381 B42B 3743 FEA9 113E AAB2 D314 812A 32E0 151E

To claim this, I am signing this object: