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

fix/revise-es6-import-export-lessons

Browse Source
This commit is contained in:
moT01
2019-05-17 06:33:17 -05:00
committed by Kristofer Koishigawa
parent 49dba25225
commit 8a579210e3
5 changed files with 147 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,13 +93,17 @@
"Use getters and setters to Control Access to an Object"
],
[
"587d7b8c367417b2b2512b55",
"Understand the Differences Between import and require"
"5cddbfd622f1a59093ec611d",
"Create a Module Script"
],
[
"587d7b8c367417b2b2512b56",
"Use export to Reuse a Code Block"
],
[
"587d7b8c367417b2b2512b55",
"Share Javascript Code Using import"
],
[
"587d7b8c367417b2b2512b57",
"Use * to Import Everything from a File"

61
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.english.md Normal file
View File

@ -0,0 +1,61 @@
---
id: 5cddbfd622f1a59093ec611d
title: Create a Module Script
challengeType: 1
---
## Description
<section id='description'>
Javascript started with a small role to play on an otherwise mostly html internet. Today, it’s huge, and some websites are built almost entirely with javascript. In order to make javascript more modular, clean, and maintainable, ES6 introduced a way easily share code amongst javascript files. This involves exporting parts of a javascript file for use in one or more other files, and importing the parts you need to each file. In order to take advantage of this functionality, you need to create a script in your html file with a type of <code>module</code>. Here’s an example:
```html
<script type="module" src="filename.js"></script>
```
A script that uses this <code>module</code> type can now use the <code>import</code> and <code>export</code> features you will learn about in the upcoming challenges.
</section>
## Instructions
<section id='instructions'>
Add a script to the html document of type <code>module</code> and give it the source file of <code>index.js</code>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: <code>var</code> should not exist in code.
testString: getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> should not exist in code.');
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```html
<html>
// add your code below
// add your code above
</html>
```
</div>
</section>
## Solution
<section id='solution'>
```html
<html>
// add your code below
// add your code above
</html>
```
</section>

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

@ -0,0 +1,73 @@
---
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>

84
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md
View File

@ -1,84 +0,0 @@
---
id: 587d7b8c367417b2b2512b55
title: Understand the Differences Between import and require
challengeType: 1
---
## Description
<section id='description'>
In the past, the function <code>require()</code> would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources.
ES6 gives us a very handy tool known as <dfn>import</dfn>. With it, we can choose which parts of a module or file to load into a given file, saving time and memory.
Consider the following example. Imagine that <code>math_array_functions</code> has about 20 functions, but I only need one, <code>countItems</code>, in my current file. The old <code>require()</code> approach would force me to bring in all 20 functions. With this new <code>import</code> syntax, I can bring in just the desired function, like so:
```js
import { countItems } from "math_array_functions"
```
A description of the above code:
```js
import { function } from "file_path_goes_here"
// We can also import variables the same way!
```
There are a few ways to write an <code>import</code> statement, but the above is a very common use-case.
<strong>Note</strong><br>The whitespace surrounding the function inside the curly braces is a best practice - it makes it easier to read the <code>import</code> statement.
<strong>Note</strong><br>The lessons in this section handle non-browser features. <code>import</code>, and the statements we introduce in the rest of these lessons, won't work on a browser directly. However, we can use various tools to create code out of this to make it work in browser.
<strong>Note</strong><br>In most cases, the file path requires a <code>./</code> before it; otherwise, node will look in the <code>node_modules</code> directory first trying to load it as a dependency.
</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: valid <code>import</code> statement
testString: getUserInput => assert(getUserInput('index').match(/import\s+\{\s*capitalizeString\s*\}\s+from\s+("|')string_functions\1/g), 'valid <code>import</code> statement');
```
</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>

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

@ -6,33 +6,29 @@ challengeType: 1
## Description
<section id='description'>
In the previous challenge, you learned about <code>import</code> and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with <code>import</code>, known as <dfn>export</dfn>. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like <code>import</code>, <code>export</code> is a non-browser feature.
The following is what we refer to as a <dfn>named export</dfn>. With this, we can import any code we export into another file with the <code>import</code> syntax you learned in the last lesson. Here's an example:
Imagine you have a function, <code>capitalizeFirstLetter</code>, that simply takes in a string, and returns the string with the first letter capitalized. You want to use this function in three different javascript files. In order to share the function with the files, you need to first <code>export</code> it.
```js
const capitalizeString = (string) => {
export const capitalizeFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeString } // How to export functions.
export const foo = "bar"; // How to export variables.
```
Alternatively, if you would like to compact all your <code>export</code> statements into one line, you can take this approach:
The above is a common way to export a single function, but you can achieve the same thing like this:
```js
const capitalizeString = (string) => {
const capitalizeFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
const foo = "bar";
export { capitalizeString, foo }
export { capitalizeFirstLetter };
```
Either approach is perfectly acceptable.
</section>
## Instructions
<section id='instructions'>
Below are two variables that I want to make available for other files to use. Utilizing the first way I demonstrated <code>export</code>, export the two variables.
Create and export a variable named </code></code>
</section>
## Tests