Primasaja.com: Service WEB, MOBILE & SOFTWARE DEVELOPMENT , ENGINEERING & ARCHITECTURE , DESIGN & CREATIVE , ADMIN SUPPORT , SALES & MARKETING , INSTALASI JARINGAN & KOMPUTER
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang indonesia 15540

Tutorial JSX React Babel dan Webpack

tidak ada komentar : DIPOSTING OLEH jaka Pada 2017 LABEL: react

www.primasaja.com -


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



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

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


Tidak Ada Komentar: