Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Menggunakan Aplikasi Create React

by
Read Time:3 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

React telah menjadi framework yang populer baik untuk membuat client-side maupun server-side view. Ada penghalang yang besar dan juga rasa frustrasi ketika bekerja dengan Javascript dari komunitas. Aplikasi create-react diciptakan untuk mereka yang frustrasi.

Memulai

Pertama pastika Node terpasang di komputermu. Setidaknya kamu akan butuh Node versi 4, tapi mereka merekomendasikan versi 6 untuk download yang lebih cepat dan penggunaan disk yang lebih baik. Kamu bisa menggunakan nvm untuk berpindah antar versi Node juga.

Setelah Node terpasang, kamu buka aplikasi command-line favoritmu dan pasang create-react-app secara global sehingga kamu bisa mengeksekusinya darimana pun di komputermu.

npm install -g create-react-app

Membuat Aplikasi Pertamamu

Pertama buka coomand line dan buat sebuah direktori dimana kamu akan membuat aplikasinya. Lalu kita akan membuat aplikasinya dengan menjalankan create-react-app tuts-plus-react-app. Ini akan mengeksekusi cli untuk membuat tuts-plus-react-app.

The command-lineThe command-lineThe command-line

Ketika CLI selesai, kamu akan dibawa ke rangkuman yang memberi tahu di mana aplikasimu telah dibuat dan menunjukkan segelintir perintah yang bisa digunakan.

The available toolsThe available toolsThe available tools

Lalu, bernavigasi ke aplikasimu dengan menggunakan cd tuts-plus-react-app

Memulai Aplikasi

Kamu bisa menjalankan aplikasi secara lokal dengan menjalankan npm start. Ketika aplikasi dimulai, kamu secara otomatis akan dinavigasikan ke http://localhost:3000/ di browsermu dan melihat aplikasi React baru.

The basic React homepageThe basic React homepageThe basic React homepage

Aplikasi ini menggunakan webpack untuk menjalankan server lokal. Di sini ada fitur watch, jadi ketika kamu sedang mengedit kode React dan menyimpannya, kamu akan melihat perubahannya secara otomatis di browser.

When you run the watch featureWhen you run the watch featureWhen you run the watch feature

Jika kamu membat error dengan kodemu, kamu akan melihat peringatan di browsermu.

An example of failing to compileAn example of failing to compileAn example of failing to compile

Code Styles dan Testing

ESLint dimasukkan untuk memastikan bahwa kodemu mengikuti style kode yang umum. Ini akan membantumu memastikan kodemu konsisten, yang sangat membantu ketika ada beberapa kontributor dalam sebuah proyek. Saya sarankan untuk menggunakannya jika kamu baru di React. Karena akan sangat bagus jika kamu belajar gaya pemograman React dan JavaScript.

Jika kamu familiar menulis tes-tes untuk kodemu, Jest termasuk ke dalam run test. Jest adalah sebuah framework pengetes yang dibuat dan dikembangkan oleh Facebook, pencipta dari React. Untuk mengeksekusi tes-tesmu, eksekusi npm test di command-line tool. Ini akan menjalankan tes dan memulai sebuah watcher untuk mengeksekusi tes ketika kode produksi berubah. Ada sebuah berkas tes yang bisa kamu tambahkan di src/App.test.js.

Mendeploy Aplikasimu

Ketika kamu telah selesai dengan semua perubahan, sekarang adalah waktunya untuk mendeploy aplikasi. Yang kamu butuhkan hanya mengeksekusi npm run build di direktori aplikasi. Proses ini akan menggunakan Babel untuk men-transpile kode Reactmu ke kode yang dimengerti oleh browser. Ini juga akan mengecilkan kodemu dan memastikan mendapatkan peforma terbaik di browser.

Panduan Pengguna

Jika kamu memilih untuk terus menggunakan create-react-app, saya sarankan menghabiskan waktu membaca seluruh panduan pengguna. Ini memiliki banyak informasi berguna tentang topik yang serupa seperti menambahkan CSS Stylesheets, mengimpor komponen lain, mengimpor gambar, font dan lain-lain. Di sana juga terdapat informasi mengenai latihan pengemabangan situs seperti penggunaan HTTPS, menghubungkan dengan back end Node, membuat aplikasi web progresif dan lainnya.

Di sana juga terdapat banyak dokumentasi dari percobaan dan aplikasi yang dideploy.

Happy Hacking

Saya harap sekarang kamu bisa melihat betapa mudahnya membuat aplikasi React dengan menggunakan create-react-app project. Saya harap ini membantu yang baru memulai dengan React. Saya tahu kalian akan menikmatinya.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.