part 7d

pablo-maff · pablo-maff · commit 6a0b7ec42aa3 · 2024-03-27T21:14:07.000+01:00
diff --git a/src/content/7/en/part7d.md b/src/content/7/en/part7d.md
@@ -53,7 +53,7 @@ Since part of the imported files are packages like React, Redux, and Axios, the
 
 > The old way of dividing the application's code into multiple files was based on the fact that the <i>index.html</i> file loaded all of the separate JavaScript files of the application with the help of script tags. This resulted in  decreased performance, since the loading of each separate file results in some overhead. For this reason, these days the preferred method is to bundle the code into a single file.
 
-Next, we will create a suitable webpack configuration for a React application by hand from scratch.
+Next, we will create a webpack configuration by hand, suitable for a new React application.
 
 Let's create a new directory for the project with the following subdirectories (<i>build</i> and <i>src</i>) and files:
 
@@ -201,7 +201,7 @@ The configuration file has been written in JavaScript and the function returning
 
 Our minimal configuration definition almost explains itself. The [entry](https://webpack.js.org/concepts/#entry) property of the configuration object specifies the file that will serve as the entry point for bundling the application.
 
-The [output](https://webpack.js.org/concepts/#output) property defines the location where the bundled code will be stored. The target directory must be defined as an <i>absolute path</i>, which is easy to create with the [path.resolve](https://nodejs.org/docs/latest-v8.x/api/path.html#path_path_resolve_paths) method. We also use [\_\_dirname](https://nodejs.org/docs/latest/api/globals.html#globals_dirname) which is a variable in Node that stores the path to the current directory.
+The [output](https://webpack.js.org/concepts/#output) property defines the location where the bundled code will be stored. The target directory must be defined as an <i>absolute path</i>, which is easy to create with the [path.resolve](https://nodejs.org/docs/latest-v8.x/api/path.html#path_path_resolve_paths) method. We also use [\_\_dirname](https://nodejs.org/docs/latest/api/modules.html#__dirname) which is a variable in Node that stores the path to the current directory.
 
 ### Bundling React
 
@@ -237,7 +237,7 @@ const App = () => {
 export default App
 ```
 
-We still need the <i>build/index.html</i> file  that will serve as the "main page" of our application that will load our bundled JavaScript code with a <i>script</i> tag:
+We still need the <i>build/index.html</i> file  that will serve as the "main page" of our application, which will load our bundled JavaScript code with a <i>script</i> tag:
 
 ```html
 <!DOCTYPE html>
@@ -353,7 +353,7 @@ It's worth noting that if the bundled application's source code uses <i>async/aw
 npm install core-js regenerator-runtime
 ```
 
-You need to import those dependencies at the top of the <i>index.js</i> file:
+You need to import these dependencies at the top of the <i>index.js</i> file:
 
 ```js
 import 'core-js/stable/index.js'
@@ -370,9 +370,9 @@ By using the configuration from the previous section, we are <i>transpiling</i>
 
 As mentioned in part 1, most browsers do not support the latest features that were introduced in ES6 and ES7, and for this reason, the code is usually transpiled to a version of JavaScript that implements the ES5 standard.
 
-The transpilation process that is executed by Babel is defined with <i>plugins</i>. In practice, most developers use ready-made [presets](https://babeljs.io/docs/plugins/) that are groups of pre-configured plugins.
+The transpilation process that is executed by Babel is defined with [plugins](https://babeljs.io/docs/plugins/). In practice, most developers use ready-made [presets](https://babeljs.io/docs/plugins/) that are groups of pre-configured plugins.
 
-Currently, we are using the [@babel/preset-react](https://babeljs.io/docs/plugins/preset-react/) preset for transpiling the source code of our application:
+Currently, we are using the [@babel/preset-react](https://babeljs.io/docs/babel-preset-react/) preset for transpiling the source code of our application:
 
 ```js
 {
@@ -384,7 +384,7 @@ Currently, we are using the [@babel/preset-react](https://babeljs.io/docs/plugin
 }
 ```
 
-Let's add the [@babel/preset-env](https://babeljs.io/docs/plugins/preset-env/) plugin that contains everything needed to take code using all of the latest features and transpile it to code that is compatible with the ES5 standard:
+Let's add the [@babel/preset-env](https://babeljs.io/docs/babel-preset-env/) plugin that contains everything needed to take code using all of the latest features and to transpile it to code that is compatible with the ES5 standard:
 
 ```js
 {
@@ -410,7 +410,7 @@ var App = function App() {
 };
 ```
 
-As we can see, variables are declared with the _var_ keyword as ES5 JavaScript does not understand the _const_ keyword. Arrow functions are also not used, which is why the function definition used the _function_ keyword.
+As we can see, variables are declared with the _var_ keyword, as ES5 JavaScript does not understand the _const_ keyword. Arrow functions are also not used, which is why the function definition used the _function_ keyword.
 
 ### CSS
 
@@ -469,9 +469,9 @@ When using CSS, we have to use [css](https://webpack.js.org/loaders/css-loader/)
 
 The job of the [css loader](https://webpack.js.org/loaders/css-loader/) is to load the <i>CSS</i> files and the job of the [style loader](https://webpack.js.org/loaders/style-loader/) is to generate and inject a <i>style</i> element that contains all of the styles of the application.
 
-With this configuration, the CSS definitions are included in the <i>main.js</i> file of the application. For this reason, there is no need to separately import the <i>CSS</i> styles in the main <i>index.html</i> file of the application.
+With this configuration, the CSS definitions are included in the <i>main.js</i> file of the application. For this reason, there is no need to separately import the <i>CSS</i> styles in the main <i>index.html</i> file.
 
-If needed, the application's CSS can also be generated into its own separate file by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
+If needed, the application's CSS can also be generated into its own separate file, by using the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
 
 When we install the loaders:
 
@@ -483,11 +483,11 @@ The bundling will succeed once again and the application gets new styles.
 
 ### Webpack-dev-server
 
-The current configuration makes it possible to develop our application but the workflow is awful (to the point where it resembles the development workflow with Java). Every time we make a change to the code, we have to bundle it and refresh the browser to test the code.
+The current configuration makes it possible to develop our application but the workflow is awful (to the point where it resembles the development workflow with Java). Every time we make a change to the code, we have to bundle it and refresh the browser to test it.
 
 The [webpack-dev-server](https://webpack.js.org/guides/development/#using-webpack-dev-server) offers a solution to our problems. Let's install it with the command:
 
-```js
+```bash
 npm install --save-dev webpack-dev-server
 ```
 
@@ -596,7 +596,7 @@ The location of the error indicated in the message does not match the actual loc
 
 Of course, we want to see our actual source code in the error message.
 
-Luckily, fixing the error message in this respect is quite easy. We will ask webpack to generate a so-called [source map](https://webpack.js.org/configuration/devtool/) for the bundle, which makes it possible to <i>map errors</i> that occur during the execution of the bundle to the corresponding part in the original source code.
+Luckily, fixing this error message is quite easy. We will ask webpack to generate a so-called [source map](https://webpack.js.org/configuration/devtool/) for the bundle, which makes it possible to <i>map errors</i> that occur during the execution of the bundle to the corresponding part in the original source code.
 
 The source map can be generated by adding a new <i>devtool</i> property to the configuration object with the value 'source-map':
 
@@ -614,7 +614,7 @@ const config = {
 };
 ```
 
-Webpack has to be restarted when we make changes to its configuration. It is also possible to make webpack watch for changes made to itself but we will not do that this time.
+Webpack has to be restarted when we make changes to its configuration. It is also possible to make webpack watch for changes made to itself, but we will not do that this time.
 
 The error message is now a lot better
 
@@ -644,7 +644,7 @@ When we deploy the application to production, we are using the <i>main.js</i> co
 
 If we inspect the contents of the bundle file, we notice that it could be greatly optimized in terms of file size by removing all of the comments. There's no point in manually optimizing these files, as there are many existing tools for the job.
 
-The optimization process for JavaScript files is called <i>minification</i>. One of the leading tools intended for this purpose is [UglifyJS](http://lisperator.net/uglifyjs/).
+The optimization process for JavaScript files is called <i>minification</i>. One of the leading tools intended for this purpose is [UglifyJS](https://github.com/mishoo/UglifyJS/).
 
 Starting from version 4 of webpack, the minification plugin does not require additional configuration to be used. It is enough to modify the npm script in the <i>package.json</i> file to specify that webpack will execute the bundling of the code in <i>production</i> mode:
 
@@ -674,7 +674,7 @@ $ ls -l build/main.js
 -rw-r--r--  1 mluukkai  ATKK\hyad-all  227651 Feb  7 15:58 build/main.js
 ```
 
-The output of the minification process resembles old-school C code; all of the comments and even unnecessary whitespace and newline characters have been removed, and variable names have been replaced with a single character.
+The output of the minification process resembles old-school C code; all of the comments and even unnecessary whitespace and newline characters have been removed, variable names have been replaced with a single character.
 
 ```js
 function h(){if(!d){var e=u(p);d=!0;for(var t=c.length;t;){for(s=c,c=[];++f<t;)s&&s[f].run();f=-1,t=c.length}s=null,d=!1,function(e){if(o===clearTimeout)return clearTimeout(e);if((o===l||!o)&&clearTimeout)return o=clearTimeout,clearTimeout(e);try{o(e)}catch(t){try{return o.call(null,e)}catch(t){return o.call(this,e)}}}(e)}}a.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)
diff --git a/src/content/7/es/part7c.md b/src/content/7/es/part7c.md
@@ -631,7 +631,7 @@ La apariencia de la aplicación resultante se muestra a continuación:
 
 ![aplicación de notas con styled components](../../images/7/18ea.png)
 
-Los Styled components han experimentado un crecimiento constante en popularidad en los últimos tiempos, y mucha gente considera que es la mejor forma de definir estilos para las aplicaciones React.
+Styled components ha experimentado un crecimiento constante en popularidad en los últimos tiempos, y mucha gente considera que es la mejor forma de definir estilos para las aplicaciones React.
 
 </div>
 
diff --git a/src/content/7/es/part7d.md b/src/content/7/es/part7d.md
