fix/rename-lessons
This commit is contained in:
committed by
Kristofer Koishigawa
parent
23d723a71f
commit
f14f1bf750
@ -99,14 +99,17 @@
|
|||||||
[
|
[
|
||||||
"587d7b8c367417b2b2512b56",
|
"587d7b8c367417b2b2512b56",
|
||||||
"Use export to Share a Code Block"
|
"Use export to Share a Code Block"
|
||||||
|
<<<<<<< HEAD
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
"587d7b8c367417b2b2512b55",
|
"587d7b8c367417b2b2512b55",
|
||||||
"Reuse Javascript Code Using import"
|
"Reuse Javascript Code Using import"
|
||||||
|
=======
|
||||||
|
>>>>>>> fix/rename-lessons
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
"587d7b8c367417b2b2512b55",
|
"587d7b8c367417b2b2512b55",
|
||||||
"Share Javascript Code Using import"
|
"Reuse Javascript Code Using import"
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
"587d7b8c367417b2b2512b57",
|
"587d7b8c367417b2b2512b57",
|
||||||
|
@ -1,73 +0,0 @@
|
|||||||
---
|
|
||||||
id: 587d7b8c367417b2b2512b55
|
|
||||||
title: Share Javascript Code Using import
|
|
||||||
challengeType: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
## Description
|
|
||||||
<section id='description'>
|
|
||||||
In the past, <code>require()</code> was used to add things from external files. While handy, this presents a problem: some files are rather large and you may only need certain parts of those external resources.
|
|
||||||
ES6 gives you a very handy tool known as <code>import</code>. With it, you can choose which parts of a file or module to load, saving time and memory.
|
|
||||||
Imagine a file that has 20 functions, but you only need to use one of those functions. <code>require()</code> would force you to bring in all 20 functions. With the <code>import</code> syntax, you can bring in just the one you need, like so:
|
|
||||||
<blockquote>import { desired_function } from './other_file';</blockquote>
|
|
||||||
Here, <code>import</code> will find <code>desired_function</code> in <code>other_file</code>, import just that function for you to use, and ignore the rest. The <code>./</code> tells the import to look for the <code>other_file</code> in the same folder that the file which uses the import statement is in. The whitespace around the function inside the curly braces is best practice for readability.
|
|
||||||
You can import multiple items like this:
|
|
||||||
<blockquote>import { item1, item2 } from './other_file';</blockquote>
|
|
||||||
There are a few ways to write an <code>import</code> statement, but the above are a very common use-case.
|
|
||||||
</section>
|
|
||||||
|
|
||||||
## Instructions
|
|
||||||
<section id='instructions'>
|
|
||||||
Add the appropriate <code>import</code> statement that will allow the current file to use the <code>capitalizeString</code> function. The file where this function lives is called <code>string_functions</code>, and it is in the same directory as the current file.
|
|
||||||
</section>
|
|
||||||
|
|
||||||
## Tests
|
|
||||||
<section id='tests'>
|
|
||||||
|
|
||||||
```yml
|
|
||||||
tests:
|
|
||||||
- text: Use a valid <code>import</code> statement
|
|
||||||
testString: getUserInput => assert(getUserInput('index').match(/import\s*\{\s*capitalizeString\s*\}\s*from\s*("|')(\.\/string_functions|string_functions)\1(|\/\/|;\s|\s)/g));
|
|
||||||
```
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
## Challenge Seed
|
|
||||||
<section id='challengeSeed'>
|
|
||||||
|
|
||||||
<div id='js-seed'>
|
|
||||||
|
|
||||||
```js
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
capitalizeString("hello!");
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### Before Test
|
|
||||||
<div id='js-setup'>
|
|
||||||
|
|
||||||
```js
|
|
||||||
self.require = function (str) {
|
|
||||||
if (str === 'string_functions') {
|
|
||||||
return {
|
|
||||||
capitalizeString: str => str.toUpperCase()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
## Solution
|
|
||||||
<section id='solution'>
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { capitalizeString } from './string_functions';
|
|
||||||
capitalizeString("hello!");
|
|
||||||
```
|
|
||||||
|
|
||||||
</section>
|
|
@ -79,5 +79,4 @@ export const lowercaseString = (string) => {
|
|||||||
return string.toLowerCase()
|
return string.toLowerCase()
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
Reference in New Issue
Block a user