Belajar ReactJS

Salah satu framework javascript terpopuler jaman now yang dipopulerkan oleh tim dari facebook dan banyak dicari perusahaan

gambar Belajar ReactJS
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

cover playlist Belajar ReactJS

Daftar Pelajaran Track Belajar ReactJS


Belajar ReactJS untuk pemula

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.


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



React komponen Lebih dalam

Kamu sudah belajar dasar dari ReactJS? kita mulai mengenal konsep konsep intermediatenya untuk belajar lebih dalam seputar komponen di sini


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



Nextjs Framework react lebih powerful

Kamu sudah bermain dengan reactjs tapi merasa ada yang kurang? mungkin kamu ingin membuat aplikasi react kamu menjadi ramah di SEO (mesin pencari), bisa membagi kode dengan rapi di setiap halaman agar hanya bagian relevan saja yang hadir saat dibutuhkan, dan masih banyak lagi!


Daftar isi Nextjs Framework react lebih powerful


Intro dan install nextjs

Nextjs bikin aplikasi reactjs kamu menjadi lebih powerful, mulai dari membagi kode per halaman jadi lebih rapi, sistem routing, sampai aplikasi yang bisa terdeteksi mesin pencari (SEO)


Membuat halaman baru dan navigasi

Belajar bagaimana cara membuat halaman baru di nextjs dan mengatur navigasinya


Sharing component

Seperti aplikasi react umumnya kamu bisa membuat komponen yang bisa disharing atau digunakan oleh berbagai komponen lainnya


Layout component

Selain konsep sharing komponen biasa, nextjs juga menawarkan konsep layout component. Untuk bagian bagian besar yang ingin disharing di berbagai komponen


Dasar halaman dinamis

Bagaimana dengan halaman dinamis di nextjs, dimana setiap infonya berbeda namun struktur tampilannya sama?


Url lebih cantik dengan route masking

URL halaman dinamis nextjs kamu bisa lebih cantik, agar sedap dipandang mata dan juga saat dilihat di SEO (mesin pencari) menggunakan route masking


Server side support untuk nextjs

Salah satu bagian powerful dari nextjs adalah SSR alias server side support. Dimana data data kamu akan dirender dari sisi server agar terbaca oleh SEO sebelum digunakan user


Fetch data api di getInitialProps

Belajar mengkonsumsi data dari API di nextjs menggunakan fungsi getInitialprops untuk menampilkan data saat halaman pertama kali diload


Meta tag dinamis nextjs

Masih di tema SEO, kali ini kita akan melihat cara mengubah meta tag yang umum kamu gunakan di website untuk halaman dinamis di nextjs


Css in js pada nextjs

Cara menghias aplikasi react nextjs dengan css, sedikit berbeda dari css biasa


Deploy nextjs dengan now

Saatnya kita deploy aplikasi nextjs ini menggunakan fitur now dari zeit.co agar bisa live dan dilihat oleh semua orang



Sistem login di react dengan JWT

Kamu sudah cukup jauh belajar reactnya? sudah normal, kalau aplikasi yang ingin kamu buat mengandung sistem authentikasi. Di kelas ini kita lihat cara login dan logout untuk sistem API authentikasi yang menggunakan Json Web Token (JWT) dengan memanfaatkan react context


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.



Belajar state mangement React dengan Redux

Aplikasi react kamu semakin besar? mengatur state untuk dikonsumsi antar komponen semakin sulit? tenang, ada reduxjs datang membantu! dengan redux, mengolah state akan menjadi lebih jelas dengan fungsi tambahan seperti middleware dan juga dev tools yang memudahkan development kamu


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




Daftar Materi Belajar ReactJS untuk pemula

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.


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


Tag: Kenapa belajar ReactJS, Mengenal apa itu ReactJS, Di mana mulai belajar ReactJS, mulai dari mana belajar ReactJS , tutorial ReactJS bahasa indonesia untuk pemula dari dasar, apa kegunaan ReactJS, bagaimana cara menggunakan ReactJS, belajar bertahap ReactJS, kursus online ReactJS