Step 1 - Create the Root Folder
Buat Folder bisa lewat CMD atau Explorer
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp
Buat [Link] dengan jalankan kode dibawah
C:\Users\username\Desktop\reactApp>npm init
Wrote to C:\reactApp\[Link]:
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
Step 2 - install React and react dom
Install react dan react-dom
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom
Atau jika ingin sekali install
C:\Users\username\Desktop\reactApp>npm install react react-dom
Step 3 - Install Enviorment
Ubah script pada .[Link] menjadi
{
"name": "reactapp",
"version": "1.0.0",
"description": "React Native",
"main": "[Link]",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode development --progress --info-verbosity verbose",
"watch": "webpack --mode development --watch --progress --info-verbosity
verbose --display-error-details --display-reasons",
"production": "webpack --mode production --progress"
},
"author": "Inixindo",
"license": "ISC",
"dependencies": {
"@babel/preset-env": "^7.4.3",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"babel-loader": "^7.1.5"
}
}
Step 4 – Buat File
Untuk menyelesaikan setup, kita harus membuat file seperti berikut
[Link], [Link], [Link], [Link], dan .babelrc
anda bisa membuatnya dengan CMD atau langsung via explorer
jika menggunakan CMD berikut caranya:
C:\Users\username\Desktop\reactApp>type nul > [Link]
C:\Users\username\Desktop\reactApp>type nul > [Link]
C:\Users\username\Desktop\reactApp>type nul > [Link]
C:\Users\username\Desktop\reactApp>type nul > [Link]
C:\Users\username\Desktop\reactApp>type nul > .babelrc
Step 5 - Set Compiler, Server and Loaders
Buka [Link] dan tambahkan code berikut. Atur webpack entry
point menjadi [Link]
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
[Link] = {
entry: './[Link]',
output: {
path: [Link](__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react']
}
}
]
}
// plugins:[
// // new HtmlWebpackPlugin(),
// // new HtmlWebpackPlugin({
// // template: './[Link]'
// // })
// new HtmlWebpackPlugin({
// title: 'cache'
// }),
// new [Link](`Wadaw`)
// ]
}
Step 6 - [Link]
Pada file ini, <div id = “app”> akan menjadi root element
Tambahkan index_bundle.js script, pada [Link]
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'bundle/index_bundle.js'></script>
</body>
</html>
Step 7 − [Link] dan [Link]
Ini adalah React Component pertama dengan tulisan Hello World
[Link]
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
export default App;
Kita harus memanggil component dan me-render ke root element agar kita
dapat melihatnya di browser
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './[Link]';
[Link](<App />, [Link]('app'));
Buat file bernam .babelrc dan isikan dengan
{
"presets":["es2015", "react"]
}
Step 8 – Jalankan Server
Setup telah selesai, sekarang coba jalankan server
C:\Users\username\Desktop\reactApp>npm start
Step 10 – Generate Bundle
C:\Users\Tutorialspoint\Desktop\reactApp>npm run build
This will generate the bundle in the current folder as shown below.