Cara Install ReactJS Dengan CDN

Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website, pada kesempatan kali ini kita akan belajar Cara Install ReactJS Dengan CDN. Mengenai reactjs teman – teman bisa kunjungi website resminya di https://reactjs.org, nah untuk menginstall reactjs memiliki 2 cara yaitu install melalui CDN yang tentunya yang sudah di siapkan di website resminya dan install melalui terminal dengan windows kita.

Kali ini kita akan menginstall menggunakan CDN terlebih dahulu, teman – teman buat struktur html nya dengan extensi html.

<!DOCTYPE html>
<html>
<head>
	<title>Cara Install ReactJS Dengan CDN</title>
	<img src="<style>
		*{padding:0; margin:0}
	</style>
</head>
<body>
    
</body>
</html>

Kemudian masukkan link cdn react nya

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Cara Install ReactJS Dengan CDN

Kemudian kita buat tag div dengan id app

<div id="App"></div>

Lalu kita buat component nya

<script>
class App extends React.Component{
   render(){
     return(
       <div className="app-content">
         <h1>Hello Dumet School</h1>
       </div>
       );
      }
    } 
</script>

Script di atas ini adalah script jsx bukan script html, script jsx adalah html di dalam javascript namun tidak sama dengan html biasa. Kemudian jika sudah save dan jalankan pada browsernya, maka akan ada notifikasi eror ‘SyntaxError: bad method definition

Cara Install ReactJS Dengan CDN

Karena script jsx tidak dapat di baca oleh browser, untuk dapat tampil kita perlu memanfatkan babel.

Apa sih babeljs itu dalam reactjs..??

Babeljs merupakan Javascript Compiler, digunakan untuk menterjemahkan kode atau script tertentu menjadi script yang di kenali oleh browser. Contoh: ES6, ES7 di terjemahkan menjadi ES5 agar dapat berjalan di browser versi lama, lalu JSX menjadi Object javascript biasa.

Kita load library babeljs nya nya, teman – teman bisa kunjungi website resminya di https://babeljs.io/.

Cara Install ReactJS Dengan CDN

Kemudian masukkan ke dalam tag head

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Cara Install ReactJS Dengan CDN

Dan sisipkan type=”text/babel” di dalam tag pembuka script

Cara Install ReactJS Dengan CDN

Jika sudah save dan refresh kembali pada browsernya, maka install menggunakan cdn telah berhasil

Cara Install ReactJS Dengan CDN

Cukup mudah bukan, pada artikel selanjutnya kita akan membahas component pada react js. Sekian pada artikel kali ini tentang Cara Install ReactJS Dengan CDN terimakasih dan sampai jumpa.

Semoga bermanfaat 🙂

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *