Tampilkan postingan dengan label Babel. Tampilkan semua postingan
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
)
