tutorial react untuk pemula 1

Melalui post ini saya akan berbagi pengalaman saya menggunakan reactjs. Saya bukan penulis dan guru yang baik, jadi apabila saya menggunakan istilah atau kata yang susah dipahami, harap maklum.

Darimana memulai belajar react js?

pada saat pertama kali belajar react saya bingung bagaimana memulainya? saya mulai belajar tentang babel dan webpack, dan ini memakan waktu. jika anda pemula saya sarankan untuk memulainya dengan menginstall Create-react-app dari facebook. create-react-app adalah semacam commandline tool yang akan membantu kita membuat aplikasi reactjs secara mudah.

npm install -g create-react-app

setelah terinstall kita bisa mencoba membuat aplikasi yang kita inginkan, sebagai contoh saya ingin membuat aplikasi dalam folder react-tuts

create-react-app react-tuts

setelah selesai kita masuk kefolder react-tuts dan menginstall paket dependenciesnya

cd react-tuts
npm install
npm start

ok jika step diatas sudah berhasil dan anda bisa melihat hasilnya di browse maka anda sudah berhasil menginstall reactjs skeleton. selanjutnya kita perlu mengatur Editor.

Editor Config (Sublime text)

Di totorial ini saya akan mengunakan sublime text, tidak masalah jika anda ingin menggunakan editor yang lain. alasan saya pakai Sublime karna editor ini sangat ringan dan loadingnya cepat.
 Yang anda harus lakukan pertama kali adalah menginstall plugin yang akan membantu kita dalam coding. Ini adalah list plugin utama yang saya gunakan

  • Emmet
    > memudahkan kita membuat kode html dan jsx
  • sideBarEnchancement
    > menambah menu yang membantu kita dalam management file project
  • Babel
    > tanpa plugin ini tampilan file javascript kita akan berantakan. cara setting buka file js / jsx > view > syntax > open all current extention as > Babel > Javascript (babel)
  • Babel Snippets
    > snippet untuk membuat component react
  • EditorConfig
    > setting editor tab space, line ending dll
  • TrailingSpaces
    > trailing space deleter
  • JavaScript Completions
    > list autocomplete untuk javascript
  • Sass
    > sass syntax helper
  • DocBlockr
    > format block comment
  • Theme SoDaReloaded
// sublime text > preference >
"theme": "SoDaReloaded Dark.sublime-theme"
disable node modules folder
"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS",
"node_modules"
],