|
1 | 1 | # Materi Bimbingan Penggunaan React
|
2 | 2 |
|
3 | 3 | ## Pengenalan React
|
4 |
| -* Apa itu React |
5 |
| - React adalah sebuah library JavaScript yang dikembangkan dan dikelola oleh Facebook & Instagram untuk menampilkan data & membuat komponen-komponen User Interface. |
6 |
| - Menurut layanan analitik Libscore, saat ini React digunakan oleh Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, dan lain-lain (Wikipedia). |
7 | 4 |
|
8 |
| -* Konsep _“Atomic Design Methodology”_ |
| 5 | +React adalah sebuah library JavaScript yang dikembangkan dan dikelola oleh Facebook & Instagram untuk menampilkan data & membuat komponen-komponen User Interface. |
| 6 | +Menurut layanan analitik Libscore, saat ini React digunakan oleh Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, dan lain-lain (Wikipedia). |
9 | 7 |
|
10 |
| - > We're not designing pages, we're designing systems of components. —Stephen Hay |
11 | 8 |
|
12 |
| - Dalam konsep ADM, komponen dapat diumpakan sebagai atom. Kita menggabunkan atom-atom menjadi molekul, molekul menjadi organisme, organisme menjadi template, template menjadi halaman-halaman. |
13 |
| - 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. |
14 |
| - Keterangan lebih lanjut mengenai ADM dapat dibaca di [tautan ini](http://bradfrost.com/blog/post/atomic-web-design/). |
| 9 | +**Konsep _“Atomic Design Methodology”_** |
| 10 | + |
| 11 | +> We're not designing pages, we're designing systems of components. —Stephen Hay |
| 12 | +
|
| 13 | +Dalam konsep ADM, komponen dapat diumpakan sebagai atom. Kita menggabunkan atom-atom menjadi molekul, molekul menjadi organisme, organisme menjadi template, template menjadi halaman-halaman. |
| 14 | +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. |
| 15 | + |
| 16 | +Keterangan lebih lanjut mengenai ADM dapat dibaca di [tautan ini](http://bradfrost.com/blog/post/atomic-web-design/). |
15 | 17 |
|
16 | 18 | ## Pengenalan NPM
|
17 | 19 |
|
18 | 20 | _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.
|
| 21 | + |
19 | 22 | NPM (Node Package Manager) adalah sebuah package manager yang dibuat menggunakan teknologi [Node](https://nodejs.org/en/). Untuk menggunakannya kita harus menginstal Node terlebih dahulu di sistem.
|
| 23 | + |
20 | 24 | __Catatan__: Selain untuk NPM, kita juga akan membutuhkan Node untuk membuat sebuah aplikasi _backend_ berbasis Node di latihan React _server-side_
|
21 | 25 |
|
22 | 26 | * Instalasi Node
|
| 27 | + |
23 | 28 | Silahkan langsung membuka laman Node untuk membaca cara instalasi Node di sistem operasi yang digunakan. Saya sendiri menggunakan brew untuk menginstal Node di MacOS.
|
24 | 29 |
|
25 | 30 | * package.json
|
| 31 | + |
26 | 32 | 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.
|
| 33 | + |
27 | 34 | Cara penggunaannya mudah, kita tinggal membuka direktori yang berisi berkasi _package.json_ melalui terminal lalu memulai instalasi library yang dibutuhkan dengan perintah `npm isntall`.
|
28 | 35 |
|
29 | 36 | * Skrip NPM
|
30 | 37 | Selain mencatat library yang digunakan, _package.json_ juga dapat digunakan untuk menuliskan skrip perintah yang dapat kita jalankan di sebuah lingkungan Node.
|
| 38 | + |
31 | 39 | 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.
|
| 40 | + |
32 | 41 | 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.
|
33 | 42 |
|
34 | 43 | ## Pengenalan ES6
|
35 | 44 |
|
36 | 45 | [Pengenalan ES6.](https://github.com/arisetyo/belajar-react/tree/master/3_es6)
|
37 | 46 |
|
38 |
| -* Penggunaan Babel dan Webpack |
39 |
| - * Instalasi webpack global |
40 |
| - * Mengenal Babel & Webpack |
41 |
| - * Mengenal webpack.config.js |
42 |
| - * hot module reload & webpack-dev-server |
43 |
| - * Membuat komponen React menggunakan ES6 |
44 |
| - * Menerjemahkan komponen dari latihan sebelumnya ke ES6 |
| 47 | +## Penggunaan Babel dan Webpack |
| 48 | + |
| 49 | +* Instalasi webpack global |
| 50 | +* Mengenal Babel & Webpack |
| 51 | +* Mengenal webpack.config.js |
| 52 | +* hot module reload & webpack-dev-server |
| 53 | +* Membuat komponen React menggunakan ES6 |
| 54 | +* Menerjemahkan komponen dari latihan sebelumnya ke ES6 |
45 | 55 |
|
46 | 56 | ## Pengenalan React-Router
|
47 | 57 | * Instalasi
|
|
0 commit comments