Day 38 - 17/10

Plan:

• Learning Js: Modules, JSON, Debugging, Style guide, Best practices, Mistakes, Performance, Reserved words, ...

• Converting figma to html: https://www.figma.com/file/xciG3uwGq4GWWHy3DuFlnM/About-us?type=design&node-id=0%3A1&mode=design&t=0Pz86OGygx2PqiXA-1

Progress:

Module

Module

Break up code into separate files; easier to maintain a code-base.

Modules are imported from external files with the import statement and rely on type="module" in the <script> tag.

<script type="module">

import message from "./message.js";

</script>

Export

Named Export

use keyword export in-line individually, or all at once at the bottom to create named export

export const name = "Jesse";

const name = "Jesse";

export {name};

Default Export

Can only have one default export in a file

const message = () => {

const name = "Jesse";

const age = 40;

return name + ' is ' + age + 'years old.';

};

export default message;

When a module defines a default export, you can import that without curly braces

import message from "./massage.js";

massage(); //Jesse is 40 years old.

Import

• from named export:

import { name } from "./person.js";

• from default export:

import message from "./message.js";