Advertisement
  1. Code
  2. React

Menyiapkan Lingkungkan Kerja React, Bagian 4

Scroll to top
Read Time: 11 min
This post is part of a series called Set Up a React Environment.
Set Up a React Environment, Part 3

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

React telah dikenal di masa lalu karena sulit untuk mulai membuat aplikasi, karena kamu benar-benar harus memahami cara mengkonfigurasi tool buatan secara manual. Ini bahkan sebelum kamu menulis satu baris kode React.

Tool create-react-app membantu mengatasi masalah ini dengan sangat luas karena memungkinkan seseorang membuat aplikasi React yang berfungsi penuh tanpa memerlukan pengetahuan tentang cara mengkonfigurasi tool buatan. Kenyataannya adalah bahwa create-react-app akan baik untuk kebanyakan aplikasi, terutama jika kamu baru mengenal React.

Saat kamu mendapatkan lebih banyak pengalaman dengan React, kamu mungkin memiliki ketentuan tertentu untuk aplikasimu yang memerlukan konfigurasi khusus dari file persiapan. Dalam kasus ini, kamu harus bisa menyiapkan tool buatan React secara manual, karena secara default create-react-app menyembunyikan ini darimu.

Dalam tutorial ini saya akan menunjukkan cara memasang aplikasi React dengan mengonfigurasi alat buatan secara manual saat kita menujunya. Ini diharapkan akan memberimu kepercayaan diri untuk terus lanjut dan bereksperimen dengan persiapan yang lebih kompleks.

Meskipun tampaknya sedikit menakutkan pada awalnya, Kamu akan menikmati semua keuntungan dari memiliki kontrol penuh terhadap setiap pengaturan konfigurasi tunggal. Dan kamu bisa memutuskan tool mana yang disertakan dalam aplikasimu, yang mungkin berbeda dari satu proyek ke proyek lainnya. Pendekatan ini juga memungkinkanmu untuk dengan mudah menggabungkan tool buatan baru saat mereka datang (yang sering mereka lakukan).

Apakah kamu siap untuk membuat aplikasi React pertamamu sepenuhnya dari nol? Ayo lakukan.

Buat Struktur File Aplikasi

Untuk mendemonstrasikan bagaimana menyiapkan aplikasi React via konfigurasi manual alat bantu, kita akan membangun aplikasi yang sama, sangat sederhana, aplikasi React dari tutorial sebelumnya di seri ini.

Mulailah dengan membuat folder dengan nama my-first-components-build, dan kemudian buka jendela command-line yang menunjuk ke folder ini.

Ketik npm init untuk membuat file package.json. File ini akan berisi semua informasi tentang alat yang digunakan untuk membuat aplikasimu, ditambah pengaturan yang terkait. Terimalah semua pengaturan default dan terus tekan Enter (sekitar sepuluh kali) sampai selesai.

Jika kamu menerima semua defaultnya, package.json akan terlihat seperti ini:

1
{
2
  "name": "my-first-components-build",
3
  "version": "1.0.0",
4
  "description": "",
5
  "main": "index.js",
6
  "scripts": {
7
    "test": "echo \"Error: no test specified\" && exit 1"
8
  },
9
  "author": "",
10
  "license": "ISC"
11
}

Kita sekarang perlu menambahkan skrip React dan ReactDOM ke proyek kita. Kita akan melakukan ini via npm, pengelola paket untuk Node.js.

Di dalam direktori command-line yang sama, masukkan:

1
npm install --save react react-dom

Ini menginstal React dan ReactDom, ditambah dependensi yang dibutuhkan oleh kedua modul tersebut. Kamu akan melihat kita sekarang memiliki direktori node_modules baru dimana modul-modulnya telah ditambahkan.

Node modules folderNode modules folderNode modules folder

Jika kamu melihat file package.json, properti dependencies baru telah ditambahkan yang berisi informasi tentang modul node yang kita instal.

1
"dependencies": {
2
  "react": "^15.6.1",
3
  "react-dom": "^15.6.1"
4
}

Hal ini terjadi karena kita menentukan opsi --save di perintah npm install kita. Ini memberitahukan npm bahwa kita ingin melacak dependensi proyek yang kita instal. Hal ini penting jika kita ingin membagikan proyek kita.

Biasanya, karena folder node_modules begitu besar, kamu tidak ingin mencoba membagikannya secara langsung. Sebagai gantinya, kamu berbagi proyekmu tanpa folder node_modules. Kemudian, ketika seseorang mendownload proyekmu, yang harus mereka lakukan hanyalah mengetikan npm install untuk menduplikat persiapan langsung dari package.json.

