Belajar ReactJS

Daftar isi Belajar ReactJS untuk pemula

Apa itu, kenapa dan cara install reactjs

berkenalan dengan salah satu framework javascript yang sangat panas yaitu reactjs

Apa itu jsx

apa itu sistem templating jsx pada react js, seperti apa prakteknya?

Component dan props di react

Mengenal komponen pada react js sebagai senjata pertama untuk menggunakan ulang kode nanti, kita juga akan melihat props untuk mengoper argumen

State di react

State di react bisa teman-teman bayangkan seperti database local, bagaimana kita mengolah data di setiap komponennya

Handle event react js

Sama seperti javascript asli, reactjs bisa menerima event event tertentu dari user, cara penggunannya pun mirip

Membuat todolist reactjs

Membuat aplikasi todolist sederhana dengan reactjs, sebagai awal latihan kita dengan yagn sudah dipelajari sebelumnya

Immutable di reactjs

Konsep immutable pada reactjs perlu diketahui, berhubungan dengan cara kerja react mengolah dan memodifikasi data data nanti

Konsumsi API dengan react

Bagaimana dengan membuat single page application alias SPA pada react? mungkkin! kita akan melihat sistem routing dari react router

Halaman SPA dan routing dengan react router dom

Kadang kita membutuhkan tag parent untuk membungkus komponent, tapi secara visual tidak ingin menambahkannya, tenang, ada react fragment

React fragment sebagai pembungkus

Belajar hosting aplikasi react kamu di githup pages dengan gratis

Hosting react di github pages

Belajar hosting aplikasi react kamu di nowjs dengan gratis

Hosting reactjs di now dan tempat lain

Belajar hosting aplikasi react kamu di nowjs dengan gratis

Daftar isi React komponen Lebih dalam

Composition children prop dan konten fleksibel

konsep composiition children prop pada react untuk konten yang lebih fleksibel

Mengenal react context

Kamu butuh state global yang bisa diakses dari berbagai komponen, tenang! react context siap membantu kamu

Contexttype di context api

mengenal penggunaan contexttype pada suatu komponent dari react context API

Basic HOC higher order component

Dasar dari HOC alias higher-order component pada react, sebagai solusi untuk membuat kode yang reusable

Contoh HOC dan localstorage

Sekarang kita lihat penggunaan higher order component dengan localstorage di react

Menggunakan HOC dan context

Sekarang kita lihat hoc (higher order component) dimanfaatkan untuk membantu penulisan react context yang lebih rapi

Render props di react

Ada satu lagi konsep yang menarik, yaitu render props, teman-teman akan melihat kemiripannya dengan hoc

Daftar isi Apa itu React Hooks

Kenalan dengan React Hooks, useState

Apa itu react hooks? kita akan berkenalan dengan react hooks yang membuat function component React menjadi lebih dinamis dan powerful,
kita juga akan demo react hooks yang pertama yaitu useState

UseEffect react hooks

Untuk efek samping pada react hooks, sebagai pengganti lifetime cycle di class component

UseContext react hooks

UseContext pada react hooks, digunakan untuk mengkonsumsi context API dari react

Membuat custom react hooks

Untuk membuat react hooks kamu bisa dipakai berkali kali, kamu bisa membuat custom react hook sendiri"

Daftar isi Sistem login di react dengan JWT

Persiapan auth jwt di react

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

Persiapan react untuk jwt

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

Component untuk login

Kita mulai dari bagian form loginnya. Menyediakan dua input dan satu tombol sederhana yang nantinya akan berkomunikasi dengan server

Membuat context provider untuk auth

Untuk mengatur state dari sistem authentikasi di react ini, kita akan menggunakan react context API. Di bagian ini kita mulai dari pembuatan Providernya

Metode login dan logout

Tidak lupa untuk menyiapkan dua metode utama yaitu login dan logout pada providernya agar bisa dishare di berbagai komponen

Consumer context di dalam higher order component

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

Menggunakan HOC dan context di component

Kita lihat bagaimana cara menggunakan HOC alias higher order component dan context provider yang sudah kita buat sebelumnya di component react

Halaman profile saat berhasil login

Sediakan halaman profile dimana user akan diredirect ke bagian ini saat sudah berhasil login menggunakan sistem JWT (json web token)

Halaman hanya bisa diakses setelah login

Memanfaatkan react-router-dom, kita bisa membuat halaman yang dilindungi / terproteksi, dimana hanya user yang sudha login saja yang bisa mengkases halamannya

Akses endpoint dengan token

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

Logout react auth

Untuk logout akan lebih sederhana di bagian react ini, kita hanya perlu menghapus data di localstoragenya

Closing react auth jwt

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

Berkenalan 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

Tiga prinsip utama redux

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

Contoh aplikasi redux

Kita akan melihat contoh aplikasi redux sederhana dengan memanggil package redux melalui CDN tanpa reactjs

Membuat fungsi createstore sendiri

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

Package react redux

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

Menyiapkan aplikasi todo

Kita siapkan aplikasi todo list (daftar tugas) yang akan kita buat dengan reactjs dan redux sebagai state menagementnya

Komponen form dan fungsi connect

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

Action dan reducer untuk addtodo

Sudah pernah mendengar action dan reducer di redux? okay, sekarang kita gunakan untuk menambahkan daftar tugas alias fungsi addtodo pada aplikasi ini

Memanggil data store redux dengan mapStateToProps

memanggil data dari store redux pada reactjs dan menghubungkannya ke komponen bisa kita lakukan dengan bantuan mapStateToProps dari package react-redux

Memisahkan komponen todo

Kita bisa memisahkan komponen todo agar lebih rapi seperti di reactjs biasa, sehingga komponen utama kita bisa tetap dibaca dengan mudah

Refactor todos

Sepertinya komponen todos kita bisa dibuat lebih rapi, kita akan melakukan refactor todos dengan mengubah kelas component menjadi function component react

Fungsi toggle todo

Sekarang kita implementasikan fungsi toggle todo yang sebelumnya tertahan. Fungsi ini akan membuat setiap daftar tugas jadi punya status apakah sudah selesai atau belum

Dispatch action dengan mapDispatchToProps

Kita juga bisa melakuakn dispatch action redux dengan mapDispatchToProps dari package react-redux untuk digunakan di dalam komponen reactjsnya

Menambahkan filter

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

Mengenal presentational dan container component

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

Debug dengan redux dev tools

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!

Mengenal middleware untuk logging

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

Fungsi async dengan redux thunk

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

State awal preloadedState dan componentDidMount

Setiap aplikasi redux bisa kita berikat state awal, ada pilihan dengan memberikannya melalui preloadedState atau fungsi componentDidMount seperti di reactjs biasa

Membuat fake api dengan jsonserver

Kamu butuh API untuk prototype dengan cepat? ada yang menarik nih dari jsonplaceholder typicode, kita bisa membuat fake api dengan cepat

Init data dari API pada redux

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

Memakai dispatch di class component

Kita akan kembali memakai dispatch di class component, seiring dengan kebutuhan aplikasi todo ini yang terus berkembang, komponen kita juga harus menjadi ikut fleksibel

Mengubah struktur store

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

Saat api loading dan error

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

Mengirim data ke api di redux

Kamu juga bisa mengirim data ke api di aplikasi react redux ini, caranya sama seperti melakukan request dengan package axios yang kita install