jonidelv

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

If you dont want it to be global, just skip the global flag and you can set the git config just for your local projects

jonidelv

React patterns

Higher Order Components vs. Render props

Higher Order Components (HOCs)

Una funcion que recibe un componente y devuelve otro, agregandole cierto comportamiento.

Ejemplo

jonidelv

React performance considerations

These are some considerations to take into account when developing an application with React and Redux.

One of the most common performance failures in React is the unnecessary rendering of components. A library that can be very useful to detect this is why-did-you-update. Notifies you in the console when potentially unnecessary re-renders occur, super helpful for easy perf gains.

Another handy tool to measure performance is react-addons-perf.

Also remember to use shouldComponentUpdate() method in statefull components to check that the props of a component didn’t change and skip rendering (React by default render the component). We can use PureComponent instead of Component. This would compare all props using strict equality (===) and rerender only if any of the props change. If you want to achieve the same behavior but in a functional component I recommend you use `recom

jonidelv

Use of closures in React

How to make use of closures in React when handling events, to get some performance gains

Example 1

When we don't need the event, neither any parameter to be passed.

import React, { Component } from "react";
import ReactDOM from "react-dom";

jonidelv

Functional component to pure

Transform a React functional component into a Pure component without the need of using the class PureComponent from React

How many times have you transformed a simple functional component into a Class one because you needed to be Pure?

This adds more lines of code, and every line of code has a cost — to write, to debug, and to maintain.

jonidelv

Fragments in React

How to use React.Fragment or its shorthand <> to prevent the use of divs

In React, components could only display a single element that could contain other elements. So you colud't do this.

const MyName = props => {
  return (
    <h1>{props.name}</h1>
    <h2>{props.lastName}</h2>

jonidelv

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.

jonidelv

Redux Store

Best way to create the Redux store if we want to consume it from any JS file

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.

Creating the Store

jonidelv

React Events

Things to take into account when working with events in React

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.

Event Pooling

jonidelv

Refs, React and Redux

How to use Refs on diferentes escenarios and what to do when handling connected components to Redux

When working on a React & Redux project when have 3 diferents escenarios when using refs. But first...

What is it ?

Refs are a way of storing references to an object, these refenrences can be DOM nodes or class components. It provide