Cách tạo một React Component và Publish lên NPM

Như bạn đã biết một trong những điểm mạnh của React là tái sử dụng Component, nhất là khi bạn làm việc trong các dự án của Nhật - họ thường xuyên tạo các form với rất nhiều textInput, checkbox, radioButton...vv. Những lúc như vậy bạn sẽ nhận thấy việc tái sử dụng component là vô cùng quan trọng. Thật tuyệt vời nếu ta muốn sử dụng một form upload ảnh hay một form khảo sát hoặc đơn giản là 1 form đăng nhập bao gồm rất nhiều thông tin cần nhập mà chỉ cần gọi một dòng và truyền một vài tham số cần thiết là có được 1 form thật đầy đủ những thành phần cần thiết. Và còn tuyệt vời hơn nữa đối với developer khi những component đó được bạn upload lên NPM để chia sẻ nó cho cộng đồng. Và hôm nay, mình sẽ chia sẻ với các bạn cách tạo 1 component đơn giản và sau đó upload nó lên NPM để chia sẻ cho cộng đồng. Mình chắc chắn bạn sẽ nhận ra đây là một công việc rất thú vị.

Có 3 việc cần làm:

Tạo Component
Configuring Webpack
Upload lên NPM

1. Tạo Component

Chúng ta hãy cùng tạo một component có tên là react-calendar-picker

Khởi tạo dự án :

cd ~
mkdir react-calendar-picker
echo 'v6.10' > .nvmrc
echo '/node_modules' > .gitignore
nvm use
mkdir build
mkdir src

Chú ý dòng echo '/node_modules' > .gitignore để bỏ qua node_modules không upload lên nha, không là nặng lắm đó.

Sau đó chúng ta tạo file .babelrc bằng tay

.babelrc

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

đây là file Babel Configuration File, mục đích sử dụng 2 preset là

babel-preset-react : chuyển đổi JSX thành Javascript
babel-preset-es2015: chuyển đổi ES6 thành ES5

Lát chúng ta sẽ thêm 2 preset này vào trong file Package.json.
Trong phần tiếp theo chúng ta sẽ đi sâu vào việc configure Webpack cho project của chúng ta.

2. Configuring Webpack

Đầu tiên, chúng ta sẽ bắt đầu với việc tạo file webpack.config.js trong thư mục gốc của project. File này sẽ chứa các thông tin liên quan đến build process của bạn, đây là một Javascript Object.

// webpack.config.js
module.exports = {
  // configurations here
};

Chúng ta chỉ cần quan tâm đến 3 configuration cơ bản trong Webpack đó là : entry, output, module.

Chúng ta có thể tìm hiểu thêm thông qua document của Webpack. Trong hướng dẫn này mình có 1 entry point đó là - app.js, đây là nơi các React Component được render ra. Tương tự cho phần output, chúng ta sử dụng filename với tên là bundle.js. Phần quan trọng nhất trong file configuration này là module, nơi sẽ định nghĩa các transformations sẽ được thực hiện trong source code. Như project này mình sử dụng babel-loader để chuyển đổi JSX và ES6 thành ES5. Việc này sẽ được thực hiện bằng việc định nghĩa các loader bên trong loader option

Nội dung của file webpack.config.js sẽ như dưới đây

module.exports = {
  //entry: './app.js', // run for demo
  entry: './components/App.js', // for build to npm

  output: {
    filename: 'bundle.js'
  },

  devServer: {
    inline: true,
    port: 7777
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader', 'babel-loader']
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

a. Configuring Webpack Dev Server

Webpack Dev Server - Là một công cụ hữu ích được cung cấp bởi WebPack giúp cho việc phát triển ứng dụng trở nên dễ dàng và thuận tiện hơn.

Cài package cần thiết - webpack-dev-server

npm install --save-dev webpack-dev-server

Sau đó, trong file pagekage.json chúng ta thêm đoạn code sau:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "start": "webpack-dev-server --port 7777 --progress"
},

Trong đoạn script trên, chúng ta sử dụng lệnh npm run start để khởi chạy dev server.
Options --port để thay đổi cổng mặc định khi chúng ta truy cập đến địa chỉ http://localhost:8080, mặc định sẽ là cổng 8080 nhưng trong file config trên là 7777

b. Adding CSS Loader

Trong nội dung file webpack.config.js bên trên, chúng ta có thấy đoạn loader dưới cùng. Đây là một điểm khá hay của Webpack, ngoài javascsript, tất cả các loại file khác đều có thể coi như module và sẽ được thêm vào js bundle nếu cần thiết. Điều này sẽ giúp cải thiện performance. Ở đây chúng ta sử dụng style-loader và css-loader

Cài đặt

npm install --save-dev style-loader css-loader

Sau đó sẽ khai báo trong file webpack.config.js, đoạn script trên sẽ tự tìm kiếm thư mục css và build các file có phần mở rộng css và build vào file bundle và được coi như 1 module

c. Module Reloading

Khi chúng ta code, việc thay đổi những đoạn code nhỏ, đôi khi là một dấu phẩy hoặc một đoạn log để debug chẳng hạn, việc phải restart rất mất thời gian. Vì thế chúng ta cần phải có một cơ chế Hot Reloading khi có thay đổi nhỏ.

Việc đầu tiên chúng ta cài đặt module react-hot-loader

npm install --save-dev react-hot-loader

ở nội dung file webpack.config.js chúng ta để ý có đoạn

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader', 'babel-loader']
      },

khi có bất cứ thay đổi nhỏ nào trong các file có phần mở rộng .js thì code mới sẽ được nạp và kết quả mới nhất sẽ được hiển thị.

3. Upload to NPM

Đây chính là bước cuối cùng trong phần hướng dẫn, sau khi chúng ta đã tạo xong component và thêm tất cả thông số trong file pagekage.json như tên file, tên tác giả, tên component, version, description...vv, và test trên dev server của webpack chạy ngon rồi. Bạn sẽ upload nó lên NPM cho mọi người cùng sử dụng :)

Việc này rất đơn giản - tại thư mục chứa code component, chúng ta sử dụng npm login, nhập username, password và public email

Sau đó chạy npm publish. Xong !!! Hãy tận hưởng thành quả của bạn và theo dõi hằng ngày xem có ai sử dụng component không nhé. Khi có lượng người tải và sử dụng, đó cũng chính là động lực để bạn tiếp tục phát triển component của mình ngày càng hoàn thiện.