Minggu, 23 April 2017
Tutorial JSX, React, Babel dan Webpack
Jaka Prima Maulana
1. buka terminal ketik mkdir tutorialprimasajacom
2. masuk ke folder tutorialprimasajacom
3. ketikkan npm init
4. enter saja terus
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
dan ini
Selengkapnya..
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
- Pengenalan
1. buka terminal ketik mkdir tutorialprimasajacom
2. masuk ke folder tutorialprimasajacom
3. ketikkan npm init
4. enter saja terus
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
5.ketik yes
6. ketikkan ini
primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ npm install --save react react-dom
primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ npm install --save react react-dom
dan ini
$ sudo npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react css-loader style-loader html-webpack-plugin webpack webpack-dev-server
7. ketik vim package.json
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
maka akan ada dependencies baru
8. buat index.js dan index.css
pada index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./index.css');
// komponen punya state
// live cycle event
// UI of Component
class App extends React.Component {
render(){
return (
<div>
Hello World
</div>
)
}
}
ReactDOM.render(
<App />,
document.getELementById('app')
);
9. pada index.css
body {
background: green;
}
10. buat webpack.config.js masukkan
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //ada di dependencies package.json
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader'},
// style loader disini agar require css pada index.js dapat dikenali
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'app/index.html'
})]
}
11. buat index.html masukkan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
12. untuk run package buka package.json lalu
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"env",
"react"
]
},
"author": "",
"license": "ISC",
"devDependenciesk": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"devDependencies": {
"webpack-dev-server": "^2.4.3"
}
}
13. ketik npm run create
14. primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ sudo npm install --save-dev webpack-dev-server
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
maka akan ada dependencies baru
8. buat index.js dan index.css
pada index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./index.css');
// komponen punya state
// live cycle event
// UI of Component
class App extends React.Component {
render(){
return (
<div>
Hello World
</div>
)
}
}
ReactDOM.render(
<App />,
document.getELementById('app')
);
9. pada index.css
body {
background: green;
}
10. buat webpack.config.js masukkan
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //ada di dependencies package.json
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader'},
// style loader disini agar require css pada index.js dapat dikenali
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'app/index.html'
})]
}
11. buat index.html masukkan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
12. untuk run package buka package.json lalu
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"env",
"react"
]
},
"author": "",
"license": "ISC",
"devDependenciesk": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"devDependencies": {
"webpack-dev-server": "^2.4.3"
}
}
13. ketik npm run create
14. primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ sudo npm install --save-dev webpack-dev-server
15. buka package.json
"scripts": {
"start": "webpack-dev-server --open",
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
16 ketik npm run start
Langganan:
Postingan
(
Atom
)
