Front End Programming

Pertemuan 1
Dasar ReactJs
Apa Itu React JS?

 React JS adalah sebuah library milik bahasa pemrograman JavaScript.

Biasanya, orang-orang juga menyebut React JS sebagai framework.
 Sebelumnya, kita sudah pernah membahas tentang React Native, yaitu
framework yang digunakan untuk mengembangkan aplikasi mobile. React
Native dan React JS sama-sama berasal dari JavaScript. Namun, React JS
digunakan untuk pengembangan aplikasi berbasis web yang menarik dan
interaktif.
 Sama seperti React Native, React JS juga dikembangkan oleh Facebook.
Tepatnya oleh seorang software engineer bernama Jordan Walke. Ia
mengembangkan library ini pada tahun 2011. Akhirnya, dua tahun
kemudian, React JS dipublikasikan untuk umum dan bersifat open source.
Persiapan Awal untuk Belajar Reactjs

Ada beberapa hal yang harus persiapkan untuk memulai belajar Reactjs:
 Web Browser
 Teks Editor
Konsep Dasar Reactjs

 Pada dasarnya Reacjs hanya melakukan render komponen saat ada data
yang berubah. Seperti namanya “React” ia akan breaksi saat ada
perubahan data (reaktif).
 Komponen adalah bagian-bagian dari UI, contohnya seperti tombol, label,
input, dll. Komponen juga bisa dibentuk dari komponen yang lain.
Langkah-langkah

Langkah-langkah yang harus dilakukan untuk membuat aplikasi react adalah

sebagai berikut:
 Menambahkan library react ke HTML;
 Membuat elemen HTML untuk wadah aplikasi;
 Membuat komponen;
 Me-render komponen ke HTML;
Latihan 1 : hello_react.html
Hasilnya tampilan sebagai berikut
 Library ini langsung kita ambil dari internet.
 Pertama kita membutuhkan library react react.js untuk membuat
komponen.
 Kedua kita membutuhkan react-dom.js untuk me-render komponen ke
dalam HTML.
 Terakhir kita membutuhkan babel.js kode Javascript versi ES6 dapat
dikenali pada web browser.
 Tidak semua web broser mendukung ES6, karena itu kita membutuhkan
babel.js agar aplikasi dapat berjalan di semua web browser.
Mengenal JSX

 SX (Javascript XML) adalah extension dari Javasript. JSX membuat kita bisa
menggunakan HTML di dalam Javascript.
 JSX sama seperti XML dan HTML, ia juga memiliki nama tag, atribut, dan
elemen anak.
 Sebenarnya kita bisa saja menggunakan React tanpa JSX. Tapi tidak
direkomendasikan, karena lebih susah dibaca dan ditulis.
Latihan 2 :Latihan_jsx.html
Hasilnya tampilan sebagai berikut
Latihan 3 :
Hasilnya tampilan sebagai berikut