{"id":12846,"date":"2023-06-07T09:32:54","date_gmt":"2023-06-07T09:32:54","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=12846"},"modified":"2023-06-07T09:32:56","modified_gmt":"2023-06-07T09:32:56","slug":"tahap-awal-react-js","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/","title":{"rendered":"Tahap Awal React JS"},"content":{"rendered":"\n<p>Assalamualaikum Wr. Wb.<\/p>\n\n\n\n<p>Pada kesempatan kali ini, kita akan membahas tahap awal React JS.<\/p>\n\n\n\n<p>Untuk mendapatkan gambaran umum tentang apa itu React JS, Kamu dapat menulis kode React JS langsung dalam HTML.<\/p>\n\n\n\n<p>Tetapi untuk menggunakan React JS dalam pembelajaran, Kamu perlu NPM dan Node.js yang sudah diinstal.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Langsung React JS dalam HTML<\/h4>\n\n\n\n<p>Cara cepat untuk mulai belajar React JS adalah dengan menulis React JS langsung di file HTML Kamu.<\/p>\n\n\n\n<p>Diawali dengan memasukkan tiga skrip, dua yang diawal mari kita menulis kode React JS dalam JavaScripts kita, dan yang ketiga, Babel, memungkinkan kita untuk menulis sintaksis JSX dan ES6 di browser lama.<\/p>\n\n\n\n<p>Contoh dan masukkan juga tiga CDN dalam file HTML Kamu:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;script src=&quot;https:\/\/unpkg.com\/react@16\/umd\/react.production.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.production.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;script src=&quot;https:\/\/unpkg.com\/babel-stkamulone@6.15.0\/babel.min.js&quot;&gt;&lt;\/script&gt;\n  &lt;body&gt;\n      \n    &lt;div id=&quot;mydiv&quot;&gt;&lt;\/div&gt;\n  \n    &lt;script type=&quot;text\/babel&quot;&gt;\n      class Hello extends React.Component {\n        render() {\n          return &lt;h1&gt;Hello World!&lt;\/h1&gt;\n        }\n      }\n    &lt;\/script&gt;\n  \n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n<p>Cara menggunakan React ini bisa untuk tujuan pengujian, tetapi untuk hasil Kamu perlu mengatur&nbsp;<strong>keliling React JS<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Menyiapkan Keliling React JS<\/h4>\n\n\n\n<p>Jika Kamu memiliki NPM dan Node.js yang sudah diinstal, Kamu dapat membuat aplikasi React JS dengan terlebih dahulu menginstal aplikasi create-react-app.<\/p>\n\n\n\n<p>Jika Kamu sudah membuat aplikasi buat-reaksi, Kamu dapat melewati bagian ini.<\/p>\n\n\n\n<p>Instal create-react-app dengan menjalankan perintah ini di bawah Kamu:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nC:\\Users\\Your Name&gt;npm install -g create-react-app\n<\/pre><\/div>\n\n\n<p>Kemudian Kamu dapat membuat aplikasi React JS, mari kita buat yang disebut&nbsp;<code>myfirstreact<\/code>.<\/p>\n\n\n\n<p>Jalankan perintah ini untuk membuat aplikasi React JS bernama\u00a0<code>myfirstreact<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nC:\\Users\\Your Name&gt;npx create-react-app myfirstreact\n<\/pre><\/div>\n\n\n<p>Aplikasi create-react-app akan mengatur semua yang Kamu butuhkan untuk menjalankan aplikasi React JS.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Jalankan Aplikasi React JS<\/h4>\n\n\n\n<p>Sekarang Kamu siap untuk menjalankan&nbsp;aplikasi React JS&nbsp;<em>asli<\/em>&nbsp;pertama Kamu&nbsp;!<\/p>\n\n\n\n<p>Jalankan perintah ini untuk pindah ke petunjuk\u00a0<code>myfirstreact<\/code>\u00a0:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nC:\\Users\\Your Name&gt;cd myfirstreact\n<\/pre><\/div>\n\n\n<p>Jalankan perintah ini untuk menjalankan aplikasi React JS\u00a0<code>myfirstreact<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nC:\\Users\\Your Name\\myfirstreact&gt;npm start\n<\/pre><\/div>\n\n\n<p>Jendela browser baru akan muncul di Aplikasi React JS yang baru dibuat!&nbsp;Jika tidak, buka browser Kamu dan ketik&nbsp;<code>localhost:3000&nbsp;<\/code>di alamat bar.<\/p>\n\n\n\n<p>Hasil:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"713\" height=\"530\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/screenshot_myfirstreact.png\" alt=\"https:\/\/www.w3schools.com\/react\/screenshot_myfirstreact.png\" class=\"wp-image-10122\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/screenshot_myfirstreact.png 713w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/screenshot_myfirstreact-300x223.png 300w\" sizes=\"(max-width: 713px) 100vw, 713px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Ubah Aplikasi React JS<\/h4>\n\n\n\n<p>Sejauh ini bagus, tapi bagaimana cara mengubah konten?<\/p>\n\n\n\n<p>Lihat di&nbsp;<code>myfirstreact&nbsp;<\/code>direktori, dan Kamu akan menemukan&nbsp;<code>src<\/code>&nbsp;folder.&nbsp;Di dalam&nbsp;<code>src<\/code>&nbsp;folder ada file bernama&nbsp;<code>App<\/code><code>.<\/code><code>js<\/code>, buka dan akan terlihat seperti ini:<\/p>\n\n\n\n<p>\/myfirstreact\/src\/App.js:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React, { Component } from &#039;react&#039;;\nimport logo from &#039;.\/logo.svg&#039;;\nimport &#039;.\/App.css&#039;;\n  \nclass App extends Component {\n  render() {\n    return (\n      &lt;div className=&quot;App&quot;&gt;\n        &lt;header className=&quot;App-header&quot;&gt;\n          &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; \/&gt;\n          &lt;p&gt;\n            Edit &lt;code&gt;src\/App.js&lt;\/code&gt; and save to reload.\n          &lt;\/p&gt;\n          &lt;a\n            className=&quot;App-link&quot;\n            href=&quot;https:\/\/reactjs.org&quot;\n            target=&quot;_blank&quot;\n            rel=&quot;noopener noreferrer&quot;\n          &gt;\n            Learn React\n          &lt;\/a&gt;\n        &lt;\/header&gt;\n      &lt;\/div&gt;\n    );  \n  }\n}\n  \nexport default App;\n<\/pre><\/div>\n\n\n<p>Coba ubah konten HTML dan simpan file.<\/p>\n\n\n\n<p>Perhatikan bahwa perubahan akan terlihat apabila Kamu menyimpan file, Kamu tidak perlu memuat ulang browser!<\/p>\n\n\n\n<p>Contoh :<\/p>\n\n\n\n<p>Ganti semua konten di dalam&nbsp;<code>&lt;div<\/code><code>className=\"App\"&gt;<\/code>dengan&nbsp;<code>&lt;h1&gt;<\/code>elemen.<\/p>\n\n\n\n<p>Lihat perubahan di browser saat Kamu mengklik Simpan.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport React, { Component } from &#039;react&#039;;\n  \nclass App extends Component {\n  render() {\n    return (\n      &lt;div className=&quot;App&quot;&gt;\n        &lt;h1&gt;Hello World!&lt;\/h1&gt;\n      &lt;\/div&gt;\n    );  \n  } \n}\n  \nexport default App;\n<\/pre><\/div>\n\n\n<p>Perhatikan bahwa kami telah menghapus impor yang tidak kami butuhkan (logo.svg dan App.css).<\/p>\n\n\n\n<p>Hasil:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"713\" height=\"530\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/screenshot_helloworld.png\" alt=\"\" class=\"wp-image-10123\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/screenshot_helloworld.png 713w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/screenshot_helloworld-300x223.png 300w\" sizes=\"(max-width: 713px) 100vw, 713px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Apa berikutnya?<\/h4>\n\n\n\n<p>Sekarang Kamu memiliki keliling React JS di komputer Kamu, dan Kamu siap untuk mempelajari lebih lanjut tentang React JS.<\/p>\n\n\n\n<p>Di sisa tutorial ini kita akan menggunakan alat Tampillan React JS kami untuk menjelaskan berbagai aspek React JS, dan bagaimana mereka ditampilkan di browser.<\/p>\n\n\n\n<p>Jika Kamu ingin mengikuti langkah-langkah yang sama di komputer Kamu, mulailah dengan membuka&nbsp;<code>src<\/code>folder hanya berisi dua file:&nbsp;<code>index.js<\/code>dan&nbsp;<code>index.html<\/code>, Kamu juga harus menghapus baris kode yang tidak perlu di dalam dua file agar terlihat seperti file di Show React alat di bawah ini:<\/p>\n\n\n\n<p>Contoh Klik tombol \u201cJalankan Contoh\u201d untuk melihat hasilnya.<\/p>\n\n\n\n<p><code>index.js<\/code>:<\/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;;\n              \nconst myfirstelement = &lt;h1&gt;Hello React!&lt;\/h1&gt;\n                  \nReactDOM.render(myfirstelement, document.getElementById(&#039;root&#039;));\n<\/pre><\/div>\n\n\n<p><code>index.html<\/code>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; \/&gt;\n    &lt;title&gt;React App&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n  \n    &lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n  \n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n<p>Demikianlah share ilmu pada artikel kali ini<\/p>\n\n\n\n<p>semoga bermanfaat, ya<\/p>\n\n\n\n<p>Wassalamualaikum Wr. Wb<\/p>\n\n\n\n<p>Sumber : <a href=\"https:\/\/www.webhozz.com\/code\/tahap-awal-react-js\/\">https:\/\/www.webhozz.com\/code\/tahap-awal-react-js\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Assalamualaikum Wr. Wb. Pada kesempatan kali ini, kita akan membahas tahap awal React JS. Untuk mendapatkan gambaran umum tentang apa itu React JS, Kamu dapat<\/p>\n","protected":false},"author":1,"featured_media":10127,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2722],"tags":[4520,4522,4524,4521,4519,4523],"class_list":["post-12846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-react-js","tag-belajar-react-js-tahap-awal","tag-belajar-react-js-tahap-awal-pemula","tag-kursus-react-js-tahap-awal-bandung","tag-kursus-react-js-tahap-awal-jakarta","tag-tutorial-react-js-tahap-awal","tag-tutorial-react-js-tahap-awal-pemula"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tahap Awal React JS - 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\/tahap-awal-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tahap Awal React JS - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Assalamualaikum Wr. Wb. Pada kesempatan kali ini, kita akan membahas tahap awal React JS. Untuk mendapatkan gambaran umum tentang apa itu React JS, Kamu dapat\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-07T09:32:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T09:32:56+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"Tahap Awal React JS\",\"datePublished\":\"2023-06-07T09:32:54+00:00\",\"dateModified\":\"2023-06-07T09:32:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/\"},\"wordCount\":492,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"keywords\":[\"Belajar React JS Tahap Awal\",\"Belajar React JS Tahap Awal Pemula\",\"Kursus React JS Tahap Awal Bandung\",\"Kursus React JS Tahap Awal Jakarta\",\"Tutorial React JS Tahap Awal\",\"Tutorial React JS Tahap Awal Pemula\"],\"articleSection\":[\"Belajar React JS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/\",\"name\":\"Tahap Awal React JS - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"datePublished\":\"2023-06-07T09:32:54+00:00\",\"dateModified\":\"2023-06-07T09:32:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/tahap-awal-react-js\\\/#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\\\/tahap-awal-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tahap Awal React JS\"}]},{\"@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\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"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\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tahap Awal React JS - 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\/tahap-awal-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Tahap Awal React JS - WebHozz Blog","og_description":"Assalamualaikum Wr. Wb. Pada kesempatan kali ini, kita akan membahas tahap awal React JS. Untuk mendapatkan gambaran umum tentang apa itu React JS, Kamu dapat","og_url":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/","og_site_name":"WebHozz Blog","article_published_time":"2023-06-07T09:32:54+00:00","article_modified_time":"2023-06-07T09:32:56+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"Tahap Awal React JS","datePublished":"2023-06-07T09:32:54+00:00","dateModified":"2023-06-07T09:32:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/"},"wordCount":492,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","keywords":["Belajar React JS Tahap Awal","Belajar React JS Tahap Awal Pemula","Kursus React JS Tahap Awal Bandung","Kursus React JS Tahap Awal Jakarta","Tutorial React JS Tahap Awal","Tutorial React JS Tahap Awal Pemula"],"articleSection":["Belajar React JS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/","url":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/","name":"Tahap Awal React JS - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","datePublished":"2023-06-07T09:32:54+00:00","dateModified":"2023-06-07T09:32:56+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/tahap-awal-react-js\/#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\/tahap-awal-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tahap Awal React JS"}]},{"@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\/d5f539ad171dc74baaf6a98dfef6fcef","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\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12846","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=12846"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12846\/revisions"}],"predecessor-version":[{"id":12847,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12846\/revisions\/12847"}],"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=12846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=12846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=12846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}