Cara Belajar React Js dari Pemula sampai Mahir!

Hi Coders! kali ini kita akan membahas roadmap untuk belajar React Js. Guide ini ditujukan untuk kalian semua yang akan atau sedang memulai belajar React. Oke, lansung saja kita bahas!

Prasyarat

Sebelum memulai, ada beberapa prasyarat yang mesti kalian penuhi atau setidaknya sudah familiar dengan beberapa hal yang akan disebutkan di bawah ini:

1. Pengetahuan dasar tentang HTML, CSS, dan Javascript.
2. Pemahaman dasar tentang fitur-fitur ES6. Untuk dapat memulai setidaknya kalian harus tahu bebrapa hal ini: Let, Const, Arrow functions, Imports dan exports, Classes
3. Pemahaman dasar tentang cara penggunaan npm.

Mulai Belajar

Kita bisa menggunakan online code editor untuk latihan atau bisa juga menggunakan create-react-app. Untuk memahami semua dasar-dasar React, kita bisa mulai dengan tutorial berikut:

1. React official documentation dari React
2. Beginners guide to react dari Kent C. Dodds
3. Fundamentals of React dari Sammer Buna

Sekarang setidaknya kita sudah tahu dasar dari React fundamental. Itu cukup untuk memulai mendevelop aplikasi sederhana menggunakan React.

Mulai Bangun Sebuah Proyek

Berikut adalah beberapa ide aplikasi yang dapat kalian buat:

1. React to-do-app
2. Kalkulator sederhana
3. Membanggun Shopping Cart

React Router

React Router membantu kita untuk membuat rute ke aplikasi dari satu halaman ke halaman lainnya. Ini sangat* powerfull* dan mudah digunakan dalam aplikasi React.

Untuk memulainya bisa melihat beberapa referensi berikut:

1. Tutorial React Router dari Paul Sherman
2. React Router and intro to SPA dari Learn Code Academy
3. Routing React apps dari Scotch.io

Contoh proyek

Aplikasi yang bisa kalian buat menggunakan React Router diantaranya:

1. Aplikasi CRUD sederhana
2. Hacker News clone

Webpack

Webpack adalah bundler modul JavaScript yang sangat terkenal. Webpack membantu kita mempertahankan dependensi sebagai file statis untuk proyek sehingga developer tidak perlu lagi melakukannya secara manual. Webpack juga dilengkapi dengan loader. Loader membantu menjalankan tugas tertentu di dalam proyek kita.

Untuk mempelajarinya kalian bisa melihat dokumentasi dari webpack disini.

Server Rendering

Rendering server adalah salah satu fitur paling keren di React. Ini dapat digunakan teknologi back-end apapun.

Server Side Rendering (SSR) di React membantu kita membuat komponen di server dan menjadikannya sebagai HTML di browser. Dan ketika semua modul JavaScript diunduh di browser, React akan mengambil alih. Cukup sederhana bukan?

Pertama-tama coba cek dokumentasinya disini: React-DOM API

Lalu ikuti dengan beberapa tutorial berikut: React server rendering dari Tyler McGinnis React router server rendering dari Roilan Salinas React Server side rendering guide dari Dennis Brotzky

Redux

Redux adalah library JavaScript yang dikembangkan untuk memelihara aplication states. Saat kita membuat aplikasi yang kompleks, ini akan menambah overhead untuk mengelola state di seluruh komponen. Redux membantu kita menyimpan semua state dalam satu sumber. Dan tentu saja React bekerja dengan baik dengan Redux.

Untuk mempelajarinya bisa mulai dengan:

Redux tutorial dari Learn Code Academy Redux tutorial for beginners dari Valentino Gagliardi React Redux dari CSS Tricks.

Tutorial ini lebih dari cukup untuk memulai belajar Redux.

Nah, sudah sedikit tercerahkan mengenai apa saja yang mesti dipelajari? Jika kalian bingung mengenai penjelasan di atas dan lebih suka belajar secara terstruktur, khususnya dalam bahasa Indonesia, tenang... Codepolitan punya solusinya. Kalian bisa mempelajari dasar-dasar React di kelas Belajar Cepat Membuat Web App Berbasis React dan setelah itu bisa melanjutkan materi yang lebih mendalam di kelas Membuat Web Kuliner Menggunakan React.js. Semua materinya lengkap dan pastinya tersedia dalam bahasa Indonesia. Jadi dijamin tidak akan ada kendala bahasa dalam mempelajari React.

Mungkin segitu aja dulu. Happy Coding :)

Sumber: Medium