webpack with babel6 and react
In this post we will walk through the basic setup to make babel6 work with webpack. Assuming you have installed webpack. On a high level, Babel has the following architecture. Click on the image...
Category: Reactjs
Generating container components with connect utility in react redux app
Presentational component specifies look of the component where as Container component specifies how the behavior of it. I would recommend reading Presentation vs container components. In well architected react-redux app, Container components have two...
Passing the store down implicitly via context in a react redux app
I am going to show you two different ways of passing the store object down from the parent component to the all the child component. Without using the reacts’ context feature With using the...
combineReducers in reduxjs explained
In applications where you use redux for your data management, you often combine mutiple reducers into a root reducer. Then root reducer is used to create the store. Redux ships with a utility function...
Pure vs Impure functions
Characterestics of Pure Functions The return value of the pure functions solely depends on its arguments Hence, if you call the pure functions with the same set of arguments, you will always get the...
Require the css file of a package using webpack
Recently I found myself wanting to use the react-select package and realized that I need to include the css that was present in its dist folder. My application is setup to use webpack along...
Pass props to the handler component in react-router
react-router has pretty much emerged as a clear winner when it comes to routing libraries for React. However, as you would have already noticed, there isint a very clear way on how to pass...
Uncaught TypeError: Cannot read property ‘toUpperCase’ of undefined in React
Ok, I gotta admit this is a really annoying issue because its root cause is pretty trivial. You get this issue in React when You are accidentally trying to render a component and that...
Pass down props using React childContextTypes in a deeply nested component tree
In our previous article on React childContextTypes we saw how React lets you accumulate props along a nested hierarchy. At the time of writing, I wasn’t aware that there is one more characteristic of...
Using context and childContext in React
When working with React in a deeply nested hierarchy, often times you will find yourself in a situation where you need to pass down props from the parent as is to the children and...