console.log() en React

console.log() es el método de referencia de los desarrolladores para depurar su código. Se utiliza para registrar valores de JavaScript en la consola. React no restringe el uso del método console.log(), pero debido a su sintaxis JSX especial, hay reglas que deben seguirse.

React Objeto console

El objeto console viene con una interfaz que contiene docenas de métodos de depuración. Puede encontrar la lista exacta de métodos en la página oficial MDN. Este artículo se centrará en el método más popular: console.log() y verá cómo aprovecharlo al máximo.

Registro en React

Hay numerosas formas de console.log() un valor en React. Si desea continuar registrando un valor cada vez que el componente se vuelve a renderizar, debe poner el método console.log() en la llamada render(). Así es como se vería esta implementación.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  render() {
    console.log('I log every time the state is updated');
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

Cada vez que ingresamos un nuevo valor en el elemento de texto <input>, el estado cambiará, lo que hará que el componente vuelva a renderizarse. Cada vez que lo haga, registrará el texto especificado en la consola.

Si desea console.log() un valor solo una vez, puede usar los métodos del bucle de vida de los componentes de la clase React. Así es como se vería el código real:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  componentDidMount(){
    console.log('I log only once');
  }
  render() {
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

Una vez que haya depurado su aplicación, asegúrese de eliminar todas las instancias de console.log() antes de salir del modo de desarrollo. Las declaraciones console.log() no agregan nada al modo de producción, por lo que deben eliminarse.

Personalización

Los desarrolladores de React pueden personalizar el estilo del método normal console.log(). Por ejemplo, si desea crear un mensaje especial para las tareas que requieren atención, puede crear un método personalizado console.attention basado en la funcionalidad principal de console.log().

Si agrega esta definición en cualquier lugar de su aplicación y llama al método console.important() con el argumento del mensaje, verá que su consola tendrá un mensaje de color.

console.important = function(text) {
console.log('%c important message', 'color: #913831')
}

Aquí hay un ejemplo de mensaje de consola en color: