Tag: react

Hello TydligVal a.k.a. ClearChoice

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.

Periodic table of the modern software development

React App (1)

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 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>
}