Catatan: Di npm 5.x, modul yang terinstal secara otomatis disimpan ke package.json. Kamu tidak lagi harus secara manual menentukan opsi --save.

Di dalam folder my-first-components-build, buat folder src baru, dan tambahkan file index.js ke dalamnya. Kita nanti akan kembali ke ini saat kita mulai membuat aplikasi React kita, setelah kita mengonfigurasi file persiapan proyek.

Tambahkan file index.html di dalam folder yang sama dengan kode berikut:

1
<!DOCTYPE html>
2
<html lang="en">
3
    <head>
4
        <meta charset="UTF-8">
5
        <title>Creating a React App Manually, Using Build Tools</title>
6
    </head>
7
    <body>
8
        <div id="app"></div>
9
    </body>
10
</html>

Kami ingin dapat mengkompilasi aplikasi kita ke suatu file JavaScript, dan juga memanfaatkan JSX dan class ES6 dan modul. Untuk melakukan ini, kita perlu menginstal modul Webpack dan Babel via npm.

Mari kita pasang Babel lebih dulu. Ketikan berikut ini ke jendela command-line:

1
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Ini akan menginstal semua modul yang dibutuhkan Babel untuk mengkompilasi kode ES6 dan JSX ke javascript standar.

Sekarang, mari instal Webpack, sekali lagi via command line:

1
npm install --save-dev html-webpack-plugin webpack webpack-dev-server

Ini menginstal semua modul yang dibutuhkan untuk Webpack, server web lokal, dan memungkinkan kita mengarahkan Webpack untuk membuat file index.html dinamis di folder public berdasarkan yang kita tambahkan ke folder src. Kita juga dapat menambahkan referensi dinamis ke file JavaScript yang dibundel di dalam file HTML setiap kali aplikasi dibuat.

Setelah modul baru ini dipasang, file package.json mu sekarang akan terlihat seperti ini:

1
"dependencies": {
2
  "react": "^15.6.1",
3
  "react-dom": "^15.6.1"
4
},
5
"devDependencies": {
6
  "babel-core": "^6.25.0",
7
  "babel-loader": "^7.1.0",
8
  "babel-preset-env": "^1.5.2",
9
  "babel-preset-react": "^6.24.1",
10
  "html-webpack-plugin": "^2.28.0",
11
  "webpack": "^3.0.0",
12
  "webpack-dev-server": "^2.5.0"
13
}

Kali ini, bagaimanapun, dependesi Webpack dan Babel disimpan ke package.json sebagai dependensi dev.

Ini berarti modul khusus ini diperlukan selama fase pengembangan (yaitu membuat) aplikasi. Di sisi lain, dependensi (seperti React, dan ReactDOM) diperlukan saat runtime, dan karenanya akan disertakan bersamaan dengan kode aplikasi khusus kita.

Konfigurasi Webpack

Untuk mendapatkan Webpack membangun aplikasi kita dan menggabungkannya ke dalam satu file, kita perlu mengkonfigurasi pengaturan. Di dalam folder aplikasi root-mu, buat webpack.config.js, yang digunakan untuk menyimpan pengaturan pembuatan khusus Webpack.

Kita membutuhkan Webpack untuk melakukan tiga hal:

  • Mengkompilasi kode ES6/JSX ke JavaScript (via Babel).
  • Membangun aplikasi kita, dan bundel ke dalam satu file JavaScript.
  • Membuat file index.html, dan di dalamnya tambahkan referensi ke file JavaScript yang kita bundel.

Di dalam webpack.config.js, tambahkan:

1
var path = require('path');
2
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
3
4
module.exports = {
5
  entry: './src/index.js',
6
  output: {
7
    path: path.resolve(__dirname, 'public'),
8
    filename: 'build.js'
9
  },
10
  module: {
11
    rules: [
12
      { test: /\.(js)$/, use: 'babel-loader' }
13
    ]
14
  },
15
  plugins: [new HtmlWebpackPlugin({
16
    template: 'src/index.html'
17
  })]
18
}

Jangan terlalu khawatir tentang sintaks yang digunakan disini; cukup pahami gambaran dari apa yang terjadi.

Yang kita lakukan adalah mengekspor objek JavaScript dengan properti tertentu yang mengontrol bagaimana Webpack membuat aplikasi kita. Properti entry menentukan titik awal aplikasi React kita, yaitu index.js. Selanjutnya, properti output mendefinisikan path output, dan nama file, dari file JavaScript yang dibundel.

Sedangkan untuk proses pembuatan itu sendiri, kita ingin Webpack mengoper semua file JavaScript melalui kompiler Babel untuk mentransformasikan JSX/ES6 ke standar JavaScript. Kita melakukan ini melalui properti module. Ini hanya menentukan reguler expression yang menjalankan transformasi Babel hanya untuk file JavaScript.

