Halo teman-teman, selamat datang kembali di course React JS bersama Nusantech Academy 🙂 .
Pada chapter sebelumnya telah diperkenalkan kepada teman-teman apa itu React JS. Pasti teman-teman semakin penasaran bukan dengan React JS? 😀 . Agar tidak penasaran yuk simak terus chapter ini.
Pada chapter ini kita akan mulai membuat aplikasi React JS sederhana. Namun sebelum itu, pastikan kembali komputer teman-teman sudah terinstall Node JS ya. Jika belum, silahkan teman-teman install Node JS terlebih dahulu disini.
Membuat direktori project
Agar project teman-teman tersimpan dengan rapi, mari terlebih dahulu kita membuat direktori untuk project yang akan kita buat. Sebagai contoh, pada OS Windows kita bisa membuat direktori untuk project kita di Documents kemudian teman-teman buat folder dengan nama “Belajar React”. Untuk teman-teman yang menggunakan OS lain bisa menyesuaikan.
Setelah direktori project dibuat, teman-teman jalankan Visual Studio Code kemudian lakukan langkah-langkah berikut.
- Klik menu File.
- Open Folder.
- Pilih folder “Belajar React” yang sudah teman-teman buat sebelumnya.
Install create-react-app
Selanjutnya teman-teman install create-react-app dengan langkah-langkah berikut.
- Klik Menu Terminal.
- Pilih New Terminal.
- Pada Terminal ketik perintah berikut.
C:\Users\Your_Name\Documents\Belajar React>npm install -g create-react-app - Tunggu sampai proses selesai.
create-react-app merupakan tool yang digunakan untuk membuat aplikasi React secara praktis. Jika tidak menggunakan create-react-app kita harus melakukan konfigurasi secara manual dan itu cukup rumit serta memerlukan banyak waktu. Flag ‘-g’ berfungsi melakukan instalasi secara global. Artinya, di setiap project baru yang kita buat, kita tidak perlu menginstall lagi create-react-app.
Membuat aplikasi React
Sekarang saatnya kita membuat aplikasi React teman-teman 😀 . Berikut langkah-langkahnya.
- Pada Terminal ketik perintah berikut.
C:\Users\Your_Name\Documents\Belajar React> npx create-react-app firstreactapp - Tunggu hingga proses selesai.
- Selamat teman-teman sudah membuat aplikasi React 😀 .
Menjalankan aplikasi React
Nah, sekarang bagaimana menjalankan aplikasi React yang sudah teman-teman buat? Berikut langkah-langkahnya.
- Pada Terminal ketik perintah berikut.
C:\Users\Your_Name\Documents\Belajar React\firstreactapp> npm start - Teman-teman akan diarahkan ke browser. Tunggu beberapa saat hingga muncul tampilan berikut.
Gambar 1.1 Tampilan home aplikasi React JS
Edit App.js
Kita akan mengubah tampilan home aplikasi React kita menjadi sedikit lebih menarik. Teman-teman silahkan ikuti langkah-langkah berikut.
- Pada struktur file project teman-teman, buka folder src.
- Buka file App.js.
- Ubah kode berikut
<p>
Edit <code>src/App.js</code> and save to reload.
</p>menjadi
<p>
Course React JS bersama Nusantech Academy
</p>4. Maka tampilan home kita akan berubah menjadi seperti berikut.
Jadi jika kita ingin mengubah tampilan di home, maka kita cukup mengedit source code yang ada di file App.js. Namun kita harus mempelajari struktur dan penulisan elemen React JS terlebih dahulu.
Penutup
Pada chapter ini kita telah membuat aplikasi React yang sederhana. Untuk melakukan perubahan pada tampilan home, kita cukup mengedit file App.js yang di struktur file project teman-teman. Pada chapter selanjutnya akan dibahas tentang elemen React JS, khususnya pada syntax penulisan elemen React JS.
Sekian teman-teman pembahasan di chapter ini. Kami harap setelah membaca chapter ini teman-teman semakin tertarik untuk belajar React JS. Tetap semangat dan sampai jumpa di chapter selanjutnya ya 🙂 See you!
Quiz
Untuk mengasah kemampuan teman-teman terkait materi ini, kami berikan beberapa soal untuk teman-teman jawab. Quiz dapat dikerjakan disini: https://bit.ly/quizreact2-2
