-->

AK Studio

Tutorial Programming Bahasa Indonesia

Tutorial Belajar Reactjs #2: Membuat Hello World dengan Reactjs

 

Tutorial Belajar Reactjs #2: Membuat Hello Word dengan Reactjs


Setelah kita memahami konsep awal Reactjs pada tutorial sebelum nya di Tutorial Belajar Reactjs #1: Persiapan Awal Untuk Belajar Reactjs. pada tutorial parat #2 ini kita mencaoba untuk menggunakan dan mengimplementasikan react js dengan cara membuat atau menampilkan Hello Word Dengan React js.

Persiapan.

baiklah sebelum kita memulai tutorial part #2 membuat hello World dengan React Js ini, ada beberapa tool yang perlu kita siapkan diantara nya.

  •  Kode Editor
  •  Koneksi Internet (Dikarnakan kita masih mengambil package, nya memlalui CDN)

1. Buat Struktur dasar Kode HTML
     
 Buat lah sebuah folder pada directory Komputer kalian , Dengan nama bebas Misalkan Belajar-Reactjs.html , buka Kode Editor yang kalian pakai lalu buat sebuah file html dan beri nama bebas misalkan sesion-01.htlm lalu buat struktur dasar html Seperti dibawah ini, 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="content">Dokumen root React JS</div>
</body>
</html>
lalu Simpan filenya, pada line 9 kodingan di atas terdapat sebuah tag <div> dengan id  content  dan pada tag ini lah nantinya kita akan merender Object Model yang kita buat dengan menggunakan react js. 


2. Import Library React Js Dari CDN

setelah struktur awal HTLM telah selesai kita buat, selanjut, untuk menggunakan react js, pada tutorial ini kita menggunakan reactjs dengan masih meng-Import atau memanggil Library dari React JS nya melalu CDN, maka kita perlu memanggilnya didalam tag <head> dengan cara menambahkan tag script berikut ini.

 <!-- REACT LIBRARY-->
 <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
 <!-- REACT DOM LIBRARY-->
 <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
 <!--BABEL LIBRARY-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
  
letakan  kode diatas diantara tag <head> </head>,  terdapat 3 library yang kita importkan, beriku penjelasan singkat mengenai library yang kita gunakan

#Penjelsan Singkat
React Librabry : Merupakan Lybrary atau core utama dari react js yang akan kita gunakan, dalam library ini berisi kumpulan core dari react js yang nantinya dapat kita gunakan dalam pengembangan aplikasi dengan menggunakan react js

 React DOM Librabry :  Merupakan Lybray untuk merender  komponent yang telah kita buat pada tag atau dokumen yang telah kita tentukan

Babel Library : Merupakan Kumpulan Library atau fungsi syntax , yang kita gunakan untuk memanggil fungsi- fungsi dari javascript yang nantinya kita gunakan dalam penulisan dan pemanggilan core dari reactjs .

3. Penulisan Koding Raeact js

Setelah library telah selesai kita tambahkan , selanjutnya kita masuk ke tahap penulisan koding nya.
tambahkan koding berikut ini didalam tag <body> dan simpan di bawah tag <div id="content">
kemudian save
<script type="text/babel">
        ReactDOM.render(
        <div>
            <h1>Hello Word Dengan ReactJs</h1>
</div>, document.getElementById("content") ); </script>

#Penjelasan Singkat

Kita memanggil fungsi dari React js denga perintah  ReactDOM.render();
Kemudian pada koding diatas kita  menampilkan teks Hello Word Dengan ReactJs
lalu kita menampilkan teks tersebut pada document atau tag HTLM yang memiliki id content

sehingga Secara keseluruhan isi koding dari file Belajar-Reactjs.html nya seperti berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- REACT LIBRARY-->
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <!-- REACT DOM LIBRARY-->
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <!--BABEL LIBRARY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <title>Belajar React Session 01</title>
</head>
<body>
    <div id="content">Isi konten rout react JS</div>
    <script type="text/babel">
        ReactDOM.render(
        <div>
            <h1>Hello Word Dengan ReactJs</h1>
        </div>, document.getElementById("content") );
    </script>
</body>
</html>
untuk menjalankan program nya, kita cukup memanggil lokasi file tersebut pada browser di komputer kita. atau buka folder tempat disimpan nya file yang telah kita tulis dan klik kanan open with lalu pilih browser nya. sehingga hasilnya menjadi seperti gambar berikut ini.


#Hasil Runing Program

Tutorial Belajar Reactjs #2: Membuat Hello World dengan Reactjs

sampai disini anda telah berhasil membauat sebuah program yang sederhana dengan menggunakan react js. itulah Tutorial Belajar Reactjs #2: Membuat Hello Word dengan Reactjs yang kita telah selesai pelajari. untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #3.


Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..
Sekian Dan Terima kasih...
#Happy Coding

#Keyword Penelusuran
  • Belajar ReactJs 
  • Tutorial ReactJs
  • Belajar ReactJs Untuk Pemula
  • Tutorial ReactJs Untuk Pemula
  • Tutorial Programing ReactJs
  • Belajar ReactJs Bahasa Indonesia
  • Tutorial ReactJs Bahasa Indonesia
  • Membuat Hello Word Dengan Reactjs
  • Belajar ReactJs Untuk Pemula Membuat Hello Word Dengan Reactjs
  • Tutorial ReactJs Untuk Pemula Membuat Hello Word Dengan Reactjs

0 Response to "Tutorial Belajar Reactjs #2: Membuat Hello World dengan Reactjs"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel