Linter y buenas prácticas con ESLint

Clase 33 de 58 • Curso Profesional de React con Redux 2016

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

Resumen

Un Linter es una herramienta que lee nuestro código y nos arroja sugerencias de acuerdo a ciertas reglas.

Primero instalar el linter con npm i -D eslint
Instalamos las reglas para el linter con npm i -D eslint-config-airbnb
Instalamos las librerías necesarias con npm i -D eslint-plugin-import@^2.1.0 eslint-plugin-react@^6.6.0 eslint-plugin-jsx-a11y@^2.2.3

Instalamos soporte para ES2015 en el linter

npm i -D babel-eslint
npm i -D eslint-loader

Instalar en atom linter-eslint con apm install linter-eslint

Comentarios

Markoz Peña Mendez

student•

Les dejo un link donde te explican las 4 formas de configurar eslint, en caso de que en este video no les funcione 😃

David Camacho

student•

Para los que usan Sublime y quieren instalar eslint :

Juan Castro

teacher•

En la descripción del video esta repetida la instalación de eslint-plugin-import@^2.1.0, y falta la dependencia de react: eslint-plugin-react@^6.6.0

Yeison Daza

student•

Corregido, gracias 😃

Juan Castro

teacher•

😄

Manuel Galindez

student•

Porque será que me da problemas con los PropTypes?

Post.propTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.object,
  ),
};

Me dice propType is not required, but has no corresponding defaultProp declaration

Sergio Daniel Xalambrí

student•

Lo que dice es que definiste un propType que no es obligatorio, pero tampoco definiste un valor por defecto en caso de no llegar.

Para definir un valor por defecto lo haces con:

Post.defaultProps = {
	comments: [],
};

De esa forma si comments no llega es un array vacío. Y si querés definirlo como obligatorio usa .isRequired al final del prop.

PropTypes.number.isRequired

Manuel Galindez

student•

Perfecto sergio muchisimas gracias.

Bryam Rodriguez

student•

Por si han tenido el mismo problema que yo, ya no se agrega el array preLoaders, si no que se agrega dentro de los mismos loaders con otra propiedad más. El eslint quedaría algo así:

loaders: [
      {
        test: /\.jsx?$/,
        loader: 'eslint-loader',
        enforce: 'pre'
      },

Simón Ottoniel González Acosta

student•

Perfect bro gracias me soluciono. Ahora tengo una duda con el atributo “rules” en el tambien se pueden incluir los loaders ?

Jonathan Herrera

student•

Estuve haciendo los cambios y todo perfecto pero al momento de poner las validaciones con los propTypes para post, me aparece un error en consola donde me dice que la validación de usuario no es valida, esto se debe a que que lo escribo como requerido falla por que al principio user es indefinido.

Pero si le agrego un valor por defecto con defaultProps se queda en blanco al cargar el Post!

Mi código esta así actualmente

Post.propTypes = {
  id: PropTypes.number.isRequired,
  userId: PropTypes.number.isRequired,
  title: PropTypes.string,
  body: PropTypes.string,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.object,
  ),
};

Post.defaultProps = {
  title: '',
  body: '',
  user: {
    name: '',
  },
  comments: [],
};

entonces me aparecen los comentarios a 0 y el usuario en blanco.
PD. me estaba funcionando todo bien! pero últimamente mi internet esta bastante lento, y empezó a pasar eso.

Javier Alejandro Perez Fernandez

student•

@JonaHerre @sergiodxa Tengo exactamente el mismo problema tambien defini los defaultProps y dejo de funcionar el user es indefinido y los coments en 0 AYUDA!!

Fran Delgado

student•

A mi me pasa igual que a vosotros dos. Alguien ha logrado solucionarlo?

Gracias de antemano.

Bryam Rodriguez

student•

Otro dato: Para los que tengan el problema configuration[0].resolve.extensions[0] should not be empty.

Es necesario quitar el string vacio de resolver.extensions. Quedaría así:

extensions: ['.js', '.jsx', '.css'],

EdwinDeLeonG

student•

