Scribd
Upload
74 views8 pages

Step 1 - Create The Root Folder: Buat Folder Bisa Lewat CMD Atau Explorer

The document outlines 10 steps to set up a basic React application: 1) Create a reactApp folder and initialize a package.json file 2) Install React and React DOM packages 3) Modify package.json scripts for building and running the app 4) Create initial files like index.html, App.js, and webpack configuration 5) Configure webpack, set the entry point, and add Babel loader 6) Add a div to index.html for the React component to render to 7) Create a basic App component and render it in main.js 8) Run the development server 9) Generate a bundled build

Uploaded by

Aldino Kemal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views8 pages

Step 1 - Create The Root Folder: Buat Folder Bisa Lewat CMD Atau Explorer

The document outlines 10 steps to set up a basic React application: 1) Create a reactApp folder and initialize a package.json file 2) Install React and React DOM packages 3) Modify package.json scripts for building and running the app 4) Create initial files like index.html, App.js, and webpack configuration 5) Configure webpack, set the entry point, and add Babel loader 6) Add a div to index.html for the React component to render to 7) Create a basic App component and render it in main.js 8) Run the development server 9) Generate a bundled build

Uploaded by

Aldino Kemal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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 package.json dengan jalankan kode dibawah


C:\Users\username\Desktop\reactApp>npm init

Wrote to C:\reactApp\package.json:

"name": "reactApp",

"version": "1.0.0",

"description": "",

"main": "index.js",

"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 .package.json menjadi
{
"name": "reactapp",
"version": "1.0.0",
"description": "React Native",
"main": "index.js",
"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
index.html, App.js, main.js, webpack.config.js, dan .babelrc
anda bisa membuatnya dengan CMD atau langsung via explorer
jika menggunakan CMD berikut caranya:

C:\Users\username\Desktop\reactApp>type nul > index.html


C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc
Step 5 - Set Compiler, Server and Loaders
Buka webpack.config.js dan tambahkan code berikut. Atur webpack entry
point menjadi main.js

const path = require('path');


const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
entry: './main.js',
output: {
path: path.join(__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: './index.html'
// // })
// new HtmlWebpackPlugin({
// title: 'cache'
// }),
// new webpack.BannerPlugin(`Wadaw`)
// ]
}
Step 6 - index.html

Pada file ini, <div id = “app”> akan menjadi root element


Tambahkan index_bundle.js script, pada index.html

<!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 − App.js dan main.js
Ini adalah React Component pertama dengan tulisan Hello World

App.js

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

main.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.js';

ReactDOM.render(<App />, document.getElementById('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.

You might also like