gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix/rename-lessons

Browse Source
This commit is contained in:
moT01
2019-05-31 15:21:47 -05:00
committed by Kristofer Koishigawa
parent 23d723a71f
commit f14f1bf750
3 changed files with 4 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
curriculum/challenges/_meta/es6/meta.json
View File

@@ -99,14 +99,17 @@
[
"587d7b8c367417b2b2512b56",
"Use export to Share a Code Block"
<<<<<<< HEAD
],
[
"587d7b8c367417b2b2512b55",
"Reuse Javascript Code Using import"
=======
>>>>>>> fix/rename-lessons
],
[
"587d7b8c367417b2b2512b55",
"Share Javascript Code Using import"
"Reuse Javascript Code Using import"
],
[
"587d7b8c367417b2b2512b57",

73
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/share-javascript-code-using-import.english.md
View File

@@ -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>

1
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.english.md
View File

@@ -79,5 +79,4 @@ export const lowercaseString = (string) => {
return string.toLowerCase()
}
```
</section>