Buenas… Estoy usando Sublime Text 3, pero no me salen los error en el editor, aunque cuando ejecuto webpack si me salen los errores de los archivos, por lo que supongo que a sublime text le falta algún plugin para mostrar los errores, sabe alguien que le debo agregar a mi sublime text 3 para que muestre los errores?

Sergio Daniel Xalambrí

student•

Tenés que instalar 2 plugins, el primero es SublimeLinter y el segundo es SublimeLinter-contrib-eslint luego tienes que seguir la documentación del segundo para ver como configurarlo.

Rodrigo Burgos S.

student•

Instalé ambos plugins y nada…

EdwinDeLeonG

student•

Para los que usan Windows y les ha salido “Expected linebreaks to be ‘LF’ but found ‘CRLF’ linebreak-style” al correr webpack, estuve investigando y para que no salga agregue esto en la primera linea de cada archivo en el que salia el error

/* eslint linebreak-style: [“error”, “windows”] */

y la segunda linea vacia.
No se si hay una forma global de hacer esto, pero mientras tanto asi fue como resolvi.

Sergio Daniel Xalambrí

student•

Es algo en la configuración del editor, en atom al abrir un archivo en la barra de abajo van a ver que dice CRLF, al hacerle click pueden cambiarlo por LF.

Seguro en otros editores se puede cambiar en algún lado también.

EdwinDeLeonG

student•

Profesor, a partir de la actualizacion de esta clase, ya no me cargan los comentarios, me sale este error
Failed prop type: Property comments of component Post has invalid PropType notation inside arrayOf

Que se debe cambiar para que vuelvan a cargar?

Sergio Daniel Xalambrí

student•

Ese error ocurre porque están mal definidos los propTypes, deberías tener algo así:

Post.propTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
  loading: PropTypes.bool,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.objects,
  ),
};

EdwinDeLeonG

student•

Asi es como lo tengo… Algo debe estar mal, o faltar, porque ya no sale ni el autor, ni la cantidad de comentarios que tiene el post.
Asi es como tengo el archivo source/posts/containers/Post.jsx

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import api from '../../api';

import styles from './Post.css';

class Post extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      user: props.user || null,
      comments: props.comments || null,
    };
  }

  componentDidMount() {
    this.initialFetch();
  }

  async initialFetch() {
    if (!!this.state.user && !!this.state.comments) return this.setState({ loading: false });
    const [
      user,
      comments,
    ] = await Promise.all([
      !this.state.user ? api.users.getSingle(this.props.userId) : Promise.resolve(null),
      !this.state.comments ? api.posts.getComments(this.props.id) : Promise.resolve(null),
    ]);

    return this.setState({
      loading: false,
      user: user || this.state.user,
      comments: comments || this.state.comments,
    });
  }
  render() {
    return (
      <article id={`post-${this.props.id}`} className={styles.post}>
        <h2 className={styles.title}>
          <Link to={`/posts/${this.props.id}`} >
            {this.props.title}
          </Link>
        </h2>
        <p className={styles.body}>
          {this.props.body}
        </p>
        {this.props.loading && (
          <div className={styles.meta}>
            <Link to={`/user/${this.state.user.id}`} className={styles.user}>
              {this.state.user.name}
            </Link>
            <span className={styles.comments}>
              hay {this.state.comments.length} comentarios
            </span>
          </div>
        )}
      </article>
    );
  }
}

Post.propTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
  loading: PropTypes.bool,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.objects,
  ),
};

export default Post;

Miguel Rivas

student•

Buenas sergiodxa, webpack me tira error de no poder resolver el fichero Page, y por eso luego no puede hacer built del index.js (npm run bff)

ERROR in ./source/client.jsx
Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./pages/containers/Page in /Platzi/FrontEnd/React/ProjectNewsPaper/source
@ ./source/client.jsx 11:12-46

Miguel Rivas

student•

Buenas @sergiodxa, webpack me tira error, no puede encontrar o resolver el fichero Page y por eso no me hace el built luego del index.js
(npm run bbf)

________________________________________________ERROR webpack -w __________________________________________
ERROR in ./source/client.jsx
Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./pages/containers/Page in /Platzi/FrontEnd/React/ProjectNewsPaper/source
@ ./source/client.jsx 11:12-46

