Lo que desearía saber cuando comencé a trabajar con React.js

Después de su lanzamiento inicial el 29 de mayo de 2013, React.js se ha apoderado de Internet. No es un secreto que yo y muchos otros desarrolladores debemos su éxito a este increíble marco.

Con Medium tan lleno de tutoriales de React.js, desearía que uno de ellos me dijera estos consejos cuando comencé.

No necesita .bind (esto) cuando se usa la función de flecha

Por lo general, tendrá algo como esto cuando tenga un componente controlado:

class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); }
 handleClick(event){ // your event handling logic }
 render(){ return (  Click Me  ); }}

Escribes .bind(this)a todos los métodos que existen, porque la mayoría de los tutoriales te dicen que lo hagas. Si tiene varios componentes controlados, terminará con una gran pila de códigos en su constructor(){}.

En su lugar, puede:

class Foo extends React.Component{
 handleClick = (event) =>; { // your event handling logic }
 render(){ return (  Click Me  ); }}

¿Cómo?

La función de flecha de ES6 usa Lexical Scoping, que permite que el método acceda al lugar thisdonde se activa.

Cuando los trabajadores del servicio trabajan en su contra

Los trabajadores del servicio son excelentes para una aplicación web progresiva, que permite el acceso sin conexión y se optimiza para usuarios con conexiones a Internet deficientes.

Pero cuando no se da cuenta de que el trabajador del servicio está almacenando en caché sus archivos estáticos, implementa sus revisiones repetidamente.

Solo para descubrir que su sitio no se actualiza. ?

No entre en pánico, asegúrese de src/index.js:

// Make sure it's set to unregisterserviceWorker.unregister();

A partir de la versión 16.8, esta línea debería ser la serverWorker.unregister()predeterminada.

Pero si deciden cambiar de nuevo, sabrá dónde buscar.

El 99% del tiempo no es necesario expulsar

Create React App ofrece una opción a yarn ejectsu proyecto para personalizar su proceso de construcción.

Recuerdo que intenté personalizar el proceso de compilación para que las imágenes SVG se alinearan automáticamente en nuestro código. Pasé horas tratando de comprender el proceso de construcción. Terminamos teniendo un archivo de importación que inyecta etiquetas SVG, y aumentamos la velocidad de carga del sitio en 0.0001 milisegundos.

Expulsar su proyecto React es como abrir el capó de su automóvil en marcha y cambiar el motor sobre la marcha para que funcione un 1% más rápido.

Por supuesto, si ya es un maestro de Webpack, vale la pena personalizar el proceso de compilación para adaptarlo a las necesidades del proyecto.

Cuando intente entregar a tiempo, concentre su esfuerzo en dónde mueve la aguja hacia adelante.

ESlint Auto Fix On Save ahorra mucho tiempo

Es posible que haya copiado algún código de algún lugar que tiene un formato fuera de control. Debido a que no puede soportar lo feo que se ve, pasa tiempo agregando espacios manualmente.

Con ESLint y Visual Studio Code Plugin, puede solucionarlo al guardar.

¿Cómo?

  1. En su package.json, agregue algunas dependencias de desarrollo y haga npm io yarn:
"devDependencies": {
 "eslint-config-airbnb": "^17.1.0",
 "eslint-config-prettier": "^3.1.0",
 "eslint-plugin-import": "^2.14.0",
 "eslint-plugin-jsx-a11y": "^6.1.1",
 "eslint-plugin-prettier": "^3.0.0",
 "eslint-plugin-react": "^7.11.0"
}

2. Instale la extensión ESLint

3. Habilite la corrección automática al guardar

No necesita Redux, componentes con estilo, etc.

Cada herramienta tiene su propósito. Dicho esto, es bueno conocer las diferentes herramientas.

Si todo lo que tienes es un martillo, todo parece un clavo - Abraham Maslow

Debe pensar en el tiempo de configuración de algunas de las bibliotecas que usa y compararlo con:

  • ¿Cuál es el problema que estoy tratando de resolver?
  • ¿Este proyecto vivirá lo suficiente para beneficiarse de esta biblioteca?
  • ¿React ya ofrece algo listo para usar?

Con Context y Hooks disponibles para React ahora, ¿todavía necesitas Redux?

Recomiendo encarecidamente Redux Offline para cuando sus usuarios se encuentran en un entorno de conexión a Internet deficiente.

Reuse event handler

If you don’t feel like typing the same thing over and over again, reusing an event handler could be an option:

class App extends Component {
 constructor(props) { super(props); this.state = { foo: "", bar: "", }; }
 // Reusable for all inputs onChange = e => { const { target: { value, name }, } = e; // name will be the state name this.setState({ [name]: value });
 }; render() { return ( ); }}

setState is asynchronous

The naïve me would write something like:

 constructor(props) { super(props); this.state = { isFiltered: false }; }
 toggleFilter = () => { this.setState({ isFiltered: !this.state.isFiltered }); this.filterData(); }; filterData = () => { // this.state.isFiltered should be true, but it's not if (this.state.isFiltered) { // Do some filtering } };

Option 1: Passing the state down

toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState);};
filterData = (currentFilterState) => { if (currentFilterState) { // Do some filtering }};

Option 2: The secondary function to the callback of setState

toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); });};
filterData = () => { if (this.state.isFiltered) { // Do some filtering }};

Conclusion

These tips saved me a lot of time, and I am sure there are more. Please feel free to share them in the comments section.

If you are looking to integrate your website with WeChat and reach 1+ billion users in China, sign up for a free glossary for commonly used WeChat terms.