Pengenalan ReactJS
0 likes790 views
Dokumen ini adalah modul pengenalan untuk pemula belajar ReactJS, mencakup instalasi, dasar-dasar seperti JSX, komponen, state, dan props, serta siklus hidup komponen. ReactJS memungkinkan pengembangan UI yang efisien dan responsif menggunakan virtual DOM, serta dapat digunakan untuk aplikasi di sisi server dan klien. Selain itu, modul ini juga menyediakan latihan praktis seperti pembuatan todo list dan penggunaan React Router.
Pengenalan ReactJS
- 1. Akhmad Fauzi Hasibuan SOFTWARE DELIVERY PROFESIONAL REACT NATIVE PROGRAMMER akhmadfauzihasibuan@gmail.com | (m) +6281371666601 | https://github.com/fauzzi | http://www.thelekta.byethost8.com Pengenalan ReactJs Batam June 02, 2018 BatamJs Community React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACE
- 2. 2 Kata Pengantar Modul ini merupakan bahan latihan ReactJs untuk pemula yang belum pernah memulai samasekali atau pun yang sudah pernah membuat aplikasi pakai ReactJs sebagai bahan ulasan konsep dasar dari ReactJs. Setelah memahami konsep dasar dari ReactJs ini, kita akan lebih paham dan percaya diri untuk bisa membuat tampilan website dengan ReactJs. Pengetahuan dasar yang diperlukan untuk dapat melanjutkan materi ini adalah Javascript, HTML5, da CSS. Walaupun ReactJs tidak menggunakan sepenuhnya HTML, JSX adalah suatu komponen mirip dengan Tag HTML yang kita bentuk secara sendirinya. Pengetahuan EcmaScript 2015 juga di perlukan untuk pengetahuan dasar kita. Daftar Isi I. Pengenalan ReactJs II. Instalasi III. Dasar-dasar ReactJs 1. JSX 2. Component 3. State 4. Props IV. Component Lifecycle V. Latihan 1. Todo List 2. React Router
- 3. 3 I. Pengenalan ReactJs Original Author Jordan Walke (https://github.com/jordwalke) Software Engineer di Facebook. Developer ReactJs saat ini -> Facebook, Instagram & Community. Write in JavaScript, Platform Cross Platform. Community & Forum : ● https://stackoverflow.com/questions/tagged/reactjs ● https://stackoverflow.com/questions/ask?tags=reactjs ● https://discuss.reactjs.org/ ● https://js.coach/ Merupakan salahsatu Facebook framework. Biasanya digunakan untuk membuat UI Component yang dapat di kompilasi sama seperti bahasa pemrograman lainnya. Untuk memanipulasi DOM dengan model pemrograman yang sederhana dan kinerja yang lebih baik. ReactJs juga dapat ditampilkan di segi server menggunakan Node, dan native app React Native.
- 4. 4 Fitur-fitur di ReactJs ● Virtual DOM Langkah umum cara kerja Virtual DOM ❏ Setiap kali ada perubahan data yang mendasar, seluruh UI di render kembali dalam representasi Virtual DOM ❏ Kemudin perbedaan antara representasi DOM sebelumnya dan yang baru dihitung.
- 5. 5 ❏ Setelah perhitungan selesai, DOM yang sebenarnya akan diperbaharui hanya dengan hal-hal yang benar-benar berubah. ● JSX Merupakan ekstensi sintak di Javascript. Dalam pengembangan ReactJs tidak diperlukan akan tetapi dianjurkan. JSX Code sebagai berikut : Akan di kompail sebagai berikut :
- 6. 6 ● Component Di React semunya adalah tentang Component, berfikir bagaimana caranya membuat suatu component seperti Tag HTML. Hal ini mempermudah kita saat pengembangan nantinya , Tampak pada gambar di bawah ini:
- 7. 7 ● Unidirectional data flow and Flux React mengimplementasikan aliran data satu arah (one-way data flow) yang membuatnya mudah untuk kita nalar. Flux merupakan pola (pattern) yang membantu menjaga data kita satu arah juga. Kapan pun setiap nilai prop berubah, memungkinkan menampilkan perubahan component dari fungsi render component tersebut. ● License React dilisensi oleh Facebook Inc. Dokumentasi berlisensi oleh CC BY 4.0.
- 8. 8 Keuntungan di ReactJs ● Menggunakan virtual DOM yang merupakan object JavaScript. Ini akan meningkatkan kinerja aplikasi, karena JavaScript Virtual DOM lebih cepat daripada DOM biasa. ● Dapat digunakan disisi client dan server serta dengan framework lainnya seperti Laravel, Flask, dan sebagainya. ● Dengan pola Component struktur kode lebih mudah di baca & gampang dimaintain untuk aplikasi skala besar sekalipun. Batasan di ReactJs ● Hanya mencakup lapisan view layer di aplikasi, untuk tahap lebih lanjut diperlukan teknologi lain untuk tools lainnya yang lebih lengkap oleh pengembang. ● Inline template dan JSX, yang agak aneh untuk pengembang pemula.
- 9. 9 II. Instalasi Yang perlu di install untuk bekerja ReactJs adalah Node.js, command line React interface dan, IDE yang digunakan adalah Visual studio code(4). Node.js Node.js dapat di download (1) dan installer node.js bebarengan dengan npm yang merupakan package manager dari javascript. NPM sering digunakan untuk menambahkan package lainnya seperti react router dom (npm install react-router-dom --save) (2) untuk keperluan di suatu project. Juga dapat menggunakan alternatif lain package manager seperti yarn (3). Yarn sama hal nya dengan npm. Usahakan ambil yang terbaru atau bisa ikut version dari gambar di bawah ini. Untuk dapat memastikan node.js atau pun yarn terinstall, dapat menggunakan perintah di bawah ini: > node --version > npm --version > yarn --version 1. https://nodejs.org/en/download/ 2. https://github.com/ReactTraining/react-router 3. https://yarnpkg.com/docs/install/ 4. https://code.visualstudio.com/download Berikut adalah version yang sudah terinstal.
- 10. 10 React CLI Setelah package manager di install, untuk dapat menggunakan package manager ReactJs dapat di install melalui command prompt dengan perintah : Perintah di atas akan menghasilkan suatu perintah lagi untuk memulai membuat aplikasi ReactJs. Percobaan setelah instalasi: Tunggu sampai proses download selesai maka akan membuat sebuah folder project my-app. Setelah selesai lanjut ke folder my-app tadi dengan perintah di bawah ini: Untuk dapat menjalankan project kita tadi, cukup hanya perintah di bawah ini makan akan membuka sebuah halaman web di browser kesayangan kita, biasanya dengan port 3001.
- 11. 11 III. Dasar-dasar ReactJs 1. JSX ReactJs menggunakan JSX untuk templat nya. Bukan JavaScript biasa namun tidak perlu menggunakannya, berikut cuap-cuap dari JSX: - Lebih cepat karena melakukan optimasi saat di kompilasi ke JavaScript. - Aman, sebagian kesalahan di tangkap oleh kompilasi. - Mudah untuk menulis template bagi yang sudah terbiasa dengan HTML Silahkan buat folder screensApp.jsx Ubah index.js kita menjadi
- 12. 12 Untuk latihan bisa di buat script di bawah ini:
- 13. 13 2. Component Untuk membuat Component cukup mudah, misal kita akan membuat Component MyHeader yang nanti nya di panggil di main aplikasi kita. Sebagai contoh silahkan buat struktur folder berikut : Isi dari MyHeader adalah copy paste dari App.js sebelumnya, beserta style nya yang kita ubah namanya menjadi MyStyle.css
- 14. 14 Import MyHeader.js di index.js file yang sudah kita buat sebelumnya 3. State State dikatakan sebagai mutable yang artinya ialah nilainya dapat berubah atau diperbaharui dalam suatu waktu. Untuk dapat memahami penggunaan state, ubah sedikit main project kita App.jsx sebagai berikut:
- 15. 15 4. Props Prop dapat dikatakan sebagai suatu ketetapan yang artinya adalah nilainya tidak dapat berubah dalam suatu waktu (immutable). Penggunaan prop cukup gampang, ubah sedikit Component MyHeader.js kita menjadi :
- 16. 16 IV. Component Lifecycle ReactJs memiliki aturan dari Component yang kita buat, ini merupakan suatu fungsi bawaan dari ReactJs untuk melihat alur dari pertamakali aplikasi di jalankan sampai aplikasi itu berhenti atau di tutup. Ada beberapa fungsi bawaan dari Component sebagai berikut : ● componentWillMount Dieksekusi sebelum dirender, di sisi server maupun client. ● componentDidMount Dieksekusi setelah dirender. Misal ada AJAX request makan kita bisa update state yang sudah kita buat sebelumnya disini. ● componentWillReceiveProps Dipanggil segera setelah ada pembaharuan update sebelumnya. Disini juga bisa update state. ● shouldComponentUpdate Harus ada return value true or false, Ini akan mengakibatkan component akan di perbaharui atau tidak. Default nya adalah true. Jika kita yakin bahwa komponen tidak perlu dirender setelah state atau props diperbarui, Kita dapat mengembalikan nilai false. ● componentWillUpdate Di panggil sebelum rendering.
- 17. 17 ● componentDidUpdate Dipanggil setelah rendering. ● componentWillUnmount Dipanggil setelah component unmounted dari DOM. Maksudnya unmounted dari main aplikasi kita. Untuk dapat memahami bisa di tambahkan fungsi berikut di dalam code kita sebelumnya dan lihat hasilnya di inspector browser masing-masing.
- 18. 18 V. Latihan 1. Todo List https://reactjs.org/ 2. React Router https://www.tutorialspoint.com/reactjs/reactjs_router.htm
- 19. 19 Terimakasih Akhmad Fauzi Hasibuan SOFTWARE DELIVERY PROFESIONAL REACT NATIVE PROGRAMMER akhmadfauzihasibuan@gmail.com | (m) +6281371666601 | https://github.com/fauzzi | http://www.thelekta.byethost8.com Please follow and we will get in touch in my social media : https://www.facebook.com/fauzi.jobs https://www.linkedin.com/in/fauzzi/ https://twitter.com/twitt_fauzi https://www.instagram.com/fauzzzzi/ https://www.behance.net/hsbusub349 https://stackoverflow.com/users/1378205/fauzi Discord @fauzi Semoga Bermanfaat
- 20. 20 Please join with us Untuk bisa berbagi lebih lanjut : BatamJS Community Berkaya Bersama dengan Teknologi JS Terkini https://www.facebook.com/groups/321352068292193/ Telegram Channel @batamjs t.me/batamjs