SlideShare a Scribd company logo
1 of 13
Download to read offline
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

More Related Content

Similar to Pertemuan 1.pdf

Java Server Pages
Java Server PagesJava Server Pages
Java Server Pagesgalihsatria
 
Tugas 4 rekayasa web 0316
Tugas 4 rekayasa web 0316Tugas 4 rekayasa web 0316
Tugas 4 rekayasa web 0316art david
 
Tutorial Belajar JavaScript untuk Pemula.pdf
Tutorial Belajar JavaScript untuk Pemula.pdfTutorial Belajar JavaScript untuk Pemula.pdf
Tutorial Belajar JavaScript untuk Pemula.pdfsyarifsoden
 
Tugas Rekayasa Web 1
Tugas Rekayasa Web 1Tugas Rekayasa Web 1
Tugas Rekayasa Web 1fahreza yozi
 
Aplikasi JSP dengan netbeans
Aplikasi JSP dengan netbeansAplikasi JSP dengan netbeans
Aplikasi JSP dengan netbeansJogal
 
Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati
 
Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602dewiapril1996
 
Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)Linda Lestari
 
Jsp dengan netbeans versi 6
Jsp dengan netbeans versi 6Jsp dengan netbeans versi 6
Jsp dengan netbeans versi 6Raka Milzam
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati
 
Study Jam 6 Web.pdf
Study Jam 6 Web.pdfStudy Jam 6 Web.pdf
Study Jam 6 Web.pdfanjarmath
 

Similar to Pertemuan 1.pdf (20)

Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
Tugas 4 rekayasa web 0316
Tugas 4 rekayasa web 0316Tugas 4 rekayasa web 0316
Tugas 4 rekayasa web 0316
 
Mari belajar vue js
Mari belajar vue jsMari belajar vue js
Mari belajar vue js
 
Tutorial Belajar JavaScript untuk Pemula.pdf
Tutorial Belajar JavaScript untuk Pemula.pdfTutorial Belajar JavaScript untuk Pemula.pdf
Tutorial Belajar JavaScript untuk Pemula.pdf
 
Jqu
JquJqu
Jqu
 
Jqu
JquJqu
Jqu
 
Tugas Rekayasa Web 1
Tugas Rekayasa Web 1Tugas Rekayasa Web 1
Tugas Rekayasa Web 1
 
Makalah jquery
Makalah jqueryMakalah jquery
Makalah jquery
 
Aplikasi JSP dengan netbeans
Aplikasi JSP dengan netbeansAplikasi JSP dengan netbeans
Aplikasi JSP dengan netbeans
 
J query
J queryJ query
J query
 
J query
J queryJ query
J query
 
J query.
J query.J query.
J query.
 
J query
J queryJ query
J query
 
Ristianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jqueryRistianawati 2114 r0800 jquery
Ristianawati 2114 r0800 jquery
 
Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602Tugas[1] 0317-[dewiapriliani]-[1412510602
Tugas[1] 0317-[dewiapriliani]-[1412510602
 
Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)Tugas 1 (rekayasa web)
Tugas 1 (rekayasa web)
 
Jsp dengan netbeans versi 6
Jsp dengan netbeans versi 6Jsp dengan netbeans versi 6
Jsp dengan netbeans versi 6
 
Ristianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotikRistianawati 2114 r0800 mikrotik
Ristianawati 2114 r0800 mikrotik
 
Study Jam 6 Web.pdf
Study Jam 6 Web.pdfStudy Jam 6 Web.pdf
Study Jam 6 Web.pdf
 
Jeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar JspJeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar Jsp
 

Pertemuan 1.pdf

  • 2. 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.
  • 3. Persiapan Awal untuk Belajar Reactjs Ada beberapa hal yang harus persiapkan untuk memulai belajar Reactjs:  Web Browser  Teks Editor
  • 4. 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.
  • 5. 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;
  • 6. Latihan 1 : hello_react.html
  • 8.  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.
  • 9. 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.