Langkah-langkah install ReactJS dengan NPM (Babel, React DOM, Webpack)

ranialmonk September 07, 2017
Terkadang rumit tapi kalo diikuti langkah per langkah dengan baik pasti bisa. Ane mau ngasih tau step by stepnya
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 init
fungsi 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.jsx
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))
Setelah semuanya selesai tinggal eksekusi aplikasinya
ketikan perintah
npm start
Tunggu running setelah selesai ketikkan localhost:8080 (sesuai port) pada browser .

Selamat anda berhasil jika telah sampai langkah ini.



ranialmonk

Diposting oleh ranialmonk

Posting Komentar

0 Komentar