{"id":11260,"date":"2019-03-09T00:00:00","date_gmt":"2019-03-09T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2019\/03\/09\/memulai-reactjs-dengan-webpack-4\/"},"modified":"2024-09-24T02:20:29","modified_gmt":"2024-09-24T02:20:29","slug":"memulai-reactjs-dengan-webpack-4","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2019\/03\/09\/memulai-reactjs-dengan-webpack-4\/","title":{"rendered":"Memulai ReactJS dengan Webpack 4"},"content":{"rendered":"

Artikel kali ini akan membahas bagaimana memulai koding ReactJS<\/a> menggunakan Webpack 4<\/a>. Sebelumnya pastikan kalian sudah menginstall NodeJS terlebih dahulu karena kita akan mendownload modul ReactJS dan Webpack menggunakan NPM. Tanpa basa basi, silakan buat projek (folder) baru dengan nama \u201cwebpack-reactjs<\/strong>\u201d misalnya dan isi sesuai dengan struktur file berikut:<\/p>\n

webpack-reactjs\r\n|--- src\r\n|------ App.js\r\n|--- index.html\r\n|--- webpack.config.js<\/code><\/pre>\n
Jika sudah, buka terminal kemudian arahkan lokasi terminal ke folder projek yang sudah dibuat barusan. Misalnya lokasi projek kalian ada di \/User\/Document\/webpack-reactjs<\/em>, maka kalian perlu ketik kode berikut pada terminal Anda:<\/p>\n
cd \/User\/Document\/webpack-reactjs<\/code><\/pre>\n
Fyi, IDE atau text editor yang saya gunakan untuk koding adalah Visual Studio Code. Sudah tersedia fitur terminal, dan ketika dibuka akan otomatis diarahkan ke folder projek yang sedang dikerjakan sehingga saya tidak perlu repot untuk mengarahkan lokasi foldernya seperti sebelumnya.<\/p>\n
Jika sudah diarahkan ke folder tujuan, sekarang kita perlu membuat file \u201cpackage.json\u201d yang akan digunakan untuk menyimpan modul-modul yang telah kita install sehingga ketika pindah ke komputer lain kita bisa langsung install saja tanpa harus mencari lagi modul-modul yang akan diiinstall. Caranya dengan ketik:<\/p>\n
npm init<\/code><\/pre>\n
Nanti akan muncul beberapa field yang harus kalian isi. Tapi kalian bisa melewati tahap ini dengan menekan tombol \u201cEnter<\/em>\u201d sampai selesai. Setelah selesai akan secara otomatis terbuat file baru dengan nama \u201cpackage.json<\/em>\u201d. File tersebut adalah hasil dari field yang kalian isi tadi, jadi tidak masalah jika kalian melewati tahap isian tadi karena masih bisa diedit kembali. Sekarang kita punya struktur file seperti berikut:<\/p>\n
webpack-reactjs\r\n|--- src\r\n|------ App.js\r\n|--- index.html\r\n|--- webpack.config.js\r\n|--- package.json<\/code><\/pre>\n
Selanjutnya kita akan menginstall terlebih dahulu modul-modul yang kita butuhkan untuk dapat menjalankan kode ReactJS. Kita akan mulai dengan menginstall Webpacknya dulu. Sekarang buka terminal dan ketik kode berikut:<\/p>\n
npm install --save-dev webpack webpack-cli<\/code><\/pre>\n
Jika sudah terinstall, akan ada folder baru dengan nama \u201cnode_modules\u201d didalam projek kalian. Dan modul yang sudah diinstall barusan tersimpan di file \u201cpackage.json\u201d seperti berikut:<\/p>\n
{\r\n    ....\r\n    \u201cdevDependencies\u201d: {\r\n        \u201cwebpack\u201d: \u201c^4.29.0\u201d,\r\n        \u201cwebpack-cli\u201d: \u201c^3.2.1\u201d\r\n    }\r\n}<\/code><\/pre>\n
Selanjutnya kita akan menginstall modul Babel yang dibutuhkan untuk mengkonversi kode ES6 menjadi ES5 karena belum semua browser belum support (Internet Explorer contohnya) – karena ReactJS menggunakan code ES6. Sekarang buka terminal kalian dan ketik kode berikut:<\/p>\n
npm install --save-dev @babel\/core @babel\/preset-env @babel\/preset-react babel-loader<\/code><\/pre>\n
Jika sudah terinstall, selanjutnya kita akan membuat kode konfigurasinya menggunakan Webpack. Sekarang buka file \u201cwebpack.config.js\u201d dan ketik kode berikut:<\/p>\n
const path = require('path')\r\n\r\nmodule.exports = {\r\n    entry: '.\/src\/App.js',\r\n    output: {\r\n        filename: 'script.js',\r\n        path: path.resolve(__dirname, 'dist')\r\n    },\r\n    module: {\r\n        rules: [\r\n            {\r\n                test: \/.js$\/,\r\n                exclude: \/(node_modules)\/,\r\n                use: {\r\n                    loader: 'babel-loader'\r\n                }\r\n            }\r\n        ]\r\n    }\r\n}<\/code><\/pre>\n
Setelah itu buat file baru dengan nama \u201c.babelrc\u201d untuk konfigurasi Babelnya dan ketik kode berikut:<\/p>\n
{\r\n   \u201cpresets\u201d: [\u201c@babel\/env\u201d, \u201c@babel\/react\u201d]\r\n}<\/code><\/pre>\n
Jika sudah, buka file \u201cpackage.json\u201d. Pada bagian \u201cscripts\u201d: { \u2026 } tambahkan kode berikut:<\/p>\n
\"build\": \"webpack --config webpack.config.js\"<\/code><\/pre>\n
Sehingga menjadi seperti ini:<\/p>\n
\u201cscripts\u201d: {\r\n   \"test\": \"echo \"Error: no test specified\" && exit 1\",     \"build\": \r\n   \"webpack --config webpack.config.js --mode=development\"\r\n}<\/code><\/pre>\n
Setelah itu kita akan coba menjalankan perintah yang dibuat tersebut untuk mengecek apakah ada error pada konfigurasi yang sudah dibuat. Buka terminal kalian lalu ketik kode berikut:<\/p>\n
npm run build<\/code><\/pre>\n
Jika tidak ada error, akan ada tambahan folder baru dengan nama \u201cdist\u201d di dalam folder projek, yang di dalamnya terdapat file \u201cscript.js\u201d. Sampai sini kita sudah berhasil untuk membuatkan konfigurasinya. Selanjutnya kita akan memulai koding ReactJS.<\/p>\n
Sebelumnya, kita perlu menginstall terlebih dahulu modul reactjsnya. Caranya dengan mengetik kode berikut di terminal kalian:<\/p>\n
npm install --save react react-dom<\/code><\/pre>\n
Jika sudah, sekarang buka file \u201csrc\/App.js\u201d dan ketik kode berikut:<\/p>\n
import React, { Component } from 'react'\r\nimport { render } from 'react-dom'\r\n\r\nclass App extends Component {\r\n    render() {\r\n        return (\r\n            <h1>Hello world!!<\/h1>\r\n        )\r\n    }\r\n}\r\n\r\nrender(\r\n    <App \/>,\r\n    document.getElementById('root')\r\n)<\/code><\/pre>\n
Setelah itu buka terminal lagi dan ketik kode berikut:<\/p>\n
npm run build<\/code><\/pre>\n
Selanjutnya buka file \u201cindex.html\u201d lalu ketik kode berikut:<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"UTF-8\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n        <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n        <title>Setup ReactJS with Webpack<\/title>\r\n    <\/head>\r\n\r\n    <body>\r\n        <div id=\"root\">\r\n            <!-- load by ReactJS -->\r\n        <\/div>\r\n\r\n        <!-- load script -->\r\n        <script src=\"dist\/script.js\"><\/script>\r\n    <\/body>\r\n<\/html><\/code><\/pre>\n
Sampai saat ini proses konfigurasi sudah selesai, Anda sudah bisa memulai koding ReactJS menggunakan Webpack. Untuk mengeceknya silahkan buka file \u201cindex.html\u201d tadi di browser. Nanti akan tampil sesuai dengan yang sudah kita buat pada file \u201csrc\/App.js\u201d.<\/p>\n
\"\"
Hasil kode jika sudah berhasil.<\/figcaption><\/figure>\n
 <\/p>\n
Sekian dari saya, mudah-mudahan bermanfaat.<\/p>\n
Hasil kode dapat dilihat disini:
https:\/\/github.com\/fachririyanto\/training-webpack\/tree\/master\/basic-reactjs<\/a><\/p>\n
Referensi:
https:\/\/medium.freecodecamp.org\/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75<\/a><\/p>\n
Logo:
https:\/\/raw.githubusercontent.com\/webpack\/media\/master\/logo\/icon-square-big.png<\/a>
https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/a\/a7\/React-icon.svg\/640px-React-icon.svg.png<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel kali ini akan membahas bagaimana memulai koding ReactJS menggunakan Webpack 4. Sebelumnya pastikan kalian sudah menginstall NodeJS terlebih dahulu karena kita akan mendownload modul ReactJS dan Webpack menggunakan NPM. Tanpa basa basi, silakan buat projek (folder) baru dengan nama \u201cwebpack-reactjs\u201d misalnya dan isi sesuai dengan struktur file berikut: webpack-reactjs |— src |—— App.js |— […]<\/p>\n","protected":false},"author":20,"featured_media":11261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11260"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11260\/revisions"}],"predecessor-version":[{"id":11996,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11260\/revisions\/11996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11261"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}