{"id":4197,"date":"2023-05-01T05:10:47","date_gmt":"2023-05-01T05:10:47","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4197"},"modified":"2023-06-10T11:29:52","modified_gmt":"2023-06-10T11:29:52","slug":"react-es6-tutorial-modules","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-es6-tutorial-modules\/","title":{"rendered":"React – ES6 Tutorial – Modules"},"content":{"rendered":"

What is ES6?<\/em><\/h2>\n

ES6 stands for ECMAScript 6.<\/em><\/p>\n

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.<\/em><\/p>\n

Modules<\/h2>\n

JavaScript modules allow you to break up your code into separate files.<\/p>\n

This makes it easier to maintain the code-base.<\/p>\n

ES Modules rely on the\u00a0import<\/code>\u00a0and\u00a0export<\/code>\u00a0statements.<\/p>\n

\n

Export<\/h2>\n

You can export a function or variable from any file.<\/p>\n

Let us create a file named\u00a0person.js<\/code>, and fill it with the things we want to export.<\/p>\n

There are two types of exports: Named and Default.<\/p>\n

\n

Named Exports<\/h2>\n

You can create named exports two ways. In-line individually, or all at once at the bottom.<\/p>\n

Example<\/h3>\n

In-line individually:<\/p>\n

person.js<\/code><\/p>\n

export const name = \"Jesse\"\r\nexport const age = 40<\/pre>\n
All at once at the bottom:<\/h3>\n
person.js<\/code><\/p>\n
const name = \"Jesse\"\r\nconst age = 40\r\n\r\nexport { name, age }<\/pre>\n
Default Exports<\/h2>\n
Let us create another file, named\u00a0message.js<\/code>, and use it for demonstrating default export.<\/p>\n
You can only have one default export in a file.<\/p>\n
\n
Example<\/h3>\n
message.js<\/code><\/p>\n
const message = () => {\r\n  const name = \"Jesse\";\r\n  const age = 40;\r\n  return name + ' is ' + age + 'years old.';\r\n};\r\n\r\nexport default message;<\/pre>\n
Import<\/h2>\n
You can import modules into a file in two ways, based on if they are named exports or default exports.<\/p>\n
Named exports must be destructured using curly braces. Default exports do not.<\/p>\n
\n
Example<\/h3>\n
Import named exports from the file person.js:<\/p>\n
import { name, age } from \".\/person.js\";<\/pre>\n
Example<\/h3>\n
Import a default export from the file message.js:<\/p>\n
import message from \".\/message.js\";<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
What is ES6? ES6 stands for ECMAScript 6. ECMAScript was created to <\/a><\/p>\n","protected":false},"author":1,"featured_media":4376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"quote","meta":{"footnotes":""},"categories":[508,12],"tags":[516,514,517,511,510,491,519,509,513,512,518,515],"newstopic":[578],"class_list":{"0":"post-4197","1":"post","2":"type-post","3":"status-publish","4":"format-quote","5":"has-post-thumbnail","7":"category-react","8":"category-web-development","9":"tag-array-methods","10":"tag-arrow-functions","11":"tag-destructuring","12":"tag-ecmascript-6","13":"tag-es6-tutorial","14":"tag-javascript","15":"tag-modules","16":"tag-react","17":"tag-react-classes","18":"tag-react-tutorial","19":"tag-spread-operator","20":"tag-variables","21":"post_format-post-format-quote","22":"newstopic-react"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=4197"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4197\/revisions"}],"predecessor-version":[{"id":4199,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4197\/revisions\/4199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4376"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=4197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4197"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}