Tulisan Terbaru

Membuat Program Sederhana dengan ReactJS

React adalah perpustakaan/library yang dikembangkan oleh Facebook. React digunakan untuk menangani layer view untuk aplikasi web dan mobile. ReactJS memungkinkan Anda untuk membuat komponen user interface yang reusable, maksudnya yaitu komponen user interface ini dapat digunakan ulang di berbagai halaman yang berbeda. React saat ini merupakan salah satu library Javascript populer dan memiliki komunitas yang besar.
Di React, Anda membuat views dengan komponen yang lebih kecil, Anda bisa menggunakan ulang sebuah single components di beberapa tempat, dengan state dan properties yang berbeda, dan beberapa komponen dapat berisi beberapa komponen lain. Setiap komponen di sebuah aplikasi React memiliki sebuah private state yang dapat diubah seiring waktu, dan react akan mengurus pembaharuan tampilan komponen ketika ada perubahan state. Dengan React, Anda menulis HTML menggunakan Javascript. Javascript di ReactJS digunakan untuk meng-generate HTML yang tergantung pada beberapa data.

Prerequisites:

Untuk men-develop ReactJS, Anda harus menginstall beberapa dependensi dari React, yaitu nodejs, webpack, dan babel.

  • download nodejs melalui situs nodejs.org , kemudian install seperti biasa. Selanjutnya install dependensi yang lain seperti babel dan webpack dengan membuka command prompt nodejs, ketik kode dibawah ini dan enter:
    • babel
      C:\user\username>npm install -g babel
      C:\user\username>npm install -g babel-cli
    • webpack
      C:\user\username>npm install -g webpack
      C:\user\username>npm install -g webpack-dev-server
  • Buat direktori baru untuk aplikasi ReactJS, Anda bisa menggunakan cara manual yaitu dengan masuk ke direktori C:\user\username\ kemudian membuat folder nama_aplikasi atau menjalankan command di bawah ini:
    C:\user\username>mkdir nama_aplikasi
  • Masih di command prompt nodejs, pindah lokasi aktif ke nama_aplikasi, dengan cara ketik command cd disusul dengan command nama_aplikasi, contohnya seperti di bawah ini:
    C:\user\username>cd nama_aplikasi
    sehingga menjadi
    C:\user\username\nama_aplikasi>
  • Langkah selanjutnya adalah menginstall ReactJS di folder nama_aplikasi Anda. dengan command di bawah ini:
    C:\user\username\nama_aplikasi>npm install react --save
    C:\user\username\nama_aplikasi>npm install react-dom --save
  • Kemudian Anda juga membutuhkan beberapa plugin babel, install dengan command di bawah ini:
    C:\user\username\nama_aplikasi>npm install babel-core
    C:\user\username\nama_aplikasi>npm install babel-loader
    C:\user\username\nama_aplikasi>npm install babel-preset-react
    C:\user\username\nama_aplikasi>npm install babel-preset-es2015
  • Selanjutnya membuat file package.json dengan command di bawah ini:
    C:\user\username\nama_aplikasi>npm init
  • Anda kemudian akan diminta untuk memasukkan beberapa input untuk data json didalam package. Tekan enter terus menerus untuk melakukan input otomatis ke value defaultnya.
  • kemudian, didalam file package.json, cari dan ubah kode dibawah ini:
    "test": "echo \"Error: no test specified\" && exit 1"
    menjadi
    "start": "webpack-dev-server --hot"

Program Utama

Proses install prerequisites untuk menjalankan ReactJS sudah selesai, selanjutnya buat file baru dengan nama webpack.config.js didalam folder nama_aplikasi Anda, pada file tersebut, isi dengan kode di bawah ini:
config = {
    entry   : "./main.js",
    output  : {
        path        : './',
        filename    : 'index.js'
    },
    devServer : {
        inline  : true,
        port    : 8080
    },
    module : {
        loaders : [
            {
                test    : /\.jsx?$/,
                exclude : /node_modules/,
                loader  : 'babel',
                query   : {
                    presets : ['es2015','react']
                }
            }
        ]
    }
}

module.exports = config;
Buat file App.jsx, file ini berisi dengan komponen yang akan Anda tampilkan di index.html, isi dengan kode di bawah ini:
import React from 'react';

class App extends React.Component
{
    render()
    {
        return(
            <div>Selamat datang di ReactJS</div>
        );
    }
}

export default App;
Selanjutnya, buat file main.js, file ini akan digunakan untuk menerjemahkan komponen di App.jsx sehingga dapat dibaca dan ditampilkan oleh browser. isi dengan kode di bawah ini:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));
Buat file index.html, file ini nantinya akan digunakan untuk menampilkan hasil dari aplikasi ReactJS Anda. isi file dengan kode di bawah ini:
<!DOCTYPE html>
<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>
Untuk mem-build koding utama ini, masukkan commad di nodejs command prompt di bawah ini:
C:\user\username\nama_aplikasi>webpack
Untuk melihat hasilnya di browser, klik dua kali pada file index.html

Hasil

Di bawah ini adalah contoh screenshot hasil dari langkah-langkah di atas

Lakukan build ulang ketika Anda mengedit salah satu file utama ini.

0 komentar:

Post a Comment

 
© 2016 Dhany Nurdiansyah | Powered by Blogger