Belajar React JS Dari Awal Buat Yang Nggak Jago JavaScript

Bila belajar lewat YouTube ada kendala atau videonya agak delay dengan suara, sebagai alternatif bisa belajar di web Multinity:

=======

Ya namanya juga hidup kadang bisa JavaScript, kadang nggak bisa JavaScript. Di kesempatan kali ini, Nauval akan mengajari kamu soal React JS. Kamu nggak perlu jago-jago amat soal JavaScript, yang penting punya niat serta tekad yang kuat untuk belajar React JS!

Referensi:

Support:

Array ID

Nauval:

🎥 Timestamps

Chapter 1 – The Basics
00:00:00 Intro
00:02:05 What is React JS?
00:18:16 Create a user interface with vanilla JavaScript
00:24:14 Create a user interface with React JS
00:34:36 Fragment
00:40:47 Nested element
00:45:24 Introduce JSX and Babel
00:59:03 How does Babel works?
01:03:06 Embed JavaScript Expression inside JSX
01:11:18 React component
01:19:48 How does React render an element into the DOM tree?
01:26:55 Recap chapter 1

Chapter 2 – The Essentials
01:33:57 Setup local Babel for precompile scripts
01:49:29 Basic style React element (inline style)
01:54:02 External stylesheet React
01:57:47 Event handling
02:04:14 Component and state (State hooks)
02:18:50 Component lifecycle (Effect hooks)
02:44:33 Conditional rendering
02:54:37 DOM manipulation (Ref hooks)
03:01:48 React list & keys (render multiple components)
03:08:29 Forms
03:19:47 Data fetching (HTTP client request)
03:31:13 Sync data fetching response with UI
03:37:24 The final project (todo list app)
04:38:06 Recap chapter 2

Chapter 3 – The Toolchain
04:50:53 Intro toolchain
05:02:47 Init React project with CRA
05:09:14 Inside create-react-app
05:16:43 React component (separation of concerns)
05:34:37 Styling component in CRA
05:40:08 Static file
05:42:37 Move JavaScript file from old codebase to CRA
05:49:23 Production build with CRA
05:59:24 Recap chapter 3

Chapter 4 – The Router
06:04:42 Intro React Router
06:08:04 Install React Router
06:10:52 Basic routing
06:15:19 How does React Router works?
06:21:32 Nested route
06:24:52 Nested route (shared layout)
06:27:26 Get URL params
06:35:38 No match route
06:38:51 Redirect programmatically
06:44:24 The final project (simple website with multiple pages)

Chapter 5 – The Ending
08:01:58 Deploy CRA to Netlify (method 1: upload folder manually)
08:10:06 Deploy CRA to Netlify (method 2: using CLI)
08:23:47 Closing

Semoga bermanfaat 💖

[W_Ahmaddev]

Semoga Allah memberikan kelapangan kepada mas Nauval dkk untuk menyalurkan ilmunya, Barakallah fiikum.

[muhammadnuralghazali]

NIAT PAKE BANGET 8 jam..!
Makasih banyak..
Semoga ilmunya berkah buat semua orang..
aamiin..

[mhdnauvalazhar]

halo guys, jangan lupa baca deskripsi untuk timestamps-nya ya! dan satu lagi, di akhir2 video suara sama visual agak delay (nggak sinkron), ini karena masalah saat compile video-nya. sebagai alternatif, tutorial ini bisa diakses di sini:

youtube perlu bikin fitur replace video 😭, maapin aku atas ketidaknyamanannya ya guys! ✌️


btw, mau belajar apa lagi next? kasih tau dong!

[iksanhariji]

The best tutorial react, terima kasih mas semoga hidup berkah dan tetap terus berbagi

[zackyhabibie]

gw suka suara sama cara lu ngejelasin bang, ga sakit ditelinga... dari awal nyari bahan belajar reactjs tanpa perlu ahli di js, tapi di sini lu tetep ngejelasin dasarnya sbg perbandingan...
btw gw tertarik sama ebook tailwindcss nya, tapi ntar deh... masih berkutat di video ini... lol
thanks!!! oto subrek...

[nerdis]

alhamdulilah sudah menyelesaikan pemblajaran react js trimkasih mas semoga ilmunya bermanfaat di dunia dan ahirat

[denst]

Sangat2 terbantu dengan tutorial ini.. semoga Allah berikan pahala yang setimpal..
Terima kasih

[daffahanz]

setelah melawan badmood dan disambi garap tugas kuliah, akhirnya selesai juga ini playlist, gila keren lu bang, dari basic fundamental bgt ngajarinnya, beda sama channel lain, sehat terus bang, semangat ngontennya lagi, ditunggu video lainnya, oiya biar ga booring kasih backsound dong hahahahaha

[wahyuleksono]

demi apa nemu postingan video iniiii
emang niatan lagi pengen belajar react malah pemgen beli kursus
makasih banyak ya bang udah bikin video penjelasan sebagus ini 🙏🙏

semoga sehat dan sukses terus buat abangnyaaa🔥🔥🔥

[VGUE_VALT]

Anjay niat bgt ngajar nya 8 jam langsung gw subscribe bang suport mantap 👏

[namasayadenis]

Lu keren banget bang asli. Santai bgt ngomongnya jadi enak didenger. Pokoknya lu harus tetep bikin konten begini gue gamau tau

[cimold]

banyak berkat masbro dibukakan rezeki seluasnya, thank you tutorialnya bang

[andung]

Ilmunya sangat sangat bermanfaat jadi bisa paham betul ekosistem react cuman dalam waktu cepat aja langsung paham di karenakan tiap baris code di jelasin , sukes terus mas smoga jadi amal jariyah

[ros_most]

Ya... Ampuunn knp baru nemu conten kamu sihh!!! Uda seminggu ini gw nyari2 konten tentang ini, blm dpt yg pas di hati gw cara mrk menjelaskannya. Trimakasih... Cara nerangin pembelajarannya sumpah gw seneng bgt!!! Lsg subscribe aja tanpa bnyk mikir. Sukses slalu 👍👍👍

[rizqofathur]

thanks bang tutorialnya, saya jadi paham beda antara js vanilla sama react. tapi bang suara videonya kekecilan. sama kalau boleh request, buat video bikin projek bang dengan react vanilla ini kaya web film atau apapun biar lebih paham lagi saya mengenai konsepnya jika diterapkan langsung kaya gimana.

[nurhalizah]

Enakkkk bangettt jelasinnyaaa😢, makasiii banyakkkk bangggg!

[yasha_tarot]

Salah satu Channel Terbaik... Terniat buat konten. Lengkap... Auto Subscribe

[daynuxer]

Semoga Ilmunya Menjadi Amal Zariyah, Barakallah

[zdxwu]

bangkee gua baru nemu channel bagus ini sekarang. keren-keren bang videonya, ngejelasinnya juga enak. emang bener berasa diajarin temen wkwk. lanjuttt!

[AmriKarisma]

Terima kasih banyak mas. saya sudha ada beberapa project pake reactjs/nexjs tp nonton video ini juga sampai selesai mantap