Chuẩn cấu hình eslint, prettier cho react sử dụng typescript

Chuẩn cấu hình eslint, prettier cho react sử dụng typescript

1. Cài đặt thư viện Sử dụng các thư viện sau: eslint: báo lỗi cú pháp và các anti-pattern cho code https://github.com/eslint/eslint typescript-eslint: báo lỗi cú pháp cho typescript sử dụng eslint  https://github.com/typescript-eslint/typescript-eslint eslint-plugin-react: báo lỗi cú pháp cho react sử dụng eslint https://github.com/yannickcr/eslint-plugin-r...

Cấu hình sentry on-premise và upload source map

Cấu hình sentry on-premise và upload source map

Sentry là dịch vụ tự động theo dõi và báo lỗi trong source code của chúng ta. Bạn có thể đăng ký sử dụng gói free tại https://sentry.io/pricing/ . Bài này mình sẽ trình bày cách deploy server sentry on-premise và upload sourcemaps lên server on-premise đó.   1. Tạo server sentry on-premise  Download source code tại https://github.com/getsentry/onpremise Yêu cầu h...

Cách cấu hình multi entry point trong create-react-app

Cách cấu hình multi entry point trong create-react-app

1. Mở đầu Kịch bản là bạn muốn build ra 2 page là tên là rate.html và trade.html trong cùng một project sử dụng create-react-app.            Bình thường bạn sẽ phải tạo ra 2 project riêng biệt nhưng bài này sẽ hướng dẫn cách cấu hình webpack để chỉ cần sử dụng 1 project cho cả 2 trang. ...

Cài đặt test trong react sử dụng redux và react-router

Cài đặt test trong react sử dụng redux và react-router

Để cấu hình test cho một app react thông thường sẽ không mấy khó khăn, nhưng để cấu hình cho một app sử dụng các kỹ thuật như redux, react-router đòi hỏi thêm một số cài đặt cần thiết khác.   Giả sử một ứng dụng react sử dụng redux và react-router của bạn có file App.js như sau: // App.js import React, { Component } from 'react'; import { Provider } from 'react-redux'; import { ConnectedRouter } from ...

Ví dụ file circleCI 2.0

Ví dụ file circleCI 2.0

1. Trong rails version: 2 jobs: test: docker: - image: circleci/ruby:2.6.0-node environment: BUNDLE_JOBS: 3 BUNDLE_RETRY: 3 BUNDLE_PATH: vendor/bundle RAILS_ENV: test RACK_ENV: test - image: circleci/postgres:9.6-ram environment: POSTGRES_USER: test POSTGRES_DB: test POSTGRES_PASSWORD: "" - image: redis steps: - checkout # Which version of bundler? - run: name: Which bundler? command: bundle -v # Restore bundle cache - restore_cache: keys: - project-v1-{{ checksum "Gemfile.lock" }} ...

Một vài ghi chú về redux

Một vài ghi chú về redux

Store là nơi lưu trữ state, state chính là data của app. Muốn thay đổi data(state lưu trong store) của app, chỉ có cách là trigger reducer. Muốn trigger được reducer, chỉ có cách là dispatch một action nhất định nào đó. Ví dụ: Muốn thay đổi userInfo trong store, khai báo một reducer tên là changeUserInfo. Reducer...


Cách trigger sự kiện change trong react từ trình duyệt

Cách trigger sự kiện change trong react từ trình duyệt

Mở đầu Nếu bạn đã từng tìm cách để trigger sự kiện change từ trình duyệt(browser) và muốn nó gọi sự kiện onChange ở trong project react, bạn sẽ gặp không ít khó khăn vì change event trong react đã được tùy biến lại cho phù hợp với các loại browser khác nhau. Ví dụ ta có một đoạn html như sau: <input type="text" class="myInput"> Hàm onChange trong react sẽ đơn giả...