freeCodeCamp/curriculum/challenges/spanish/02-javascript-algorithms-an.../es6/use-export-to-reuse-a-code-...

63 lines
2.7 KiB
Markdown
Raw Normal View History

2018-10-08 17:34:43 +00:00
---
id: 587d7b8c367417b2b2512b56
title: Use export to Reuse a Code Block
challengeType: 1
2018-10-10 20:20:40 +00:00
videoUrl: ''
localeTitle: Usar la exportación para reutilizar un bloque de código
2018-10-08 17:34:43 +00:00
---
## Description
2018-10-10 20:20:40 +00:00
<section id="description"> En el desafío anterior, aprendió acerca de la <code>import</code> y cómo se puede aprovechar para importar pequeñas cantidades de código desde archivos grandes. Sin embargo, para que esto funcione, debemos utilizar una de las declaraciones que acompañan a la <code>import</code> , conocida como <dfn>exportación</dfn> . Cuando queremos que un código, una función o una variable, se pueda utilizar en otro archivo, debemos exportarlo para importarlo en otro archivo. Al igual que la <code>import</code> , la <code>export</code> es una característica que no es del navegador. Lo siguiente es lo que llamamos una <dfn>exportación con nombre</dfn> . Con esto, podemos importar cualquier código que exportemos a otro archivo con la sintaxis de <code>import</code> que aprendió en la última lección. Aquí hay un ejemplo: <blockquote> const capitalizeString = (string) =&gt; { <br> devolver string.charAt (0) .toUpperCase () + string.slice (1); <br> } <br> export {capitalizeString} // Cómo exportar funciones. <br> export const foo = &quot;bar&quot;; // Cómo exportar variables. </blockquote> Alternativamente, si desea compactar todas sus declaraciones de <code>export</code> en una línea, puede adoptar este enfoque: <blockquote> const capitalizeString = (string) =&gt; { <br> devolver string.charAt (0) .toUpperCase () + string.slice (1); <br> } <br> const foo = &quot;bar&quot;; <br> export {capitalizeString, foo} </blockquote> Cualquiera de los dos enfoques es perfectamente aceptable. </section>
2018-10-08 17:34:43 +00:00
## Instructions
2018-10-10 20:20:40 +00:00
<section id="instructions"> A continuación hay dos variables que quiero que estén disponibles para que otros archivos las utilicen. Utilizando la primera forma en que demostré <code>export</code> , exportamos las dos variables. </section>
2018-10-08 17:34:43 +00:00
## Tests
<section id='tests'>
```yml
tests:
- text: <code>foo</code> se exporta.
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+foo\s*=\s*"bar"/g), "<code>foo</code> is exported.");'
- text: <code>bar</code> se exporta.
testString: 'getUserInput => assert(getUserInput("index").match(/export\s+const\s+bar\s*=\s*"foo"/g), "<code>bar</code> is exported.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
"use strict";
const foo = "bar";
const bar = "foo";
2018-10-10 20:20:40 +00:00
2018-10-08 17:34:43 +00:00
```
</div>
### Before Test
<div id='js-setup'>
```js
window.exports = function(){};
2018-10-10 20:20:40 +00:00
2018-10-08 17:34:43 +00:00
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>