Minimum setting development React.js dengan ES6

3 min readApr 30, 2017

Artikel ini di tulis dalam keadaan masih baru bangun tidur, selimutan, minum segelas milo, dan mencoba menikmati indahnya dunia.

Sudah beberapa hari ini ngutak-ngatik React.js. Well belum bisa di bilang gw ini expert tapi untuk beberapa hal kayaknya perlu ada yg nge-share bagaimana minimum setting development di react.js dengan ES6 karena gw rasa di internet terlalu banyak artikel yang langsung loncat-loncat di berbagai macam hal seperti flux, route, dll. Gw tipikal pembelajar yang lambat dan ga boleh di suapin kebanyakan langsung. Dan gw percaya banyak yg butuh bisa nulis “hello world” dulu aja di bandingin udah pusing nulis config server yang panjangnya MasyaAllah.

Di sini gw ga bahas apa itu React.js, sejarahnya, etc. Fokus langsung ke bagian setting development-nya. Bagi yang malas dan ingin langsung lihat hasil project-nya bisa ke https://github.com/artdevil/learn-react dengan branch minimum-setup

Buka terminal. Pastikan udah nginstall NPM (Node Package Management), kalo belum jika yang punya mac bisa via homebrew. kemudian buat folder baru :

mkdir learn-react
cd learn-react
npm init

Tambahkan beberapa depency dan plugins.

#adalah keterangan-jangan di copy ke terminal !!

# webpack untuk bundling semua file JS ke dalam satu file JS yang akan di gunakan di aplikasi
npm install webpack --save# webpack-dev-server untuk running aplikasi di localhost (untuk aplikasi ini runnning di localhost:8080)
npm install webpack-dev-server --savenpm install react --save
npm install react-dom --save# babel sebagai library untuk mentranslasikan ES6 -> ES5 -> Javacript
npm install -g babel
npm install -g babel-cli
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

Buat file. File ini yang nantinya kita modifikasi dalam membuat aplikasi

# halaman awal aplikasi yang di tampilkan
touch index.html# komponen react.js. 
touch App.jsx# Root element aplikasi react.js
touch main.js# Tempat konfigurasi aplikasi
touch webpack.config.js

Buka project di text editor (for me all hail ATOM !!). yang pertama kita modifikasi adalah webpack.config.js.

# webpack.config.jsvar config = {
   entry: './main.js',
	
   output: {
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
	
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

Buka file package.json. Tambahkan kode berikut di bagian “scripts”

"scripts": {
  "start": "webpack-dev-server --hot"
},

Buka index.html . hanya kode html biasa. Perhatikan bagian script, index.js adalah bagian “output” yang di set di webpack.config.js

<html lang="en">   <head>
      <meta charset="UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id="app"></div>
      <script src="index.js"></script>
   </body>

</html>

Buka App.jsx. kode pertama komponen react.js.

import React from 'react';export default class App extends React.Component {
  render() {
    return (
      <div>
        Hello world!!!
      </div>
    )
  }
}

Buka main.js. Root dari aplikasi yang kita set “entry” di webpack.config.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Running server dengan perintah berikut di terminal. Lalu buka web browser, masuk ke http://localhost:8080/

npm start

Ekpektasi dari pembuatan aplikasi awal ini adalah +- 10 menit (ditambah dengan memahami tulisan gw yang maaf masih newbie banget nge-blog). Semoga nantinya semakin rajin nulis. So see ya for next tutorial :D

Minimum setting development React.js dengan ES6

Written by Adhiguna Utama Sabril