@espen_dev
@esphen
Components are the primary unit of code reuse in React
// SomeComponent.js
import React from 'react';
import Loading from './LoadingComponent';
export default props => {
if (props.loading) <Loading />;
return <div>{props.data}</div>;
};
// LoadingComponent.js
import React from 'react';
export default () => <i className="fa fa-spinner fa-spin" />;
Use HOCs For Cross-Cutting Concerns
a higher-order component is a function that takes a component and returns a new component
const EnhancedComponent = higherOrderComponent(WrappedComponent);
import React from 'react';
import { compose } from 'recompose';
import fetch from 'fetch-hoc';
import { withLoading, withError } from './loading';
export const FooComponent props => (
<div>{props.data}</div>
);
export default compose(
fetch('/some/data'),
withLoading,
withError('Failed to fetch that stuff'),
)(FooComponent);
Component can focus on rendering the data
export const FooComponent props => <div>{props.data}</div>;
// react-apollo
export const GraphQLComponent = graphql(gql`
query MyQuery {
todos { text }
}
`)(FooComponent);
// react-router
export const ReactRouterComponent = withRouter(FooComponent);
// recompose
export const StatefulFunctionalComponent = compose(
withState('count', 'setCount', 0),
withHandlers({
incrementCount: props => () => {
props.setCount(props.count + 1);
},
}),
)(FooComponent);
// redux & fetch-hoc
export const ComponentWithData = fetch(
connect(state => ({ userId: state.user.id })),
fetch(props => `/user/${props.userId}/cart`),
)(FooComponent);
an API that makes many tasks related to creating and parsing strings simple
var person = 'Mike';
var age = 28;
function myTag(strings, personExp, ageExp) {
var str0 = strings[0]; // "that "
var str1 = strings[1]; // " is a "
var ageStr;
if (ageExp > 99){
ageStr = 'centenarian';
} else {
ageStr = 'youngster';
}
return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${person} is a ${age}`;
console.log(output);
// that Mike is a youngster
import React from 'react';
import f from 'format';
export const Texts = props => (
f`Hello ${props.name}, you have ${props.amount}:cur(NOK) in your bank account.`
);
export const UserInfo = props => (
<ul>
<li>{f`Username: ${props.username}:uid`}</li>
<li>{f`You have ${props.pets}:num unread messages`}</li>
</ul>
);
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
color: white;
/* "Change styling" based on props */
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
export default () => [
<Button />
<Button primary />
];
import React from 'react';
const selectFruit = () => {
alert(__('You selected a fruit. Good on you!'));
};
export default props => (
<form onSubmit={selectFruit}>
{__('Choose fruit')}
<input type="text" placeholder={__('Fruit')} />
</form>
);
slides.com/esphen/alternate-patterns-for-reusability