Materi Bimbingan Penggunaan React

Pengenalan React

• Apa itu React
• Konsep “Atomic Design Methodology”
• Membuat komponen React pertama
  • Timer
  • Tombol counter
  • Text input
  • Olah data
• Pengenalan lifecycle komponen React (teori)
• Komponen React lanjutan
  • Dropdown menu
  • Color picker
  • Wrapper untuk sebuah SVG menggunakan Raphael

Pengenalan NPM

• Apa itu NPM
• Instalasi Node
• Contoh penggunaan package.json
• npm install [--save | -g]
• npm start

Pengenalan ES6

• Apa itu ES6
• Beberapa fitur baru ES6
  • let & const
  • Fat arrow
  • Spread
  • Template literal
  • for…of
  • Map dan Set
  • Destructuring
  • Promises
  • Classes dan modules
• Penggunaan Babel dan Webpack
  • Instalasi webpack global
  • Mengenal Babel & Webpack
  • Mengenal webpack.config.js
  • hot module reload & webpack-dev-server
  • Membuat komponen React menggunakan ES6
  • Menerjemahkan komponen dari latihan sebelumnya ke ES6

Pengenalan React-Router

• Instalasi
• Single Page Application
• Contoh: pembuatan SPA sederhana

Pengenalan Redux

• Apa itu Redux
• Application state
• Membuat komponen React + Redux sederhana
  • Counter
  • To-do List sederhana
• Membuat komponen React + Redux lanjutan
  • To-do List lanjutan
  • Wrapper Raphael dengan Redux

Styling

• Penggunaan CSS inline
• Penggunaan CSS global
• Penggunaan CSS modular
  • Keuntungannya
  • Contoh: memberi modular style untuk komponen-komponen React
• Animasi untuk React
• Animasi CSS
  • Animasi sederhana
  • Animasi lanjutan
  • Animasi komponen SVG (Raphael)

React lanjutan

• Class vs fungsi
• React server side
  • Tujuan
  • Contoh aplikasi
• Optimasi menggunakan Webpack
• ESLint
• Penggunaan middleware
  • Redux-Thunk
  • React-Redux-Router
• Membuat aplikasi streaming musik menggunakan React dan Redux
  • Komponen
  • Router
  • State aplikasi
  • Panggilan API
  • Styling