fix/rename-lessons
This commit is contained in:
		
				
					committed by
					
						 Kristofer Koishigawa
						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