Belajar React JS: 
Membuat dan Memahami Struktur Direktori Project React



01. Apa itu React JS
  • React JS adalah libray JavaScript yang digunakan untuk membangun user interface yang interaktif berbasis komponen untuk web.
  • Komponen adalah bagian-bagian dari user interface yang menyusun aplikasi React seperti tombol, label, input, dll.
  • Library ini dibuat oleh Facebook dan bersifat open source.

02. Persiapan Awal untuk Belajar Reactjs

Sebelum mulai, ada beberapa hal yang harus kita instal di komputer :
  • Web Browser
  • Teks Editor (rekomendasi VS Code)
  • Nodejs dan NPM

03. Langkah-langkah membuat project

Langkah-langkah yang harus dilakukan untuk membuat aplikasi react adalah sebagai berikut:
  • Menambahkan library react ke HTML
  • Membuat elemen HTML untuk wadah aplikasi
  • Membuat komponen
  • Me-render komponen ke HTML

04. Latihan: Hello World
  • Buat folder baru bernama belajar-react, kemudian di dalamnya buat file baru bernama hello-react.html
  • Isi file hello-react.html dengan kode berikut:



  • Setelah itu, buka file hello-react.html dengan web browser, maka hasilnya:


     
Penjelasan kode project di atas sebagai berikut :
  • Pada kode di atas kita menyisipkan library react yang dibutuhkan melalui CDN di file HTML didalam tag <head>, yaitu:

    Pertama kita membutuhkan library react react.js untuk membuat komponen. Kedua kita membutuhkan react-dom.js untuk me-render komponen ke dalam HTML, dan terakhir kita membutuhkan babel.js agar kode Javascript versi ES6 dapat dikenali pada web browser karena tidak semua web broser mendukung ES6.



    Ketiga library ini langsung kita ambil dari internet. Jadi, jika kita tidak punya koneksi internet, maka aplikasi ini tidak akan bisa dijalankan.

  • Setiap aplikasi react membutuhkan sebuah wadah. Pada kode di atas, kita membuat elemen div dengan id="app".



    Setiap komponen yang kita buat di React akan di-render atau ditampilkan ke dalam div tersebut.



    Apakah harus dibuat dengan id="app"? Tidak harus, karena nanti kita akan tentukan elemennya dengan method getElementById().

  •  Berikutnya kita membuat kode aplikasinya dengan tipe text/babel:



    Pada kode tersebut, kita membuat komponen bernama Hello dari class React.Component, lalu me-rendernya ke dalam div.



  • Pada kode di atas, kita menulis HTML di dalam Javascript menggunakan fitur JSX di React, sehingga kita perlu menggunakan tanda petik seperti ini:



    Berikut contoh lainnya tanda dan dengan JSX :



    Tanpa JSX, kita harus membuat elemen dengan method createElemen().

05. Membuat Project Reactjs

Menginstall React JS

