lifelong learner — urip iku urup, currently working on accenture.

React Dasar 1 – Hal yang Perlu di Persiapan untuk Melakukan Pemrograman React

0
Degananda.com -

Screen Shot 2018-10-21 at 22.05.29

React bukanlah bahasa pemrograman , melainkan suatu library yang dibuat oleh facebook yang bertujuan untuk memudahkan web programmer membuat frontend apps.

Untuk mempelajari react kita memerlukan persiapan dalam segi environmentnya (software yang dibutuhkan untuk melakukan pemrograman react) dan pengetahuan yang dibutuhkan. Untuk sisi pengetahuan, react adalah library yang ditulis dengan menggunakan bahasa pemrograman javascript. Sehingga mengerti dasar-dasar javascript adalah suatu keharusan. ES5/ES6/ES7 adalah hal yang bersifat opsional karena dapat dipelajari seiringan dengan kita mempelajari react itu sendiri.

Menyiapkan Environment untuk melakukan pemrograman react.

Ada tiga software yang perlu dipersiapkan secara software sebelum memulai melakukan pemrograman react yaitu :

  1. NPM atau merupakan kependekan dari node package manager. React menggunakan NPM sebagai package manager sehingga setiap depedency yang dibutuhkan react atas library lain akan dimanage oleh NPM ini
  2. Software editor. Ini merupakan software yang seharusnya telah kita miliki. Kami merekomendasikan menggunakna visual studio code (VSC) dari microsoft karena ringan dan terdapat berbagai plugisn yang mendukung pemrograman react.
  3. Browser yang digunakan untuk menjalankan program react kita karena sesungguhnya react adalah javascript yang berjalan diatas browser.

Kita akan membahas satu persatu dari tiga software diatas sehingga setelah itu kita siap melakukan pemrograman react.

1. Node Package Manager (NPM)

Seperti yang telah kami jelaskan diatas, react menggunakan NPM sebagai package managernya. Tujuannya adalah menginstall berbagai depedency library lain yang digunakan oleh react.

Untuk menginstall NPM anda dapat menuju ke halaman download NodeJS.

https://nodejs.org/en/download/

Kemudian silahkan pilih jenis sistem operasi yang anda gunakan dan ikuti petunjuk installasi.

Screen Shot 2018-10-21 at 21.46.10.png

setelah terinstall, pastikan bahwa proses installasi berjalan dengan lancar. Untuk memastikan, bukalah terminal atau powershell jika anda menggunakan windows dan ketikan perintah dibawah ini

node -v

Jika perintah diatas anda jalankan dan mengembalikan versi dari nodejs yang terinstall di local machine anda maka installasi nodejs telah berhasil dijalankan.

Screen Shot 2018-10-21 at 21.48.22

Selanjutnya pastikan juga bahwa NPM telah terinstall dengan baik dengan menjalankan perintah dibawah ini

npm -v

jika perintah diatas anda jalankan dan mengembalikan atau menampilkan versi dari npm yang terinstall di localmachine anda maka installasi npm telah berjalan dengan lancar.

2. Editor Microsoft Visual Studio Code untuk React

Screen Shot 2018-10-21 at 21.57.17.png

React adalah library javascript yang berfokus untuk membagun user interface dan logika-logika terkait interaksi antara user , ui dan browser. Atas dasar itu tentunnya, kita dapat membayangkan akan banyak sekali syntax – syntax built in react yang dapat kita manfaatkan untuk membuat program frontend yang baik.

Tidak perlu khawatir untuk menghafalkan berbagai syntax atau fungsi – fungsi react, kita dapat memanfaatkan extension atua plugins dari Microsoft visual studio code untuk membantu kita dalam melakukan pemrograman react. Tentunnya tidak hanya terbatas sebagai intellisense saja

Jika anda belum mendownload visual studio code anda dapat mengunduhnya di website resmi microsoft visual studio code.

Untuk mendapatkan extension atau plugin react pada visual studio code, kita perlu menuju ke menu view kemudian pilih sub menu extension seperti pada gambar dibawah ini.

Screen Shot 2018-10-21 at 21.59.35.png

selanjutkan tulisan “react” pada kolom search di left sidebar dari extension yang telah terbuka dan pilih ES7 React/Redux/GraphQL/React-Native snippets sesuai dengan gambar dibawah ini.

Screen Shot 2018-10-21 at 22.01.24.png

Setelah terinstall silahkan restart Microsoft Visual Studio Code anda maka editor telah siap untuk digunakan melakukan pemrograman react.

3. Web Browser untuk Menjalankan React

Gunakanlah chrome karena telah terinstall tools untuk developer tanpa harus menginstall versi developernya layaknya pada firefox versi developer edition. Anda cukup klik kanan pada chrome menu inspect element telah siap.

Screen Shot 2018-10-21 at 22.03.53.png

Kini browser , editor dan nodejs telah terinstall dan terkonfigurasi maka kita siap untuk melakukan pemrograman react.