Untuk menyelesaikan persiapan Babel, kita perlu menambahkan sebuah entri ke file package.json untuk menentukan transformasi Babel yang ingin kita lakukan pada file JavaScript kita. Buka package.json dan tambahkan properti babel:

1
"babel": {
2
    "presets": [ "env", "react" ]
3
},

Ini akan menjalankan dua transformasi pada setiap file JavaScript dalam proyek kita. Transformasi env akan mengkonversi JavaScript ES6 menjadi JavaScript standar yang kompatibel dengan semua browser. Dan transformasi react akan mengkompilasi kode JSX ke pemanggilan fungsi createElement(), yang merupakan JavaScript yang benar-benar valid.

Sekarang, kembali ke file webpack.config.js kita.

Properti terakhir yang kita miliki adalah plugins, yang berisi operasi khusus yang ingin kita lakukan selama proses pembuatan. Dalam kasus kita, kita membutuhkan Webpack untuk membuat file index.html yang menyertakan referensi ke file JavaScript yang dibundel. Kita juga menunjukkan file index.html yang sudah ada (yang kita buat sebelumnya) untuk dijadikan template untuk membuat file index.html yang dibundel terakhir.

Membuat dan Mengetes

Mari kita sekarang menambahkan properti script ke package.json. Ngomong-ngomong, kamu dapat menambahkan skrip sebanyak yang kamu inginkan untuk melakukan berbagai tugas. Untuk sekarang, kita hanya ingin dapat menjalankan Webpack, jadi pada package.json hapus skrip "test" dan ganti dengan:

1
"scripts": {
2
  "build": "webpack",
3
},

Sebelum kita mengetes proses pembuatan, mari kita tambahkan komponen React untuk index.js sehingga kita memiliki sesuatu untuk di render.

1
import React, { Component } from 'react';
2
import ReactDOM from 'react-dom';
3
4
class App extends Component {
5
    render() {
6
        return (
7
            <div>
8
                <h2>Hello World!</h2>

9
            </div>

10
        )
11
    }
12
}
13
14
ReactDOM.render( <App />, document.querySelector( '#app' ) );

Ini seharusnya tampak sangat akrab sekarang jika kamu telah mengikuti bersama dengan tutorial sebelumnya dalam seri ini.

Dari command line, jalankan:

1
npm run build

Setelah beberapa saat, kamu akan melihat folder public baru yang dibuat di dalam my-first-components-build, yang mengandung index.html dan index.js. Buka index.html untuk melihat output dari tes aplikasi React kita.

Test React appTest React appTest React app

Perhatikan bahwa file JavaScript yang dibundel telah ditambahkan untuk kita, dan komponen tes yang di render untuk elemen DOM yang benar.

Mengotomatisasi Proses Kompilasi

Setelah kamu mulai membuat beberapa perubahan untuk aplikasimu, kamu akan segera belajar bahwa itu membosankan harus secara manual mengubah file, simpan itu, jalankan perintah membuat dan muat ulang jendela browser untuk melihat perubahannya.

Untungnya, kita dapat menggunakan server mini Webpack yang telah kita instal sebelumnya untuk mengotomatisasi proses ini. Tambhkan skrip kedua ke package.json sehingga properti 'scripts' terlihat seperti ini:

1
"scripts": {
2
  "build": "webpack",
3
  "dev": "webpack-dev-server --open"
4
},

Sekarang jalankan:

1
npm run dev

Setelah beberapa detik, kamu akan melihat tab browser baru terbuka dengan aplikasi webmu yang sedang berjalan. URL sekarang menunjuk ke server lokal bukan menunjuk ke file lokal tertentu. Buat sedikit perubahan ke index.js dalam folder src dan simpan. Perhatikan bahwa aplikasimu memperbarui secara otomatis di browser hampir seketika untuk merefleksikan perubahan baru.

Webpack sekarang akan memantau file dalam aplikasimu untuk perubahan. Ketika perubahan dibuat, dan disimpan, Webpack akan mengkompilasi ulang aplikasimu dan secara otomatis memuat ulang jendela browser dengan pembaruan terbaru.

Catatan: Webpack server tidak akan membuat ulang aplikasimu, misalnya—melainkan ini menyimpan perubahan dalam sebuah cache, Itulah sebabnya mengapa bisa memperbarui browser dengan sangat cepat. Ini berarti kamu tidak akan melihat pembaruan yang tereflekksi dalam folder public. Bahkan, kamu dapat menghapus folder ini sepenuhnya ketika menggunakan server Webpack.

