Skip to content

Commit 646a9f5

Browse files
committed
update README untuk bagian beranda, bagian 1, 2, & 3
1 parent d02c523 commit 646a9f5

File tree

4 files changed

+35
-16
lines changed

4 files changed

+35
-16
lines changed

1_pengenalan/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,23 +45,29 @@ Selain itu plugin-plugin yang disediakan Babel memungkinkan untuk menggunakan fi
4545
## Penjelasan Materi Latihan
4646

4747
* "Hello World"
48-
Sebuah aplikasi kecil dengan satu komponen sederhana.
48+
49+
Sebuah aplikasi kecil dengan satu komponen sederhana.
4950

5051
* _counter_
52+
5153
Di sini kita berkenalan dengan _state_ & _lifecycle_ komponen React.
5254

5355
* _timer_
56+
5457
Di sini kita berkenalan dengan interaktivitas pada komponen.
5558

5659
* React _props_
60+
5761
Di aplikasi ini kita mencoba menggunakan beberapa komponen React yang berinteraksi satu sama lain melalui _props_ komponen React.
5862

5963
* Olah data
64+
6065
Di sini kita kembali menggunakan lebih dari satu komponen React, serta menggunakan data tabular untuk me-render sebuah komponen React.
6166

6267
## _Lifecycle_ komponen React
6368

6469
Setiap komponen React memiliki _metode-metode lifecycle_ yang dipanggil tergantung _lifecycle_-nya. Sebagai contoh, metode _render()_ menentukan struktur sebuah komponen di dalam aplikasi. Ini adalah _lifecycle_ yang paling penting karena tanpanya sebuah komponen tidak dirender dan tidak dapat me-_return_ apa-apa.
70+
6571
Contoh lainnya adalah _componentDidMount()_ yang akan dipanggil saat aplikasi selesai di-render. Contoh-contoh lainnya dapat dilihat [di sini](https://facebook.github.io/react/docs/react-component.html).
6672

6773
__Dalam membuat sebuah komponen kita tidak perlu menuliskan setiap metode, hanya yang kita butuhkan saja.__

2_lanjutan/.DS_Store

-6 KB
Binary file not shown.

2_lanjutan/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@
33
Di bagian ini kita akan membuat beberapa komponen yang sedikit lebih kompleks dibanding komponen-komponen di bagian 1 - Pengenalan.
44

55
* _Dropdown menu_
6+
67
Membuat _dropdown menu_ sederhana dengan React dan data JSON.
78

89
* _Color picker_
10+
911
Sebuah komponen _color picker_ sederhana menggunakan React.
1012

1113
* _SVG control_
14+
1215
Di sini kita membuat sebuah komponen React yang berfungsi sebagai sebuah_wrapper_ bagi sebuah komponen SVG yang dibuat dengan Raphael

README.md

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,57 @@
11
# Materi Bimbingan Penggunaan React
22

33
## 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).
74

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).
97

10-
> We're not designing pages, we're designing systems of components. —Stephen Hay
118

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/).
1517

1618
## Pengenalan NPM
1719

1820
_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+
1922
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+
2024
__Catatan__: Selain untuk NPM, kita juga akan membutuhkan Node untuk membuat sebuah aplikasi _backend_ berbasis Node di latihan React _server-side_
2125

2226
* Instalasi Node
27+
2328
Silahkan langsung membuka laman Node untuk membaca cara instalasi Node di sistem operasi yang digunakan. Saya sendiri menggunakan brew untuk menginstal Node di MacOS.
2429

2530
* package.json
31+
2632
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+
2734
Cara penggunaannya mudah, kita tinggal membuka direktori yang berisi berkasi _package.json_ melalui terminal lalu memulai instalasi library yang dibutuhkan dengan perintah `npm isntall`.
2835

2936
* Skrip NPM
3037
Selain mencatat library yang digunakan, _package.json_ juga dapat digunakan untuk menuliskan skrip perintah yang dapat kita jalankan di sebuah lingkungan Node.
38+
3139
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+
3241
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.
3342

3443
## Pengenalan ES6
3544

3645
[Pengenalan ES6.](https://github.com/arisetyo/belajar-react/tree/master/3_es6)
3746

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
4555

4656
## Pengenalan React-Router
4757
* Instalasi

0 commit comments

Comments
 (0)