{"id":12921,"date":"2023-10-07T07:53:40","date_gmt":"2023-10-07T07:53:40","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=12921"},"modified":"2023-10-07T07:53:41","modified_gmt":"2023-10-07T07:53:41","slug":"react-styling-menggunakan-css","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/","title":{"rendered":"React Styling Menggunakan CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ada banyak cara untuk gaya React dengan CSS, tutorial ini akan melihat lebih dekat pada&nbsp;<strong>style inline<\/strong>&nbsp;, dan&nbsp;<strong>stylesheet CSS<\/strong>&nbsp;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Styling Inline<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk menata elemen dengan atribut styling inline, nilainya harus berupa objek JavaScript:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contoh:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Masukkan objek dengan informasi styling:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nclass MyHeader extends React.Component {\n  render() {\n    return (\n      &lt;div&gt;\n      &lt;h1 style={{color: &quot;red&quot;}}&gt;Hello Style!&lt;\/h1&gt;\n      &lt;p&gt;Add a little style!&lt;\/p&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Catatan:<\/strong>&nbsp;Di JSX, ekspresi JavaScript ditulis di dalam kurung kurawal, dan karena objek JavaScript juga menggunakan kurung kurawal, gaya pada contoh di atas ditulis dalam dua set kurung kurawal&nbsp;<code>{{}}<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Nama Properti camelCased<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Karena CSS sebaris ditulis dalam objek JavaScript, properti dengan dua nama, seperti&nbsp;<code>background-color<\/code>, harus ditulis dengan sintaks camel:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contoh:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gunakan\u00a0<code>backgroundColor\u00a0<\/code>daripada\u00a0<code>background-color<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nclass MyHeader extends React.Component {\n  render() {\n    return (\n      &lt;div&gt;\n      &lt;h1 style={{backgroundColor: &quot;lightblue&quot;}}&gt;Hello Style!&lt;\/h1&gt;\n      &lt;p&gt;Add a little style!&lt;\/p&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Objek JavaScript<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Kamu juga dapat membuat objek dengan informasi styling, dan merujuknya di atribut style:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contoh:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Buat objek gaya bernama\u00a0<code>mystyle<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nclass MyHeader extends React.Component {\n  render() {\n    const mystyle = {\n      color: &quot;white&quot;,\n      backgroundColor: &quot;DodgerBlue&quot;,\n      padding: &quot;10px&quot;,\n      fontFamily: &quot;Arial&quot;\n    };\n    return (\n      &lt;div&gt;\n      &lt;h1 style={mystyle}&gt;Hello Style!&lt;\/h1&gt;\n      &lt;p&gt;Add a little style!&lt;\/p&gt;\n      &lt;\/div&gt;\n    );\n  }\n}\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Stylesheet CSS<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Kamu dapat menulis style CSS di file terpisah, cukup simpan file dengan&nbsp;ekstensi file<code>.css<\/code>, dan impor di aplikasi kamu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">App.css:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Buat file baru yang disebut \u201cApp.css\u201d dan masukkan beberapa kode CSS di dalamnya:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n  background-color: #282c34;\n  color: white;\n  padding: 40px;\n  font-family: Arial;\n  text-align: center;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Catatan:<\/em><\/strong><em>&nbsp;Kamu dapat memanggil file apa pun yang Anda suka, hanya ingat ekstensi file yang benar.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Impor stylesheet di aplikasi kamu:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">index.js:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport ReactDOM from &#039;react-dom&#039;;\nimport &#039;.\/App.css&#039;;\n \nclass MyHeader extends React.Component {\n  render() {\n    return (\n      &lt;div&gt;\n      &lt;h1&gt;Hello Style!&lt;\/h1&gt;\n      &lt;p&gt;Add a little style!.&lt;\/p&gt;\n      &lt;\/div&gt;\n    );\n   \n  \n} \n}\n \nReactDOM.render(&lt;MyHeader \/&gt;, document.getElementById(&#039;root&#039;));\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Modul CSS<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Cara lain untuk menambahkan gaya ke aplikasi Anda adalah dengan menggunakan Modul CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modul CSS nyaman untuk komponen yang ditempatkan dalam file terpisah.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS di dalam modul hanya tersedia untuk komponen yang mengimpornya, dan kamu tidak perlu khawatir tentang konflik nama.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Buat modul CSS dengan&nbsp;ekstensi<code>.module.css<\/code>&nbsp;, misalnya:&nbsp;<code>mystyle.module.css<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">mystyle.module.css:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Buat file baru yang disebut \u201cmystyle.module.css\u201d dan masukkan beberapa kode CSS di dalamnya:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.bigblue {\n  color: DodgerBlue;\n  padding: 40px;\n  font-family: Arial;\n  text-align: center;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Impor stylesheet di komponen kamu:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">App.js:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\nimport ReactDOM from &#039;react-dom&#039;;\nimport styles from &#039;.\/mystyle.module.css&#039;; \n \nclass Car extends React.Component {\n  render() {\n    return &lt;h1 className={styles.bigblue}&gt;Hello Car!&lt;\/h1&gt;;\n  }\n}\n \nexport default Car;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Impor komponen dalam aplikasi kamu:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">index.js:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React from &#039;react&#039;;\nimport ReactDOM from &#039;react-dom&#039;;\nimport Car from &#039;.\/App.js&#039;;\n \nReactDOM.render(&lt;Car \/&gt;, document.getElementById(&#039;root&#039;));\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>Ada banyak cara untuk gaya React dengan CSS, tutorial ini akan melihat lebih dekat pada&nbsp;style inline&nbsp;, dan&nbsp;stylesheet CSS&nbsp;. Styling Inline Untuk menata elemen dengan atribut<\/p>\n","protected":false},"author":15,"featured_media":10127,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2722],"tags":[4652,4654,4651,4650,4653],"class_list":["post-12921","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-react-js","tag-belajar-react-js-styling-menggunakan-css-pemula","tag-kursus-react-js-styling-menggunakan-css-bandung","tag-kursus-react-js-styling-menggunakan-css-jakarta","tag-tutorial-react-js-styling-menggunakan-css-belajar-react-js-styling-menggunakan-css","tag-tutorial-react-js-styling-menggunakan-css-pemula"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Styling Menggunakan CSS - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Styling Menggunakan CSS - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Ada banyak cara untuk gaya React dengan CSS, tutorial ini akan melihat lebih dekat pada&nbsp;style inline&nbsp;, dan&nbsp;stylesheet CSS&nbsp;. Styling Inline Untuk menata elemen dengan atribut\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-07T07:53:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-07T07:53:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\"},\"headline\":\"React Styling Menggunakan CSS\",\"datePublished\":\"2023-10-07T07:53:40+00:00\",\"dateModified\":\"2023-10-07T07:53:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/\"},\"wordCount\":269,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"keywords\":[\"Belajar React JS Styling Menggunakan CSS Pemula\",\"Kursus React JS Styling Menggunakan CSS Bandung\",\"Kursus React JS Styling Menggunakan CSS Jakarta\",\"Tutorial React JS Styling Menggunakan CSS Belajar React JS Styling Menggunakan CSS\",\"Tutorial React JS Styling Menggunakan CSS Pemula\"],\"articleSection\":[\"Belajar React JS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/\",\"name\":\"React Styling Menggunakan CSS - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"datePublished\":\"2023-10-07T07:53:40+00:00\",\"dateModified\":\"2023-10-07T07:53:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"width\":750,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/react-styling-menggunakan-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Styling Menggunakan CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/farry\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Styling Menggunakan CSS - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/","og_locale":"en_US","og_type":"article","og_title":"React Styling Menggunakan CSS - WebHozz Blog","og_description":"Ada banyak cara untuk gaya React dengan CSS, tutorial ini akan melihat lebih dekat pada&nbsp;style inline&nbsp;, dan&nbsp;stylesheet CSS&nbsp;. Styling Inline Untuk menata elemen dengan atribut","og_url":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/","og_site_name":"WebHozz Blog","article_published_time":"2023-10-07T07:53:40+00:00","article_modified_time":"2023-10-07T07:53:41+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941"},"headline":"React Styling Menggunakan CSS","datePublished":"2023-10-07T07:53:40+00:00","dateModified":"2023-10-07T07:53:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/"},"wordCount":269,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","keywords":["Belajar React JS Styling Menggunakan CSS Pemula","Kursus React JS Styling Menggunakan CSS Bandung","Kursus React JS Styling Menggunakan CSS Jakarta","Tutorial React JS Styling Menggunakan CSS Belajar React JS Styling Menggunakan CSS","Tutorial React JS Styling Menggunakan CSS Pemula"],"articleSection":["Belajar React JS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/","url":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/","name":"React Styling Menggunakan CSS - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","datePublished":"2023-10-07T07:53:40+00:00","dateModified":"2023-10-07T07:53:41+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","width":750,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/react-styling-menggunakan-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Styling Menggunakan CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/farry\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=12921"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12921\/revisions"}],"predecessor-version":[{"id":12922,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12921\/revisions\/12922"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/10127"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=12921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=12921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=12921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}