Langkah 1: Instal Node.js dan npm
  • Sebelum memulai, pastikan Node.js dan npm (Node Package Manager) sudah terinstall di komputer. 
  • Jika belum, kita dapat mengunduhnya dari situs resmi Node.js (https://nodejs.org/) dan mengikuti petunjuk instalasinya.

Langkah 2: Membuat Aplikasi React Baru
  • Untuk membuat project Reactjs baru, kita membutuhkan create-react-app. 
  • create-react-app adalah program berbasis CLI yang memang khusus digunakan untuk membuat proyek React. Program ini akan meng-generate semua hal yang kita butuhkan untuk proyek awal. Mulai dari package.json, file index.html, file index.js, dan sebagainya.
  • Ada dua cara menggunakannya: Pertama, diinstal dulu, baru digunakan. Kedua, digunakan langsung dengan NPX.

    Jika kamu ingin menginstalnya, silakan ketik perintah berikut:
    [sudo] npm install -g create-react-app

    Note: Kita butuh sudo untuk Nodejs yang terinstal di root direktori (Linux)

    Tunggulah sampai proses instalasinya selesai :



    Setelah itu, barulah kita bisa gunakan dengan seperti ini:
    create-react-app nama-project

    Atau jika kita tidak ingin menginstalnya, cukup pakai NPX saja:
    npx create-react-app nama-project

    Aturan penulisan nama project, harus menggunakan huruf kecil. Jika ada dua suku kata, maka bisa dipisah dengan -.

    Mari kita coba:
    create-react-app belajar-react

    Tunggulah sampai prosesnya selesai.



    Jika yarn sudah terinstal di komputer, create-react-app secara default akan menggunakannya. Tapi kalau tidak ada yarn, maka ia akan menggunakan npm.

    yarn adalah package manager Nodejs buatan Facebook yang fungsinya sama seperti npm. Atau jika ingin tetap menggunakan npm, kamu bisa tambahkan argumen --use-npm atau --use-pnpm (untuk PNPM).

    Jika project sudah selesai dibuat, maka akan ada folder baru bernama belajar-react pada folder tempat perintah itu dijalankan. 

    Sekarang coba buka folder tersebut dengan VS Code. Klik menu File->Open Folder, lalu cari folder-nya.



    Nah inilah project yang dibuat dengan create-react-app.

Memahami Struktur Direktori Project React

Berikut ini adalah struktur direktori dari proyek React.
  • 📁 node_modules berisi paket-paket modul Nodejs; semua library yang kita install dengan npm akan disimpan di sini.
  •  📁 public berisi file untuk publik seperti HTML, CSS, icon, dan gambar, dan aset publik lainnya;

    📄index.html adalah file HTML yang akan digunakan aplikasi React untuk render komponen.

  • 📁 src berisi kode dari aplikasi Reactjs, di sinilah kita akan membuat komponen;

    📄App.js berisi kode untuk komponen App atau komponen utama dari aplikasi;

    📄App.test.js berisi kode untuk testing komponen App;

    📄index.js berisi kode untuk render komponen App ke Real DOM;

    📄serviceWorker.js berisi kode untuk service worker, ini kita butuhkan nanti saat membuat aplikasi PWA (Progressive Web Apps);

    📄setTests.js berisi kode untuk testing aplikasi.

  • 📄.gitignore berisi kode-kode yang akan diabaikan oleh Git.
  • 📄package.json file JSON yang berisi keterangan proyek dan daftar modul-modul yang dibutuhkan.
  • 📄yarn.lock adalah file yang digunakan Yarn untuk mengunci versi-versi modul Nodejs yang digunakan.

Nah, itulah struktur direktori default di proyek Reactjs. Nanti, kita akan banyak menulis kode di dalam folder src.

Cara Menjalankan Aplikasi React Js

Silakan buka terminal pada VS Code dengan menekan CTRL + ` (back tick), kemudian ketik perintah berikut:
  • Jika menggunakan yarn:
    yarn start 
  • Jika menggunakan npm:
    npm start 

Tunggu sampai server selesai dibuat...


..dan browser akan terbuka secara otomatis.


Inilah hasil aplikasi react yang kita buat dengan create-react-app. Berikutnya kita tinggal modif sesuai kebutuhan. Untuk menghentikan server, tekan CTRL + C.

06. Latihan: Build Aplikasi React

Apabila aplikasi sudah selesai dikembangkan, kita bisa build aplikasinya untuk di-publish.

Caranya, ketik perintah berikut:
  • Jika menggunakan yarn
    yarn build
  • Jika menggunakan npm
    npm run build

Tunggu sampai prosesnya selesai...


Maka akan ada folder baru bernama build yang berisi kode dari aplikasi yang siap untuk upload atau di-deploy ke server.



Kamu juga bisa hapus folder build jika sudah selesai dan menggantinya dengan yang baru. Tinggal jalankan perintah build lagi.

07. Membuat Project dengan Komponen dalam File Terpisah
  • Komponen dapat kita buat dalam file javascript terpisah. Biasanya satu file berisi satu komponen. 
  • Ini akan memudahkan kita saat terdapat banyak komponen di dalam aplikasi.
Jika menggunakan React secara langsung di HTML, contohnya sebagai berikut :

Buat komponen header dalam file header.js, kemudian import ke file index.html dengan type text/babel karena merupakan komponen React.

Nama file: header.js


Nama file : index.html


Cara tersebut tidak direkomendasikan untuk projek yang memiliki banyak komponen. Mengapa? nanti browser akan terbebani karena harus men-download semua komponen. Akibatnya aplikasi kita akan menjadi lambat.

Oleh sebab itu, kita dianjurkan menggunakan create-react-app untuk membuat aplikasi yang memiliki banyak komponen dan kompleks.

Berikut ini adalah contoh membuat komponen dalam file terpisah jika menggunakan create-react-app :

Tiap komponen yang dibuat terpisah dalam satu file javascript didalam folder src. Secara default, baru ada satu komponen bernama App.js :



Sekarang mari kita buat komponen title dalam file Title.js di dalam folder src.


Saat kita membuat komponen di file terpisah, kita harus mengekspornya agar nanti bisa kita impor.


Oke, sekarang kita akan impor komponen ini pada komponen App.js sehingga kode file App.js menjadi seperti berikut:


Mari kita lihat hasilnya, silakan jalankan server development untuk React dengan perintah: 
  • Jika kamu menggunakan yarn
    yarn start
  • Jika kamu menggunakan npm
    npm run start
Maka hasilnya:




08. Memahami Tools di Project Reactjs

Pada proyek React, kita akan sering menggunakan beberapa tools berikut:
  • NPM dan Yarn
    NPM dan Yarn merupakan tools yang dipakai untuk manajemen proyek di Nodejs. 

    Fungsi NPM dan Yarn:
    1. Menginstal tools dan library yang dibutuhkan di proyek
    2. Menjalankan script untuk webserver dan build
    3. Menjalankan Test, dan lain-lain.

  • Jest
    Jest adalah testing framework yang fungsinya untuk menjalankan test. 

    Ini belum kita butuhkan di tahap awal belajar React. Tapi nanti di level advance, kita harus belajar gimana cara test aplikasimu dengan Jest ataupun framework yang lainnya. Tujuannya agar aplikasi yang kita buat, aman dari bugs.

  • React Script
    React script dijalankan dari NPM dan Yarn. Fungsinya untuk menggabungkan atau kompilasi source menjadi satu sehingga dapat dibuka dari browser.

    React Script menggunakan Webpack di dalamnya. Jadi buat kita yang pernah belajar Webpack akan paham dengan fungsi React Script.

  • Git
    Git merupakan salah satu version control system (VCS). Git kita butuhkan saat bekerja di sebuah tim untuk mencatat segala perubahan di source code.

Itulah beberapa tools yang sering digunakan dalam proyek Reactjs. Pada tahapan awal, kita akan sering menggunakan NPM dan Yarn untuk menginstal dan menjalankan proyek.

Sumber:
https://www.petanikode.com/reactjs-untuk-pemula/
https://www.petanikode.com/reactjs-project/