Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Aplikasi website kamu sudah semakin kompleks? sulit untuk mengatur variable, fungsi dan javascript di berbagai file untuk keperluan yang sama? Waktunya berkenalan dengan React JS!
ReactJS adalah library javascript yang bisa memudahkan kamu membuat tampilan UI yang interaktif (satu data yang sama bisa saling berkomunikasi), dimana bagian bagiannya nanti akan dibentuk dalam komponen agar mudah dipakai berkali-kali. Tentu kamu ngga mau membuat struktur yang sama dipakai diberabagai bagian aplikasi kamu berulang kali.
Sudah beberapa tahun akhir ini reactjs unggul dari segi popularitas dan permintaan lowogan pekerjaan termasuk di Indonesia. Tidak ada salahnya kamu untuk mulai belajar react js dari dasar sekarang. Jangan lupa kamu perlu familiar dengan javascript dan penulisan es6 sebelumnya
React dikembangkan oleh Facebook dan dirilis pertama kali pada tahun 2013. Dengan menggunakan pendekatan komponen, React memungkinkan pengembang untuk memisahkan antarmuka pengguna menjadi bagian-bagian kecil yang dapat dikelola secara terpisah, disebut komponen.
Berikut ini beberapa fitur dan konsep kunci dalam React.js:
Komponen adalah bagian-bagian kecil yang dapat dipisahkan dari antarmuka pengguna. Setiap komponen dalam React memiliki keadaan (state) dan dapat menerima properti (props) sebagai input dan menghasilkan tampilan UI yang diperbarui berdasarkan keadaan atau properti tersebut.
React menggunakan konsep Virtual DOM untuk meningkatkan kinerja aplikasi. Virtual DOM adalah representasi virtual dari struktur DOM aktual yang ada di browser. Saat ada perubahan dalam keadaan komponen, React memperbarui Virtual DOM terlebih dahulu, membandingkannya dengan DOM aktual, dan hanya memperbarui perubahan yang diperlukan untuk meminimalkan jumlah manipulasi langsung pada DOM aktual.
JSX adalah ekstensi sintaksis yang digunakan dalam React untuk memungkinkan penulisan markup HTML di dalam kode JavaScript. Ini mempermudah pengembang dalam menggabungkan logika JavaScript dan tampilan UI dalam satu tempat.
Reconciler adalah bagian dalam React yang bertanggung jawab untuk membandingkan Virtual DOM dengan DOM aktual dan memperbarui hanya elemen yang berubah. Reconciler membantu meningkatkan kinerja dengan meminimalkan manipulasi langsung pada DOM aktual.
React memiliki komunitas pengembang yang besar dan aktif, dengan dukungan dokumentasi yang baik dan berbagai pustaka dan alat pihak ketiga yang tersedia. Ini memudahkan pengembang dalam mencari solusi, berbagi pengetahuan, dan memperluas kemampuan aplikasi React dengan komponen-komponen yang sudah ada.
Link: Belajar ReactJS
React adalah “anak baru” yang sangat populer di pecinta javascript. Library yang dikelola oleh tim facebook ini banyak digunakan di berbagai proyek termasuk di Indonesia
Daftar isi Belajar ReactJS untuk pemula
berkenalan dengan salah satu framework javascript yang sangat panas yaitu reactjs
apa itu sistem templating jsx pada react js, seperti apa prakteknya?
Mengenal komponen pada react js sebagai senjata pertama untuk menggunakan ulang kode nanti, kita juga akan melihat props untuk mengoper argumen
State di react bisa teman-teman bayangkan seperti database local, bagaimana kita mengolah data di setiap komponennya
Sama seperti javascript asli, reactjs bisa menerima event event tertentu dari user, cara penggunannya pun mirip
Membuat aplikasi todolist sederhana dengan reactjs, sebagai awal latihan kita dengan yagn sudah dipelajari sebelumnya
Konsep immutable pada reactjs perlu diketahui, berhubungan dengan cara kerja react mengolah dan memodifikasi data data nanti
Bagaimana dengan membuat single page application alias SPA pada react? mungkkin! kita akan melihat sistem routing dari react router
Kadang kita membutuhkan tag parent untuk membungkus komponent, tapi secara visual tidak ingin menambahkannya, tenang, ada react fragment
Belajar hosting aplikasi react kamu di githup pages dengan gratis
Belajar hosting aplikasi react kamu di nowjs dengan gratis
Belajar hosting aplikasi react kamu di nowjs dengan gratis Daftar isi React komponen Lebih dalam
konsep composiition children prop pada react untuk konten yang lebih fleksibel
Kamu butuh state global yang bisa diakses dari berbagai komponen, tenang! react context siap membantu kamu
mengenal penggunaan contexttype pada suatu komponent dari react context API
Dasar dari HOC alias higher-order component pada react, sebagai solusi untuk membuat kode yang reusable
Sekarang kita lihat penggunaan higher order component dengan localstorage di react
Sekarang kita lihat hoc (higher order component) dimanfaatkan untuk membantu penulisan react context yang lebih rapi
Ada satu lagi konsep yang menarik, yaitu render props, teman-teman akan melihat kemiripannya dengan hoc Daftar isi Apa itu React Hooks
Persiapan untuk melakukan authentikasi dengan jwt(json web token) di reactjs. Kamu bisa menonton pembuatan API dari sisi servernya disini JSON Web Token pada NodeJS
Setelah dari sisi server, sekarang kita siapan untuk bagian frontend react untuk mengkonsumsi API yang menggunakan jwt. Ada axios untuk mengkonsumsi API dan react-router-dom untuk mensimulasikan halaman profile nantinya
Kita mulai dari bagian form loginnya. Menyediakan dua input dan satu tombol sederhana yang nantinya akan berkomunikasi dengan server
Untuk mengatur state dari sistem authentikasi di react ini, kita akan menggunakan react context API. Di bagian ini kita mulai dari pembuatan Providernya
Tidak lupa untuk menyiapkan dua metode utama yaitu login dan logout pada providernya agar bisa dishare di berbagai komponen
Selanjutnya consumer provider akan kita bungkus di dalam higher order component react agar tidak perlu mengulangi semua state dan metodenya di komponen yang akan menggunakan
Kita lihat bagaimana cara menggunakan HOC alias higher order component dan context provider yang sudah kita buat sebelumnya di component react
Sediakan halaman profile dimana user akan diredirect ke bagian ini saat sudah berhasil login menggunakan sistem JWT (json web token)
Memanfaatkan react-router-dom, kita bisa membuat halaman yang dilindungi / terproteksi, dimana hanya user yang sudha login saja yang bisa mengkases halamannya
Setelah belajar menerima tokennya di react, sekarang sebaliknya kita lihat cara mengirim token untuk mengakses endpoint tertentu yang dilindungi JWT dari sisi server memanfaatkan konfigrai header axios
Untuk logout akan lebih sederhana di bagian react ini, kita hanya perlu menghapus data di localstoragenya
Kita sudah membahas cara login dan logout di reactjs menggunakan json web token (JWT), sekarang coba bikin sistem signup (register) yang hanya memerlukan CRUD biasa. Daftar isi Belajar state mangement React dengan Redux
Redux adalah salah satu state management yang sangat populer digunakan di reactjs. Tapi redux sebenarnya tidak tergantung dengan reactjs itu sendiri. Dengan redux kita akan punya state yang bisa dishare di seluruh aplikasi, menggunakan middleware dan masih banyak lagi
Ada tiga prinsip utama redux. Satu, state adalah single-source-of-truth atau semua data state yang ingin dishare hanya ada dan bersumber dari state. Dua, state tidak bisa diubah begitu saja, kita perlu menggunakan bantuan action untuk memanipulasi state. Tiga, manipulasi state dibuat dengan pure function, sebuah fungsi yang melakukan tugas tanpa efek samping
Kita akan melihat contoh aplikasi redux sederhana dengan memanggil package redux melalui CDN tanpa reactjs
yuk belajar cara membuat fungsi createstore sendiri, ternyata istilah-istilah yang kita dengar sebelumnya tidak begitu mengerikan, fungsi createstore di redux sebenarnya cukup sederhana dari sisi javascript
Untuk mulai menggunakan redux di aplikasi reactjs kamu, kita akan menginstall package react-redux, package resmi untuk memudahkan kita berinteraksi antar komponen dengan redux pada reactjs
Kita siapkan aplikasi todo list (daftar tugas) yang akan kita buat dengan reactjs dan redux sebagai state menagementnya
Mulai dari yang sederhana yaitu membuat komponen form untuk menambahkan tugas dan mengenalkan fungsi connect dari react-redux yang berguna untuk menghubungkan komponen dan fungsi pada redux
Sudah pernah mendengar action dan reducer di redux? okay, sekarang kita gunakan untuk menambahkan daftar tugas alias fungsi addtodo pada aplikasi ini
memanggil data dari store redux pada reactjs dan menghubungkannya ke komponen bisa kita lakukan dengan bantuan mapStateToProps dari package react-redux
Kita bisa memisahkan komponen todo agar lebih rapi seperti di reactjs biasa, sehingga komponen utama kita bisa tetap dibaca dengan mudah
Sepertinya komponen todos kita bisa dibuat lebih rapi, kita akan melakukan refactor todos dengan mengubah kelas component menjadi function component react
Sekarang kita implementasikan fungsi toggle todo yang sebelumnya tertahan. Fungsi ini akan membuat setiap daftar tugas jadi punya status apakah sudah selesai atau belum
Kita juga bisa melakuakn dispatch action redux dengan mapDispatchToProps dari package react-redux untuk digunakan di dalam komponen reactjsnya
Untuk mengorganisir data yang banyak, hal yang normal untuk menambahkan sebuah filter, seperti di aplikasi kita ini, akan ada filter untuk aplikasi todo yang sudah selesai dan belum selesai
Pada penggunaan redux di aplikasi reactjs, tanpa sadar komponen kita akan menjadi sulit dibaca, konsep yang menarik untuk menyelesaikan masaha ini adalah memisahkan antara presentational dan container component
Kamu bisa melakuakn debug dengan redux dev tools dari remotedevio, dengna ini kita bisa melihat dengan detail, state kita seperti apa dan action apa saja yang terpanggil, tentunya masih banyak lagi!
Salah satu kelebihan redux adalah kita bisa mengimplementasikan middleware, yang bertugas untuk menangani efek samping karena kita tidak boleh mengganggu action dan reducer yang harusnya pure funciton, di contoh ini kita melihat untuk logging middleware
Selain fungsi biasa (synchronous, dengan bantuan middleware kita juga bisa melakukan fungsi async seperti memanggil API. Karena itu middleware kita sekarang akan butuh bantuan package redux thunk
Setiap aplikasi redux bisa kita berikat state awal, ada pilihan dengan memberikannya melalui preloadedState atau fungsi componentDidMount seperti di reactjs biasa
Kamu butuh API untuk prototype dengan cepat? ada yang menarik nih dari jsonplaceholder typicode, kita bisa membuat fake api dengan cepat
Bagiamana dengan init data atau set data state awal dari API pada aplikasi redux di reactjs? karena kita sudah mengenal middleware dan redux thunk, ini akan lebih mudah
Kita akan kembali memakai dispatch di class component, seiring dengan kebutuhan aplikasi todo ini yang terus berkembang, komponen kita juga harus menjadi ikut fleksibel
Rombak besar-besaran! tidak ko, kita hanya akan mengubah struktur store kita agar menjadi lebih fleksible. Dengan ini, state reduxnya akan mudah menerima berbagai data baru
Bagiamana dengan kondisi saat request api loading dan error. Di react redux disarankan untuk melakuakn dispatch action untuk setiap kondisi dari aplikasi API nya, bukan hanya pada saat sukses saja
Kamu juga bisa mengirim data ke api di aplikasi react redux ini, caranya sama seperti melakukan request dengan package axios yang kita install
Saya yakin teman-teman sudah mendengar gosip tentang framework javascript yang satu ini, reactjs! React banyak digunakan di perusahaan besar, begitu juga di Indonesia, sedang banyak perusahaan yang mencari talenta yang bisa menggunakan reactjs.
berkenalan dengan salah satu framework javascript yang sangat panas yaitu reactjs
apa itu sistem templating jsx pada react js, seperti apa prakteknya?
Mengenal komponen pada react js sebagai senjata pertama untuk menggunakan ulang kode nanti, kita juga akan melihat props untuk mengoper argumen
State di react bisa teman-teman bayangkan seperti database local, bagaimana kita mengolah data di setiap komponennya
Sama seperti javascript asli, reactjs bisa menerima event event tertentu dari user, cara penggunannya pun mirip
Membuat aplikasi todolist sederhana dengan reactjs, sebagai awal latihan kita dengan yagn sudah dipelajari sebelumnya
Konsep immutable pada reactjs perlu diketahui, berhubungan dengan cara kerja react mengolah dan memodifikasi data data nanti
Bagaimana dengan membuat single page application alias SPA pada react? mungkkin! kita akan melihat sistem routing dari react router
Kadang kita membutuhkan tag parent untuk membungkus komponent, tapi secara visual tidak ingin menambahkannya, tenang, ada react fragment
Belajar hosting aplikasi react kamu di githup pages dengan gratis
Belajar hosting aplikasi react kamu di nowjs dengan gratis
Belajar hosting aplikasi react kamu di nowjs dengan gratis