React does not have computed properties out of the box like others frameworks do (Ember, Vue, etc.) so, how can we achieve this behaviour the right way ? The most common practice is to "compute" things in the render method if is a class component or just in the body if is a function component.
React v16 introduced a new feature called portals. Portals provide a quick and easy way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. React render the entire app under a single DOM node — the app root. But what if you want to render children outside the root DOM node? that's when you use Portals.
These are common Javascript patterns but what is the "right way" to use them with React specially in JSX.
Destructuring was added back in 2015. So you migt be familiar by now
When working on a React & Redux project when have 3 diferents escenarios when using refs. But first...
Refs are a way of storing references to an object, these refenrences can be DOM nodes or class components. It provide
When working with DOM events, we have to take care of React's event pooling. Let's explain better what it is: React use a cross-browser wrapper around the browser’s native events called SyntheticEvent. With this wrapper events work identically across all browsers.
When creating the store in a React-redux app there are differents ways to doit, here is the simple one that allow you to consume the sotre from anywhere. What I mean by that is be able to see the store, dispatch actions and even suscribe to changes from any JS file outside React.
Why do we use the constructor
in React ES6 class components ?
Basically for 2 things:
- For initialize our state with data (sometimes data that is passed through props).
- For biding methods (which you shouldn't be doing, because of the new ES6 arrow function that don't create a new scope, so the
this
is "already binded").
What if I tell you that using the constructor
is not longer necessary because of this class proposal that at the moment is in stage 3.