Ketika kamu ingin membangun aplikasimu, kamu hanya cukup menjalankan npm run build untuk membuat folder public kembali (jika diperlukan) dan output file aplikasimu, siap untuk di distribusi.

Menyelesaikan Aplikasi Kita

Sebagai pelengkap, mari kita tambahkan dua komponen sederhana yang telah kita gunakan pada tutorial sebelumnya.

Tambahkan dua file baru di dalam folder root proyek yang disebut MyFirstComponent.js dan MySecondComponent.js ke folder utama aplikasi. Pada MyFirstComponent.js, tambahkan kode berikut:

1
import React, { Component } from 'react';
2
3
class MyFirstComponent extends Component {
4
    render() {
5
        return (
6
            <p>{this.props.number}: Hello from React!</p>

7
        )
8
    }
9
}
10
11
export default MyFirstComponent;

Dan pada MySecondComponent.js, tambahkan:

1
import React, { Component } from 'react';
2
3
class MySecondComponent extends Component {
4
    render() {
5
        return (
6
            <p>{this.props.number}: My Second React Component.</p>

7
        )
8
    }
9
}
10
11
export default MySecondComponent;

Untuk menggunakan komponen ini dalam aplikasi kita, perbarui index.js ke yang berikut:

1
import React, { Component } from 'react';
2
import ReactDOM from 'react-dom';
3
import MyFirstComponent from './MyFirstComponent';
4
import MySecondComponent from './MySecondComponent';
5
6
class App extends Component {
7
    render() {
8
        return (
9
            <div>
10
                <h2>My First React Components!</h2>

11
                <MyFirstComponent number="1st" />
12
                <MySecondComponent number="2nd" />
13
            </div>

14
        )
15
    }
16
}
17
18
ReactDOM.render( <App />, document.querySelector( '#app' ) );

Hasil ini dalam satu output yang sama seperti yang kita lihat sebelumnya, kecuali kali ini via pengaturan aplikasi React 100% secara manual.

Finished React appFinished React appFinished React app

Penggunaan Kembali Persiapan Template React

Setelah kamu melewati konfigurasi persiapan manual ini sekali dan membuat konfigurasi file persiapan, ini adalah satu-satunya waktu yang kamu akan perlukan untuk melakukan hal ini benar-benar dari awal. Untuk proyek-proyek mendatang, kamu dapat menggunakan kembali satu atau lebih file persiapan yang ada, membuat proyek React berikutnya lebih cepat untuk dipersiapkan.

Kamu bahkan dapat membuat sebuah set rencana pembuatan template starter React, dan menempatknya di GitHub. Ini kemudian akan menjadi kasus sederhana untuk mengkloning proyek starter dan menjalankan npm init untuk menginstal modul Node.js yang diperlukan.

Download dan Instal Proyek

Proyek React untuk tutorial ini tersedia untuk di-download, sehingga kamu dapat bermain-main dengan itu atau menggunakannya sebagai template untuk proyek-proyek baru.

Klik link Download Attachment di sidebar kanan untuk mengakses file .zip proyek. Setelah di-download, ekstrak dan buka jendela command line. Pastikan kamu berada di direktori my-first-components-build.

Masukkan perintah berikut untuk menginstal dan mengkompilasi aplikasi React.

1
npm install

2
npm run dev

Perintah yang pertama akan mendownload semua modul Node.js yang diperlukan untuk proyek, yang akan memakan waktu satu atau dua menit. Perintah kedua akan mengkompilasi aplikasi React dan menjalankan server web mini, kemudian menampilkannya pada browser.

Cobalah membuat beberapa perubahan untuk aplikasi React-mu. Setiap kali kamu menyimpan perubahan, aplikasimu akan dikompilasi ulang, dan jendela browser secara otomatis diperbarui untuk merefleksikan versi baru dari aplikasimu.

Bila kamu ingin membuat proyekmu untuk di distribusi, jalankan perintah berikut.

1
npm run build

Kesimpulan

Sepanjang seri tutorial ini, kita telah melihat beberapa cara pendekatan yang kamu dapat lakukan untuk menyiapkan aplikasi React, masing-masing semakin membutuhkan lebih banyak persiapan tugas di depan. Namun keuntungan jangka panjangnya adalah bahwa kamu memiliki kontrol dan fleksibilitas yang lebih atas bagaimana persisnya proyek dipersiapkan.

Setelah kamu menguasai mempersiapkan React, saya pikir kamu akan menemukan pengembangan aplikasi lebih menyenangkan. Saya akan senang mendengar komentarmu. Biarkan saya tahu apa yang kamu rencanakan untuk dibuat berikutnya dengan React!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.