Yang pertama harus udah install node.js nya plus npm nya. cara installnya bisa liat dari doc nya di mari -> node JS . Caranya tinggal download terus ikuti langkah-langkahnya.
Kemudian buat folder yang diinginkan misalnya projekreact. Ane simpan di c:\xampp\htdocs. Tapi sebenernya bebas mau disimpan dimana juga. kemudian buka command prompt, dan ketikkan perintah :
C:\xampp\htdocs>cd projekreact
C:\xampp\htdocs\projekreact>npm initfungsi init adalah membuat package.json. jika ada perintah enter saja.
Install Plugin Babel secara Global
Pada command prompt ketikan perintah
npm install -g babel
npm install -g babel-cli
Install Plugin Webpack
Pada command prompt ketikan perintah
npm install webpack --save
npm install webpack-dev-server --save
Install ReactJS dan React DOM
Pada command prompt ketikan perintah
npm install react --save
npm install react-dom --save
Install Beberapa Plugin Babel
Pada command prompt ketikan perintah
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
Kemudian dalam folder projekreact buat file
1. index.html
2. App.jsx
3. main.js
4. webpack.config.js
Lalu buka file webpack.config.js. Isi dengan perintah di bawah ini. port:8080 dapat diganti dengan port sesuai keinginan.
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
Lalu dalam package.json kita hapus "test" "echo \"Error: no test specified\" && exit 1" dan ganti dengan"start": "webpack-dev-server --hot"perintah ini berfungsi agar kita dapat mengeksekusi app dengan perintah npm start langsung dari server dan --hot berfungsi saat merubah kode kita tidak perlu merefresh browser.
dalam index.html
<!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>
App.jsximport React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.jsimport React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))
Setelah semuanya selesai tinggal eksekusi aplikasinyaketikan perintah
npm startTunggu running setelah selesai ketikkan localhost:8080 (sesuai port) pada browser .
Selamat anda berhasil jika telah sampai langkah ini.
No comments:
Post a Comment