Materi CourseNusantech AcademyReact JS

Modul 2 – 2 Create React App React JS

By 8 Mei 2020 Mei 20th, 2020 No Comments

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.

  1. Klik menu File.
  2. Open Folder.
  3. 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.

  1. Klik Menu Terminal.
  2. Pilih New Terminal.
  3. Pada Terminal ketik perintah berikut.

    C:\Users\Your_Name\Documents\Belajar React>npm install -g create-react-app

  4. 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.

  1. Pada Terminal ketik perintah berikut.

    C:\Users\Your_Name\Documents\Belajar React> npx create-react-app firstreactapp

  2. Tunggu hingga proses selesai.
  3. Selamat teman-teman sudah membuat aplikasi React ๐Ÿ˜€ .

Menjalankan aplikasi React

Nah, sekarang bagaimana menjalankan aplikasi React yang sudah teman-teman buat? Berikut langkah-langkahnya.

  1. Pada Terminal ketik perintah berikut.

    C:\Users\Your_Name\Documents\Belajar React\firstreactapp> npm start

  2. 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.

  1. Pada struktur file project teman-teman, buka folder src.
  2. Buka file App.js.
  3. 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.

Gambar 1.2 Tampilan home setelah diedit

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