_________________________________________________ERROR: npm run bbf ___________________________________________
var _Page = webpack_require(!(function webpackMissingModule() { var e = new Error(“Cannot find module “./pages/containers/Page””); e.code = ‘MODULE_NOT_FOUND’; throw e; }()));
^

Error: Cannot find module "./pages/containers/Page"
at webpackMissingModule (/Users/maikol/Platzi/FrontEnd/React/ProjectNewsPaper/built/server/index.js:61:78)

Miguel Rivas

student•

SOLUCIONADO, era mirar el video entero -_- , mala mia ✋🏽

KaMi lml

student•

Cómo haces para dividir así tu línea de comandos?

Sergio Daniel Xalambrí

student•

cmd+D para dividirla verticalmente y cmd+shitf+d para dividirla horizontalmente.

KaMi lml

student•

se puede hacer en ubuntu, kali o windows?

Bryam Rodriguez

student•

Al cargar la aplicación me sale el mensaje 'Warning: Failed prop type: The prop user is marked as required in Post, but its value is undefined’ pero funciona normal. Debería hacer algo más?

Sergio Daniel Xalambrí

student•

El error dice que un prop que marcaste como requerido no esta llegando, la aplicación se va a romper seguramente, pero deberías revisar por qué ese prop no llega y si en realidad es requerido o no.

Rodrigo Burgos S.

student•

En este video aparecen dos archivos “Title.jsx y .css”, pero en el video anterior nunca los hicimos, ¿cómo adivinamos que archivos son?

Sergio Daniel Xalambrí

student•

No los mostramos para no ser redundantes ya que es un componente muy simples, Title es un componente que contiene el título y recibe como hijo el texto así lo podés usar de esta forma:

<Title>
	Mi título
</Title>

No hace nada más y se usa solo pare evitar duplicar los estilos del título en cada página, en los archivos del curso lo encontrás.

Geordan Sanchez

student•

El linter me indica un error:
Elements with ARIA roles must use a valid, non-abstract ARIA role.

Tambien indica una pagina que dirije a github

Podrias explicar eso del ARIA roles?

function Pages() {
  return (
    <main role="aplication">
      <Header />
      <Switch>

Sergio Daniel Xalambrí

student•

ARIA tiene que ver con accesibilidad, definir cual es el rol de un elemento dentro de una página, por ejemplo ahí estás diciendo que el rol de <main> es ser la aplicación.

Por cierto, el error es porque es application no aplication.

Más info:

Geordan Sanchez

student•

ajaja! no me habia fijado, de todas maneras gracias por la aclaracion, ya que nunca habia escuchado de Accesibilidad y menos ARIA (y)

Miguel Romero

student•

Estoy con trabajando con las nuevas versiones…
Me sale este error en source/pages/Post.jsx

async componentDidMount() { const [ post, comments, ] = await Promise.all([ api.posts.getSingle(this.props.match.params.id), api.posts.getComments(this.props.++match++.params.id), ]);

[ESlint] ‘match’ is missing in props validation (react/prop-types)

Simón Ottoniel González Acosta

student•

Hola bro bueno buscando encontre que ‘match’ tambien se debe definir en los PropsTypes de la pagina ‘Post’ y me funciono de la siguiente manera: ( en source/pages/containers/Post.jsx )

Post.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.number.isRequired,
    }),
  }).isRequired,
};

Por favor si encuentran algun aporte mas avisen por fa 😃 Saludos

Miguel Romero

student•

En los lugares donde quite la extension .jsx me sale este error en webpack:

ERROR in ./source/server.jsx
Module not found: Error: Can’t resolve ‘./pages/containers/Page’ in ‘/home/migu3lr/proyecto/source’
@ ./source/server.jsx 15:12-46

Pablo Schonwiesner

student•

no te olvides de lo siguiente en la configuracion de webpack, tanto en cliente como servidor:
si es Webpack version 1.x
resolve: {
extensions: [’’, ‘.js’, ‘.jsx’, ‘.css’],
},
si es webpack version 2.x
resolve: {
extensions: [’.js’, ‘.jsx’, ‘.css’],
},

