[react] react

react.MD

React.js

========================================================================

Resource used

• Redux-todomvs workflowy
• selector: for computed derived data

presentational vs container component

the component should be split into smart(container) and dump(presentational) components.

• presentational component is to render given data.
  • should not know about the Redux
  • should not know any unnecessary implementation detail of the data-layer, because we might want to replace it with something else in the future.
• container component prepares the data for the dump component, and preferably does no HTML rendering.

arrow function as method

handleChange = (event) => {...};
handleKeyPress = (event) => {...};

partial applicaton & closures

create function which will return another function, which will use argument/value from parent (partial application)

handleKeyPress = (item) => (event) => {
	e.preventDefault()
    
    if (e.nativeEvent.keyCode === 13) {
      console.log(`This is enter on item, which is called  ${item}!`)
    }
};

<MyInput onKeyPress={ (e) => handleKeyPress(item, e) } />

React vs Vue

Feature	Vue	React
compute derived data	computed: {}	const todosCounter = createSelector(arraz_of_selectors, transform_func)
class name mapping	:class={selected: isActive}	className={classnames({selected: isActive})}