Server Side Rendering dengan ReactJS + Express

Selamat pagi, mejuah — juah.

Ada yang sudah pernah pake React? Ada juga ada yang sudah pernah pake Express? Atau tertarik untuk combine keduanya? Tunggu dulu, tunggu dulu. Jalan nya tidak semudah itu, kisana. React js mempunyai kebiasaan render component ke client, sedangkan Express js adalah *framework* untuk back-end. Lalu bagaimana caranya agar component yang kita buat di client bisa ke-render oleh Express yang berjalan di server? Nah, ini dia. Saya juga baru nemu nih *alhamdulillah sekali karena dari kemaren — kemaren udah keliling forum gada nemu jawaban

Pertama kali, inisialisasi package pake npm.

npm init

Selanjutnya install package express, react, react-dom, babel-preset-es2015, babel-preset-react ke dalam dependencies menggunakan yarn (loh, apa itu yarn? Kalo mau tau lebih lanjut, bisa coba jalan — jalan ke sini. Intinya sih, yarn itu package installer. Lebih cepat sih menurut saya. cobain deh.) dengan perintah :

yarn add react react-dom express babel-preset-react babel-preset-es2015

Nah kalo udah, install juga babel dan babel-cli secara global dengan perintah :

npm install -g babel babel-cli

Pasti diantara kalian ada yang tanya, loh kenapa pake npm lagi? kan udah ada yarn yang lebih cepat?. Iya bener, pertanyaannya gak salah. Tapi sepengetahuan saya, yarn itu baru dirilis finalnya kurang dari 6 bulan dari tanggal saya mengetik sekarang. Jadi fungsi global (yang ditandai dengan flag -g) belum ada. Ingat ya! belum ada. Bukan berarti enggak akan ada.

Nah, kalo udah, lanjut buat file settingan. File ini digunakan untuk mendaftarkan babel-preset-* ke aplikasi. Kurang lebih sebagai berikut :

// .babelrc -> nama file
{
"presets": ["react", "es2015"]
}

Untuk codingan yang pertama, kita akan membuat file Component yang berisi.. Component. Oke, lanjut aja dulu. Karna banyak yang bilang, teknik belajar yang baik adalah ‘learning by doing’, jadi ketik *bukan copas* aja dulu. Entar ngertinya belakangan.

// Component.jsx
import React from 'react'
class Component extends React.Component {
render () {
return (
<div>
<h1>Hello world</h1>
</div>
)
}
}
module.exports = Component

Si component inilah yang nantinya akan kita lihat di browser.

Kalau sudah, lanjut untuk coding webservernya. Code nya sebagai berikut :

// app.js
import express from 'express'
const app = express ()
export default app

File app.js berfungsi sebagai webserver yang akan kita jalankan via file lain. File lain nya apaan? buatlah code kurang untuk menjalan kan server dan antek — anteknya (read: component, module) kurang lebih seperti ini :

// index.js
import app from './app.js'
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import Component from './Component.jsx'
app.get('/', (req, res) => {
var html = ReactDOM.renderToString(
React.createElement(Component)
)
res.send(html)
})
app.listen(2000, () => {
console.log('server running on 2000')
})

Sebenernya, untuk bagian routing (yang pada kode diatas ditandai dengan awalan app.get) bisa dibuat file tersendiri. Tapi entar takutnya malah kemakan waktu, itulah sebabnya saya gabungin aja ke dalam satu file.

Kalau sudah selesai, sekarang masuk ke tahap finishing. Buka file package.json dan edit filenya sedemikian rupa sehingga menjadi :

{
"name": "express-es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "babel-node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-register": "^6.16.3",
"express": "^4.14.0",
"react": "^15.3.2",
"react-dom": "^15.3.2"
}
}

Setelah selesai, masuk ke terminal dan jalankan perintah npm start. Jika muncul tulisan server running on 2000, Voila! Express has run on the server.

Segitu dulu aja lah. 
Terima kasih.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.