Diego José Molina Gonzalez

student•

Gracias por tu aporte!

Devels yaencontre

student•

Hola!

me da el siguiente error al correr webpack:

ERROR in ./source/client.js
Module build failed: Error: Failed to load plugin jsx-ally: Cannot find module ‘eslint-plugin-jsx-ally’

tengo instalado:
“eslint”: “^3.19.0”,
“eslint-config-airbnb”: “^15.0.1”,
“eslint-loader”: “^1.7.1”,
“eslint-plugin-import”: “^2.3.0”,
“eslint-plugin-jsx-a11y”: “^5.0.3”,
“eslint-plugin-react”: “^7.0.1”,
“json-loader”: “^0.5.4”,

Alguna idea?

Devels yaencontre

student•

ya está solucionado.

Juan Carlos Correa Herrera

student•

Lo de componentDidMount, es verdad que te renderiza dos veces, por eso tenemos que hacer condiciones para el render si loading es true o false. Entonces, está marcando ese error, ¿Deberíamos dejar de hacer setState en componentDidMount? ¿Y si lo que hacemos en componentDidMount lo hacemos en constructor para que no haga render dos veces?

Sergio Daniel Xalambrí

student•

Si hacemos peticiones AJAX en el constructor se van a ejecutar al hacer server render, el problema entonces es que React no va a esperar que estas peticiones se completen para seguir con el ciclo de vida y hacer render, entonces no nos sirve hacer AJAX ahí, de hecho la misma documentación de React recomienda no hacer peticiones AJAX en el constructor y en componentWillMount.

Juan Carlos Correa Herrera

student•

Gracias por tu pronta respuesta. Entonces si lo hacemos en componentWillMount no haría render dos veces, pero podría afectar a la memoria del servidor, ¿Por lo tanto es preferible que haga doble render a una afectación en memoria?

Estaría bien agregar un tutorial sobre una manipulación con todas las fases del ciclo de vida de los componentes y así el programador tenga mejor criterio para aplicar su lógica en el frontend 😄

Post.propTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.object,
  ),
};

Post.propTypes = {
  id: PropTypes.number.isRequired,
  userId: PropTypes.number.isRequired,
  title: PropTypes.string,
  body: PropTypes.string,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.object,
  ),
};

Post.defaultProps = {
  title: '',
  body: '',
  user: {
    name: '',
  },
  comments: [],
};

Post.propTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
  loading: PropTypes.bool,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.objects,
  ),
};

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import api from '../../api';

import styles from './Post.css';

class Post extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      user: props.user || null,
      comments: props.comments || null,
    };
  }

  componentDidMount() {
    this.initialFetch();
  }

  async initialFetch() {
    if (!!this.state.user && !!this.state.comments) return this.setState({ loading: false });
    const [
      user,
      comments,
    ] = await Promise.all([
      !this.state.user ? api.users.getSingle(this.props.userId) : Promise.resolve(null),
      !this.state.comments ? api.posts.getComments(this.props.id) : Promise.resolve(null),
    ]);

    return this.setState({
      loading: false,
      user: user || this.state.user,
      comments: comments || this.state.comments,
    });
  }
  render() {
    return (
      <article id={`post-${this.props.id}`} className={styles.post}>
        <h2 className={styles.title}>
          <Link to={`/posts/${this.props.id}`} >
            {this.props.title}
          </Link>
        </h2>
        <p className={styles.body}>
          {this.props.body}
        </p>
        {this.props.loading && (
          <div className={styles.meta}>
            <Link to={`/user/${this.state.user.id}`} className={styles.user}>
              {this.state.user.name}
            </Link>
            <span className={styles.comments}>
              hay {this.state.comments.length} comentarios
            </span>
          </div>
        )}
      </article>
    );
  }
}

Post.propTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
  loading: PropTypes.bool,
  user: PropTypes.shape({
    name: PropTypes.string,
  }),
  comments: PropTypes.arrayOf(
    PropTypes.objects,
  ),
};

export default Post;

Linter y buenas prácticas con ESLint

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules