Create React Component and Publish to npm

Sekedar melanjutkan Create Own Module on NPM, jika belum baca silahkan baca dulu yaaa, linknya ada disini

sekarang saya akan mencoba membahas membuat simple component react yang akan didistribusikan di npm. Banyak sekali keuntungan yang kita dapat jika kita membuat module yang berisi component react. Salah satunya kita bisa memantain component kita jadi lebih focus dan independen.

Saya tidak akan membahas banyak tentang react tapi saya akan coba jelaskan step by step membuat simple component dan mendistribukannya.

Pertama kalian harus menyiapkan project kalian dengan membuat project dengan struktur

 projectName  
 -build  
 -node_modules  
 -src  
 --index.js  
 -.babelrc  
 -package.json  
 -webpack.config.js  

Jika sudah setting file .babelrc , babel itu adalah library untuk meng-compile javascript, seperti react yang menggunakan ES6 dan JSX, untuk info lebih lanjut klik link berikut https://babeljs.io/

 {  
  "presets": ["env"],  
  "plugins": [  
   "transform-object-rest-spread",  
   "transform-react-jsx"  
  ]  
 }  

Jika sudah setting webpack.config.js , webpack juga digunakan react sebagai static module bundler untuk next generation javascript, image, dan css, untuk info lebih lanjut klik berikut https://webpack.js.org/

 var path = require('path');  
 module.exports = {  
  entry: './src/index.js',  
  output: {  
   path: path.resolve(__dirname, 'build'),  
   filename: 'index.js',  
   libraryTarget: 'commonjs2'  
  },  
  module: {  
   rules: [  
    {  
     test: /\.js$/,  
     include: path.resolve(__dirname, 'src'),  
     exclude: /(node_modules|bower_components|build)/,  
     use: {  
      loader: 'babel-loader',  
      options: {  
       presets: ['env']  
      }  
     }  
    }  
   ]  
  },  
  externals: {  
   'react': 'commonjs react'  
  }  
 };  

Jika sudah setting package.json , ubah nama module karena nama module harus unique, tambahkan settingan lain jika memang dibutuhkan

 {  
  "name": "react-your-component",  
  "version": "0.0.1",  
  "description": "Put a description here",  
  "main": "build/index.js",  
  "peerDependencies": {  
   "react": "^15.5.4"  
  },  
  "dependencies": {  
   "babel-preset-react": "^6.24.1",  
   "react": "^15.5.4",  
   "webpack": "^2.6.1"  
  },  
  "scripts": {  
   "test": "echo \"Error: no test specified\" && exit 1",  
   "start": "webpack --watch",  
   "build": "webpack"  
  },  
  "author": "Muhammad Abdurrohman <muhammadabdurrohman1995@gmail.com>",  
  "devDependencies": {  
   "babel-cli": "^6.24.1",  
   "babel-core": "^6.24.1",  
   "babel-loader": "^7.1.4",  
   "babel-plugin-transform-object-rest-spread": "^6.23.0",  
   "babel-plugin-transform-react-jsx": "^6.24.1",  
   "babel-preset-env": "^1.5.1"  
  },  
  "keywords": [  
   "react",  
   "your",  
   "component"  
  ],  
  "license": "MIT"  
 }  

Setelah semuanya udah di setup, install module dependency dengan execute command

 $ npm install  

Sekarang buat component yang kalian inginkan, contoh

 import React from 'react';  
 class myButton extends React.Component {  
   render() {  
     return (  
       <div>  
         <button>My Button</button>  
       </div>  
     );  
   }  
 }  
 export default myButton;  

Jika sudah berhasil terinstall dan component react sudah selesai dibuat, untuk mengcompile module kalian execute command

 $ npm run build  

Jika sudah hasil compile akan berada di folder build, jika ingin test module kalian coba link module kalian dengan react project kalian dengan execute command

 $ npm link  

Sekarang buat project react untuk test module yang kita buat dan untuk menghubungkan module kalian dengan project react kalian execute command

 $ npm link react-your-component  

Jika sudah kalian hanya tinggal import module kalian dan masukan ke dalam view sebagai DOM

 import YourComponent from ‘react-your-component’;  
 <YourComponent />  

jika sudah start project kalian.. maka akan jadi seperti ini

Selamat Mencoba ~~

References
https://medium.com/@calebmer/write-your-own-react-js-776dbef98b8