Skip to content
Kumpulan berkas latihan-latihan pengembangan berbasis React.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 8e2ea3b Jun 1, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
10_redux-thunk penggunaan redux-thunk Jan 2, 2017
11_modular-css modular css Jan 3, 2017
12_server-side server-side react app example Jan 4, 2017
13_server-side-with-redux server-side react examples using router and using redux Jan 7, 2017
14_server-side-with-router server-side react examples using router and using redux Jan 7, 2017
15_reselect-dan-recompose more optimization Jun 1, 2017
1_pengenalan
2_lanjutan update README untuk bagian beranda, bagian 1, 2, & 3 Jan 2, 2017
3_es6 update README untuk bagian beranda, bagian 1, 2 , & 3 Jan 2, 2017
4_es6-react topik optimasi aplikasi React May 29, 2017
5_es6-buat-ulang komponen svg container dengan Raphael ES6 Dec 9, 2016
6_redux-pengenalan penjelasan singkat Redux Jan 2, 2017
7_react-redux pengenalan redux dan penggunaan redux dengan react Dec 9, 2016
8_react-router Penggunaan react-router untuk membuat SPA Dec 23, 2016
9_testing
assets penambahan plugin webpack-dev-server dan konfigurasi untuk hot module… Dec 9, 2016
.gitignore getting started with ES6 using Babel & Webpack Dec 4, 2016
README.md update README untuk bagian beranda, bagian 1, 2, & 3 Jan 2, 2017

README.md

Materi Bimbingan Penggunaan React

Pengenalan React

React adalah sebuah library JavaScript yang dikembangkan dan dikelola oleh Facebook & Instagram untuk menampilkan data & membuat komponen-komponen User Interface. Menurut layanan analitik Libscore, saat ini React digunakan oleh Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, dan lain-lain (Wikipedia).

Konsep “Atomic Design Methodology”

We're not designing pages, we're designing systems of components. —Stephen Hay

Dalam konsep ADM, komponen dapat diumpakan sebagai atom. Kita menggabunkan atom-atom menjadi molekul, molekul menjadi organisme, organisme menjadi template, template menjadi halaman-halaman. React sangat cocok diaplikasikan ke dalam konsep pengembangan ADM karena dalam React kita memulai dari mengembangkan komponen-komponen yang kita gabungkan untuk membentuk sebuah halaman.

Keterangan lebih lanjut mengenai ADM dapat dibaca di tautan ini.

Pengenalan NPM

Package manager adalah software yang digunakan untuk menginstalasi dan mengelola paket-paket software. Hampir setiap bahasa pemrograman dan sistem operasi memiliki package manager-nya masing-masing. Beberapa contoh package manager yang terkenal misalnya brew, apt-get, composer, dan bower.

NPM (Node Package Manager) adalah sebuah package manager yang dibuat menggunakan teknologi Node. Untuk menggunakannya kita harus menginstal Node terlebih dahulu di sistem.

Catatan: Selain untuk NPM, kita juga akan membutuhkan Node untuk membuat sebuah aplikasi backend berbasis Node di latihan React server-side

  • Instalasi Node

    Silahkan langsung membuka laman Node untuk membaca cara instalasi Node di sistem operasi yang digunakan. Saya sendiri menggunakan brew untuk menginstal Node di MacOS.

  • package.json

    Berkas package.json adalah berkas konfigurasi yang digunakan oleh Node. Dalam latihan ini saya akan banyak menggunakan berkas ini terutama untuk konfigurasi berkas-berkas yang harus diinstalasi menggunakan NPM.

    Cara penggunaannya mudah, kita tinggal membuka direktori yang berisi berkasi package.json melalui terminal lalu memulai instalasi library yang dibutuhkan dengan perintah npm isntall.

  • Skrip NPM Selain mencatat library yang digunakan, package.json juga dapat digunakan untuk menuliskan skrip perintah yang dapat kita jalankan di sebuah lingkungan Node.

    Di banyak latihan, selain perintah npm install untuk menginstalasi library, kita juga akan menggunakan skrip npm start untuk menjalankan perintah-perintah seperti transpilasi menggunakan webpack atau menjalankan server Node.

    Di bagian TDD, kita juga dapat mengatur skrip npm test untuk menjalankan test runner seperti Mocha untuk menjalankan tes pada berkas-berkas JavaScript aplikasi kita.

Pengenalan ES6

Pengenalan ES6.

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
You can’t perform that action at this time.