¿Qué hay de nuevo en Create React App 2.0?

Aquellos que no saben que create-react-app es la CLI o la herramienta de interfaz de línea de comandos que se usa para generar aplicaciones React y simplemente hace las cosas mucho más fáciles en lugar de establecer su propia configuración de paquete web.

Actualización del paquete:

• babel 7
• paquete web 4
• broma 23

Babel: La compatibilidad de los navegadores con las características modernas de JavaScript ha mejorado recientemente, pero nunca será perfecta. Podemos parchear polyfills o usar un pequeño script de shell para reescribir nuestro código, pero son propensos a romperse y generar código inactivo. Babel es una solución a este problema al tomar JavaScript moderno y compilarlo en una forma que pueda entenderse en diferentes entornos. Babel se basa en un sistema de complementos que analiza nuestro JavaScript moderno en un árbol de sintaxis abstracta o AST y lo reescribe en una versión que puede ser interpretada por nuestro navegador. Para configurar esto, instale el paquete babel CLI y guárdelo como una dependencia de desarrollo.

npm install --save-dev babel-cli

En otras palabras, se usa para compilar funciones más nuevas de es6 plus de JavaScript para usar en todos los navegadores. La versión 7 de Babel es más rápida que las versiones anteriores ya que tiene algunas características nuevas que se han agregado. 

Webpack: es un generador de módulos, es decir, webpack es una herramienta que usamos durante el desarrollo de nuestro código y se usa durante el tiempo de ejecución de nuestros activos. El paquete web no solo crea su código, sino que también lo administra. Nos permite crear aplicaciones web increíbles que administran todos nuestros archivos de estilo y JavaScript principalmente, pero no se limitan a eso. 
 

Webpack se utiliza para la agrupación.

Jest: Jest se utiliza para realizar pruebas e incluye nuevas funciones, como el modo de instantánea interactiva y coincidencias personalizadas. ¡Jest trabaja con proyectos usando: Babel, TypeScript, Node, React, Angular, Vue y más!

• La versión 1 de create-react-app tenía integración con sass, pero era necesario realizar alguna configuración adicional. Con la versión 2, simplemente podemos instalar «node-sass» y podemos cambiar el nombre de nuestros archivos .CSS a .SCSS. Entonces hace que trabajar con sass sea más fácil.
• Los módulos de CSS nos permiten usar las mismas clases de CSS en diferentes archivos sin tener que preocuparnos por conflictos o problemas. Los módulos CSS funcionan de inmediato con la aplicación Create React, por lo que puede importar el módulo usando la sintaxis como se muestra, [Nombre].module.scss o [Name].module.css .
• Entonces, además de la integración de sass y los módulos CSS, también tenemos paquetes de CSS más pequeños, podemos apuntar a los navegadores modernos con nuestro archivo package.json en la especificación de la lista del navegador. Por lo tanto, podemos ajustar nuestros estilos para apuntar solo al prefijo WebKit o al prefijo MS cuando sea necesario.

paquete.json:

{
"name": "my-project",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.3"
},
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}
}

• También se ha agregado Post CSS para crear una aplicación de reacción.
• Entonces, si usó la versión 2, lo primero que probablemente notó fue el cambio en la página de destino, que ahora tiene un aspecto más simple y más limpio o una página más limpia, como se muestra a continuación:

• También ha habido cambios en la forma en que se implementan los trabajadores de servicios. La versión 2 ahora usa la caja de trabajo de Google, que es un conjunto de bibliotecas para almacenar en caché activos fuera de línea y trabajar con trabajadores de servicios de una manera más elegante que sw-precache y nos facilitará la tarea. crear aplicaciones web progresivas utilizando la biblioteca React.
• Ahora hay soporte adicional para configurar nuestro propio proxy con express y una aplicación de pila completa, por lo que podemos usar como el módulo de middleware de proxy HTTP y luego crear un archivo en su cliente en su aplicación React dentro de la carpeta de origen llamada setupProxy.js en lugar que definir un objeto proxy como lo haríamos antes.
• Ahora podemos usar paquetes escritos para las últimas versiones de Node.
• Ahora podemos importar un SVG como componente de React, a diferencia de antes, donde importamos un SVG y lo agregamos al atributo de origen de una imagen, pero ahora solo podemos importarlo y usarlo como un componente real.
• También hay algo llamado yarn plug-n-play, por lo general, cuando ejecutamos yarn install , todos nuestros paquetes se instalan y luego se almacenan en caché dentro de la carpeta de módulos del Node con plug-n-play en lugar de hacer eso, un nuevo archivo que contiene estático Se crean las tablas de resolución y este archivo contiene qué paquetes están disponibles en el árbol de dependencia, también incluye cómo están vinculados y dónde están ubicados.
• El Node 6 ya no es compatible.
• La compatibilidad con navegadores más antiguos (IE 9 a 11) necesita paquetes separados.
• Se eliminó la compatibilidad con la extensión.mjs.
• La compatibilidad con el objeto proxy se ha reemplazado por la compatibilidad con proxy personalizado.
• Las definiciones de PropTypes se eliminan automáticamente de las compilaciones de producción.