translate Importing and Exporting Components (#541)

Author: carburo

beta/src/pages/learn/importing-and-exporting-components.md

@@ -1,26 +1,26 @@
 ---
-title: Importing and Exporting Components
+title: Importar y exportar componentes
 ---
 
 <Intro>
 
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+La magia de los componentes reside en su reusabilidad: puedes crear componentes que se componen a su vez de otros componentes. Pero mientras anidas más y más componentes, a menudo tiene sentido comenzar a separarlos en diferentes archivos. Esto permite que tus archivos se mantengan fáciles de localizar y puedas reutilizar componentes en más lugares.
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* Qué es un archivo de componente raíz
+* Cómo importar y exportar un componente
+* Cuándo usar imports y exports *defaults* o con nombre
+* Cómo importar o exportar múltiples componentes de un archivo
+* Cómo separar componentes en múltiples archivos
 
 </YouWillLearn>
 
-## The root component file {/*the-root-component-file*/}
+## El archivo de componente raíz {/*the-root-component-file*/}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+En [Tu primer componente](/learn/your-first-component), hiciste un componente `Profile` y un componente `Gallery` que lo renderiza:
 
 <Sandpack>
 
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+Estos viven actualmente en este ejemplo en un **archivo de componente raíz,** llamado `App.js`. En [Create React App](https://create-react-app.dev/), tu aplicación vive en `src/App.js`. No obstante, en dependencia de tu configuración, tu componente raíz podría estar en otro archivo. Si utilizas un framework con enrutamiento basado en archivos, como Next.js, tu componente raíz será diferente para cada página.
 
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## Exportar e importar un componente {/*exporting-and-importing-a-component*/}
 
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+¿Y si quisieras cambiar la pantalla de inicio en el futuro y poner allí una lista de libros científicos? ¿O ubicar todos los perfiles en otro lugar? Tiene sentido mover `Gallery` y `Profile` fuera del componente raíz. Esto los haría más modulares y reutilizables en otros archivos. Puedes mover un componente en tres pasos:
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+1. **Crea** un nuevo archivo JS para poner los componentes dentro.
+2. **Exporta** tu componente de función desde ese archivo (ya sea usando exports [por defecto](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export#usando_el_export_por_defecto) o [con nombre](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export#syntax)).
+3. **Impórtalo** en el archivo en el que usarás el componente (usando la técnica correspondiente de importar exports [por defecto](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import#importaci%C3%B3n_de_elementos_por_defecto) o [con nombre](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import#importa_un_solo_miembro_de_un_m%C3%B3dulo.)).
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+Aquí tanto `Profile` y `Gallery` se han movido fuera de `App.js` en un nuevo archivo llamado `Gallery.js`. Ahora puedes cambiar `App.js` para importar `Gallery` desde `Gallery.js`:
 
 <Sandpack>
 
@@ -104,76 +104,76 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
+Nota cómo este ejemplo está ahora descompuesto en dos archivos:
 
 1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export**.
+     - Define el componente `Profile` que se usa solo dentro del mismo archivo y no se exporta.
+     - Define el componente `Gallery` como un *export por defecto*.
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export**.
+     - Importa `Gallery` como un **import por defecto** desde `Gallery.js`.
+     - Exporta el componente raíz `App` como un **export por defecto**.
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+Puede que te encuentres archivos que omiten la extensión de archivo `.js` de esta forma:
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+Tanto `'./Gallery.js'` como `'./Gallery'` funcionarán con React, aunque la primera forma es más cercana a cómo lo hacen los [módulos nativos de ES](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules).
 
 </Note>
 
-<DeepDive title="Default vs Named Exports">
+<DeepDive title="Exports por defecto vs. con nombre">
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+Hay dos formas fundamentales de exportar valores con JavaScript: exports por defecto y exports con nombre. Hasta ahora nuestros ejemplos solo han usado exports por defecto. Pero puedes usar uno o ambos en el mismo archivo. **Un archivo no puede tener más de un export _por defecto_, pero puede tener tantos exports _con nombre_ como desees.**
 
-![Default and named exports](/images/docs/illustrations/i_import-export.svg)
+![Exports por defecto y con nombre](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+Cómo exportas tu componente dicta la forma en que debes importarlo. ¡Tendrás un error si intentas importar un export por defecto de la misma forma que lo harías con un export con nombre! Este cuadro te puede ayudar a recordarlo:
 
-| Syntax           | Export statement                           | Import statement                          |
+| Sintaxis         | Sentencia export                           | Sentencia import                          |
 | -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
+| Por defecto      | `export default function Button() {}`      | `import Button from './button.js';`       |
+| Con nombre       | `export function Button() {}`              | `import { Button } from './button.js';`   |
 
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+Cuando escribes un import _por defecto_ puedes poner cualquier nombre después de `import`. Por ejemplo, podrías escribir en su lugar `import Banana from './button.js'` y aun así te daría el mismo export por defecto. En cambio, con los imports con nombre, tiene que haber una correspondencia con los nombres en ambos lados. ¡Por eso se llaman exports _con nombre_!
 
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**Las personas a menudo utilizan exports por defecto si el archivo solo exporta un componente, y usan exports con nombre si exporta varios componentes y valores.** Independientemente del estilo de codificación que prefieras, siempre proporciona nombres con sentido a las funciones de tus componentes y a los archivos que las contienen. Componentes sin nombre como `export default () => {}` no se recomiendan, porque hacen que la depuración sea más difícil.
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## Exportar e importar múltiples componentes del mismo archivo {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+¿Y si quisieras mostrar solo un `Profile` en lugar de toda la galería? Puedes exportar el componente `Profile` también. Pero `Gallery.js` ya tiene un export *por defecto*, y no puedes tener _dos_ exports por defecto. Podrías crear un nuevo archivo con un export por defecto, o podrías añadir un export *con nombre* para `Profile`. **¡Un archivo solo puede contener un export por defecto, pero puede tener múltiples exports con nombre!**
 
-> To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. It's a matter of preference. Do what works best for you!
+> Para reducir la potencial confusión entre exports por defecto y con nombre, algunos equipos escogen utilizar solo un estilo (por defecto o con nombre), o evitan mezclarlos en un mismo archivo. Es una cuestión de preferencias. ¡Haz lo que funcione mejor para ti!
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+Primero, **exporta** `Profile` desde `Gallery.js` usando un export con nombre (sin la palabra clave `default`):
 
 ```js
 export function Profile() {
   // ...
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+Luego, **importa** `Profile` desde `Gallery.js` hacia `App.js` usando un export con nombre (con llaves):
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+Por último, **renderiza** `<Profile />` en el componente `App`:
 
 ```js
 export default function App() {
   return <Profile />;
 }
 ```
 
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+Ahora `Gallery.js` contiene dos exports: un export por defecto `Gallery`, y un export con nombre `Profile`. `App.js` importa ambos. Intenta editar `<Profile />` cambiándolo a `<Gallery />` y viceversa en este ejemplo:
 
 <Sandpack>
 
@@ -216,47 +216,47 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+Ahora estás usando a una mezcla de exports por defecto y con nombre:
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`**.
-  - Exports the `Gallery` component as a **default export**.
+  - Exporta el componente `Profile` como un **export con nombre llamado `Profile`**.
+  - Exporta el componente `Gallery` como un **export por defecto**.
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export**.
+  - Importa `Profile` como un **import con nombre llamado `Profile`** desde `Gallery.js`.
+  - Importa `Gallery` como un **import por defecto** desde `Gallery.js`.
+  - Exporta el componente raíz `App` como un **export por defecto**.
 
 <Recap>
 
-On this page you learned:
+En esta página aprendiste:
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* Qué es un archivo de componente raíz
+* Como importar y exportar un componente
+* Cuándo y cómo usar imports y exports por defecto y con nombre
+* Cómo exportar múltiples componentes desde el mismo archivo
 
 </Recap>
 
 
 
 <Challenges>
 
-### Split the components further {/*split-the-components-further*/}
+### Separa los componentes aún más {/*split-the-components-further*/}
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+Actualmente, `Gallery.js` exporta tanto `Profile` como `Gallery`, lo cual es un poco confuso.
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+Mueve el componente `Profile` a su propio `Profile.js`, y luego cambia el componente `App` para que renderice tanto `<Profile />` como `<Gallery />` uno detrás del otro.
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+Puedes usar o bien un export por defecto o bien un export con nombre para `Profile`, ¡pero asegúrate de usar la sintaxis de import correspondiente tanto en `App.js` como en `Gallery.js`! Te puedes apoyar en la tabla de la sección de profundización de arriba:
 
-| Syntax           | Export statement                           | Import statement                          |
+| Sintaxis         | Sentencia export                           | Sentencia import                          |
 | -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
+| Por defecto      | `export default function Button() {}`      | `import Button from './button.js';`       |
+| Con nombre       | `export function Button() {}`              | `import { Button } from './button.js';`   |
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+No te olvides de importar tus componentes cuando se llaman. ¿No usa `Gallery` también a `Profile`?
 
 </Hint>
 
@@ -307,11 +307,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+Después de tenerlo funcionando con un tipo de export, hazlo funcionar con el otro tipo.
 
 <Solution>
 
-This is the solution with named exports:
+Esta es la solución con exports con nombre:
 
 <Sandpack>
 
@@ -361,7 +361,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+Esta es la solución con exports por defecto:
 
 <Sandpack>
 

beta/src/sidebarLearn.json

@@ -47,7 +47,7 @@
               "path": "/learn/your-first-component"
             },
             {
-              "title": "Importing and Exporting Components",
+              "title": "Importar y exportar componentes",
               "path": "/learn/importing-and-exporting-components"
             },
             {