{"id":210,"date":"2020-06-13T06:38:04","date_gmt":"2020-06-13T06:38:04","guid":{"rendered":"https:\/\/sentraldigitalindonesia.co.id\/blog\/?p=210"},"modified":"2020-06-13T06:38:10","modified_gmt":"2020-06-13T06:38:10","slug":"svelte-js","status":"publish","type":"post","link":"https:\/\/sentraldigitalindonesia.co.id\/blog\/2020\/06\/13\/svelte-js\/","title":{"rendered":"Svelte JS"},"content":{"rendered":"\n<p> Svelte JS adalah pendekatan baru dalam membangun user interface. Sederhananya Svelte JS bekerja mirip dengan Framework UI seperti React &amp; Vue yang mengupdate DOM setiap kali ada perubahan pada data\/state, hanya saja program Svelte lebih fleksibel dalam penulisan kodenya dan program Svelte JS di\u00a0<em>compile<\/em>\u00a0menjadi\u00a0<em>vanilla js<\/em>\u00a0sehingga lebih cepat. <\/p>\n\n\n\n<p>\n\nsimple component pada svelte&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;script>\n let name = 'Nama Kamu Siapa?';\n&lt;\/script>\n\n&lt;h1> Hallo, {name} &lt;\/h1>\n<\/code><\/pre>\n\n\n\n<p>Simple Bukan! <\/p>\n\n\n\n<p>\n\nCara Memberikan style pada tag html<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;style>\n h1 {\n  color: purple;\n  font-family: 'Comic Sans MS';\n  font-size: 2em;\n }\n&lt;\/style>\n<\/code><\/pre>\n\n\n\n<p>Lalu Misalkan saya punya component anak yang nantinya saya panggil di component indux yang sering disebut Nested component,Misalkan Nama component Anak adalah&nbsp;<strong>Nested.svelte<\/strong><br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;p>ini component anak.&lt;\/p>\n<\/code><\/pre>\n\n\n\n<p>cara menggunkan component di ataas<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;p>ini component induk.&lt;\/p>\n&lt;Nested\/>\n<\/code><\/pre>\n\n\n\n<p>selanjutnya cara menulis tag html di dalam tag html pada svelte<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n&lt;script>\n let string = `ini adalah tag &lt;strong>HTML!!!&lt;\/strong>`;\n&lt;\/script>\n\n&lt;p>{@html string}&lt;\/p>\n<\/code><\/pre>\n\n\n\n<p>cara penulisanya adalah dengan menambahkan tanda&nbsp;<strong>@html<\/strong><br>cara membuat project baru, jalankan comment berukut.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nnpx degit sveltejs\/template firstapp<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Svelte JS adalah pendekatan baru dalam membangun user interface. Sederhananya Svelte JS bekerja mirip dengan Framework UI seperti React &amp; Vue yang mengupdate DOM setiap kali ada perubahan pada data\/state, &hellip; <\/p>\n","protected":false},"author":1,"featured_media":211,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[60],"class_list":["post-210","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknologi","tag-svelte-js"],"_links":{"self":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/comments?post=210"}],"version-history":[{"count":3,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/210\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/210\/revisions\/214"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/media\/211"}],"wp:attachment":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/media?parent=210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/categories?post=210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/tags?post=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}