Skip to content

Commit f361a36

Browse files
arisetyoarisetyo
committed
server-side react app example
1 parent 820b761 commit f361a36

File tree

11 files changed

+167
-0
lines changed

11 files changed

+167
-0
lines changed

‎12_server-side/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015", "react"]
3+
}

‎12_server-side/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Server-Side React
2+
3+
Membuat aplikasi React dengan dukungan server-side bukanlah sebuah keharusan. Tetapi ada beberapa keuntungan yang didapat bila kita menggunakan metode ini:
4+
* _load_ yang lebih cepat saat aplikasi pertama kali di-_request_
5+
* penggunaan browserHistory bila menggunakan react-router
6+
7+
Tidak ada yang berbeda dalam pembuatan aplikasi React dengan dukungan server-side app. Kita cuma menambahkan sebuah server yang me-render aplikasi pertama kali.
8+
Sesudah itu aplikasi di client akan mengambil alih dan berfungsi seperti biasa.
9+
10+
Di latihan ini kita akan membuat sebuah web server menggunakan Express dan Babel. Ada baiknya untuk mengenal terlebih dahulu pembuatan web server menggunakan Express dan Node.

‎12_server-side/html.template.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default ({body, title, initialState}) => {
2+
return `
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<script>window.__APP_INITIAL_STATE__220877 = ${initialState}</script>
7+
<title>${title}</title>
8+
</head>
9+
<body>
10+
<div id="root">${body}</div>
11+
<script src="build/bundle.js"></script>
12+
</body>
13+
</html>
14+
`;
15+
};
16+
17+
//`body` dibutuhkan untuk render awal oleh server. Selanjutnya aplikasi akan dijalankan dari skrip React di dalam bundle.js hasil transpilasi Webpack.

‎12_server-side/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "server-side-basic",
3+
"version": "1.0.0",
4+
"description": "Basic Server-side React",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack && babel-node --presets 'react,es2015' server.js"
8+
},
9+
"keywords": [
10+
"React",
11+
"Basic Server-side",
12+
"Node"
13+
],
14+
"author": "Arie M. Prasetyo",
15+
"license": "ISC",
16+
"dependencies": {
17+
"babel-cli": "^6.18.0",
18+
"babel-core": "^6.20.0",
19+
"babel-loader": "^6.2.10",
20+
"babel-preset-es2015": "^6.18.0",
21+
"babel-preset-react": "^6.16.0",
22+
"express": "^4.14.0",
23+
"react": "^15.4.1",
24+
"react-dom": "^15.4.1"
25+
},
26+
"devDependencies": {}
27+
}

‎12_server-side/server.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import express from 'express'
2+
import React from 'react'
3+
import {renderToString} from 'react-dom/server'
4+
import App from './src/App'
5+
import template from './html.template.js'
6+
7+
const server = express();
8+
9+
server.use('/build', express.static('build'));
10+
11+
server.get('/', (req, res) => {
12+
//mengirimkan value dari server
13+
const visitorName = 'Joni';
14+
15+
//membuat state awal untuk app yang di-render oleh server
16+
const initialState = {visitorName};
17+
18+
//me-render request awal
19+
const appString = renderToString(<App {...initialState}/>);
20+
21+
res.send(template({
22+
body: appString,
23+
title: 'Server Side',
24+
initialState: JSON.stringify(initialState)
25+
}));
26+
});
27+
28+
server.listen(8077);

‎12_server-side/src/App.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import Header from './Header'
3+
import Paragraphs from './Paragraphs'
4+
import RandomNumber from './RandomNumber'
5+
6+
const App = props => (
7+
<div>
8+
<Header name={props.visitorName}/>
9+
<RandomNumber/>
10+
<Paragraphs/>
11+
</div>
12+
)
13+
14+
export default App

‎12_server-side/src/Header.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
const Header = ({name}) => (
4+
<h1>Hae, {name}</h1>
5+
)
6+
7+
export default Header

‎12_server-side/src/Paragraphs.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
const Paragraphs = () => (
4+
<div>
5+
<p>
6+
Kita menjalankan sebuah server Node langsung menggunakan babel-cli. Sehingga kita dapat menggunakan JSX langsung di server-side JS.
7+
Untuk produksi lebih baik mentraspilasi server.js dan menjalankannya seperti server Node lainnya.
8+
</p>
9+
<p>
10+
Kerja server berhenti saat render pertama dikirim. Selanjutnya tugas dilakukan seperti biasa oleh bundle.js yang dibuat oleh Webpack.
11+
Metode seperti onClick tidak akan bekerja bila kita hanya mengandalkan server-side.
12+
</p>
13+
</div>
14+
)
15+
16+
export default Paragraphs

‎12_server-side/src/RandomNumber.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, {Component} from 'react'
2+
3+
class RandomNumber extends Component {
4+
constructor() {
5+
super()
6+
this.state = {num: 0}
7+
}
8+
9+
handleClick() {
10+
this.setState({num: Math.random()})
11+
}
12+
13+
render() {
14+
return(
15+
<div>
16+
<button onClick={this.handleClick.bind(this)}>Random</button>&nbsp;{this.state.num}
17+
</div>
18+
)
19+
}
20+
}
21+
22+
export default RandomNumber

‎12_server-side/src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react'
2+
import {render} from 'react-dom'
3+
import App from './App'
4+
5+
render(<App {...window.__APP_INITIAL_STATE__220877}/>, document.getElementById('root'))
6+
//app versi klien menggunakan initial state yang dikirim oleh server

0 commit comments

Comments
 (0)