darkylmnx · March 20, 2019 09:34 · May 29, 2018 · May 29, 2018 · May 29, 2018
diff --git a/scripts.js b/scripts.js
@@ -2,7 +2,12 @@
 // but i import things
 // here "Character" will contain the default value exported in data.js
 // while "add" will be the value exported from data.js that has the export name "add"
-import Character, { add } from 'data.js'
+import Character, { add } from './data.js'
+
+// you can even alias named exports
+// import { add as MyAddFunc } from './data.js'
+// here "MyAddFunc" contains what "add" contains in data.js, so a function
+// in this file, we could use "MyAddFunc" instead of "add"
 
 console.log(Character); // this will show "Ariel the mermaid" in the console
 

diff --git a/data.js b/data.js
@@ -18,4 +18,4 @@ export function add(a, b) {
 // "TheNameIwant" is really a random name because
 // the export just exports the value as a default value
 // it doesn't give a "name" to the value
-export default "Ariel the mermaid"
+export default "Ariel the mermaid"
diff --git a/index.html b/index.html
@@ -5,6 +5,6 @@
   </head>
 
   <body>
-    <script src="app.js">
+    <script src="app.js"></script>
   </body>
-</html>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -7,4 +7,4 @@ import Character, { add } from 'data.js'
 console.log(Character); // this will show "Ariel the mermaid" in the console
 
 const sum = add(1, 5);
-console.log(sum); // this will show 6 in the console because "add" was exported and containing a function
+console.log(sum); // this will show 6 in the console because "add" was exported and containing a function
diff --git a/app.js b/app.js
@@ -0,0 +1,13 @@
+// this is app.js, your entry point in your HTML
+
+import { data } from './data.js'
+// we use brackets because we only want to export the "data" key exported
+// though it will only contain "data" here, everything will be evaluated and executed in data.js
+
+import './scripts'
+// here, everything in scripts.js will be evaluated and executed BUT,
+// no variables, constants or functions from scripts.js are accessible from here
+// "sum" is not accessible, because "sum" was not exported from scripts.js
+
+console.log('HEY HEY I AM app.js');
+console.log(data);
diff --git a/data.js b/data.js
@@ -0,0 +1,21 @@
+// here we only export data
+// the name of the export is "data"
+// this exports the array
+export var data = [1, 2, 3, 4, 5]
+
+// here we only export a add function
+// the name of the export is "add"
+// this exports the function
+export function add(a, b) {
+  return a + b
+}
+
+// here we only export the string
+// the export has no name because it is the default export
+// if we need this app.js for example
+// we would need to do:
+// import TheNameIwant from './data.js'
+// "TheNameIwant" is really a random name because
+// the export just exports the value as a default value
+// it doesn't give a "name" to the value
+export default "Ariel the mermaid"
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>hello</title>
+  </head>
+
+  <body>
+    <script src="app.js">
+  </body>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,10 @@
+// i do not export anything
+// but i import things
+// here "Character" will contain the default value exported in data.js
+// while "add" will be the value exported from data.js that has the export name "add"
+import Character, { add } from 'data.js'
+
+console.log(Character); // this will show "Ariel the mermaid" in the console
+
+const sum = add(1, 5);
+console.log(sum); // this will show 6 in the console because "add" was exported and containing a function