My first ever NPM package has just reached the stage where I can proudly write something about it. This is a very simple React Native library – a customizable Picker that blurs the background and gives you a list of items rendered in the foreground. It supports callbacks and customised parts via renderProps. It has an example application too! There are some gotchas which I wanted to write about at some point and also there are plans to make it even quicker.
Tag: react
Periodic table of the modern software development
I spent some time over the weekend to ellaborate on what sort of tools we can use to fix delivery issues or even what tools we can use to set up a good project. This is part of my research on what makes one a great leader in software development. What makes a team great, agile, pragmatic yet flexible?
I cloned the Create React App repo and some other tools (Redux etc.) and put together a mini project to collect all the tools, skill set and methods that possibly or rather very likely we need to use in order to create value.
- The page: http://periodic.codegarage.net/
- The repo: https://github.com/joshycube/react-periodic-table
The elements in the periodic table are not exhaustive and I am looking to add more terms in the following weeks or months.
When to use some of the lifecycle methods in React
| componentDidMount | Add event listeners or any setup requires DOM | Can call setState() |
| componentWillReceiveProps(nextProps) | Act on certain prop changes e.g. redraw a Canvas | Can call setState() and access to this.props |
| componentDidUpdate | Updating a DOM after a prop or state change e.g. redraw Masonry grid | Can call setState() |
| componentWilUnmount | Cleaning up e.g. removing event listeners | Can call setState() |
React notes for myself (and for anyone who is interested)
Use bind
Do not do this {() => foo()} while you can do {this.foo.bind(this, bar)} even better you can create a helper to pick up all handler methods and fix the context.
1.) Where is my dispatch
You can always pass down the dispatch method as a prop!
export function mapDispatchToProps(dispatch) {
return {
dispatch,
onLoad: () => {
dispatch(foo());
}
}
}
2.) Nesting
You can do nested elements like:
<Parent>
{foo.map(item =>
<Child />
)}
</Parent>
and within the Parent
return (
<div className=”parent”>{children}</div>
)
3.) Reducer and Reselect
In the reducer
const reducers = combineReducers({
fooOne,
fooTwo,
});
… in the selector (Reselect)
const makeSelectFoo = () => createSelector(
selectFoo,
(stateFoo) => stateFoo[‘fooOne’][‘bar’]
);
4.) Modifying a child (via cloneElement)
renderChildren() {
return React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
name: this.props.name
})
})
}
5.) Destructuring in pure component
const myComponent = ({propertyOne, propertyTwo}) => { //this is instead of (props) then props.propertyOne }
6.) Rest and Spread
const myComponent = ({onClick, ...otherProperties}) => {
//this is instead of (props) then props.propertyOne
<Foo {...otherProperties}>
<Button onClick={onClick}>Click me</Button>
</Foo>
}