TIP: Import Statement Without Relative Paths Using Webpack

Ví dụ

import Header from '../../components/Header';
import Grid from '../../components/Grid';
import * as AppActions from '../../actions';

Sẽ thành

import Header from 'components/Header';
import Grid from 'components/Grid';
import * as AppActions from 'actions';

Đối với Reactjs

Cấu hình webpack 2.x

resolve: {
  modules: [
    path.resolve('./src'),
    //path.resolve('./node_modules')
  ]
},

Hoặc bỏ hẳn import bằng cách sử dụng ProvidePlugin trong webpack.config.js

plugins:[
    new webpack.ProvidePlugin({
      React: "react",
      update: "react-addons-update",
      mui: "material-ui",
      t: "counterpart",
      API: paths.src + "/API",
      config: __dirname + "/config",
      BaseComponent: paths.src + "/BaseComponent",
      //...
    })
  ],
//file BaseComponent.jsx
class BaseComponent extends React.Component {
  constructor(props) {
    super(props);
    this.params = props.params;
  }
}
module.exports = BaseComponent;
//file index.jsx trong ../src/Home
export default class Homes extends BaseComponent {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Hello world from Home</h1>
      </div>
    );
  }
}

 

ReactNative

  1. Cài plugin : babel-plugin-module-resolver
  2. Cấu hình file .babelrc
    (Tạo file .babelrc bằng cách nhập trong cmd : notepad .babelrc)
{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": [
    ["module-resolver", {
      "root": ["./src/reactnative"]
      "alias": {
        "assets": "./src/assets",
        "redux": "./src/redux",
      }
    }]
  ]
}
Advertisements

Server Render – Các vấn đề gặp phải

Mục đích SSR không chỉ để SEO tốt, mà quan trọng hơn là để share FB và các platform khác

  1. Load API trong component
    1. Có thể xử lý được bằng cách tạo một static function fetchData trong mỗi component cần gọi API
    2. hàm này sẽ gọi một action -> tự động update cho store khi hoàn thành
  2. Css loader
    1. Có thể xử lý bằng cách tạo biến __CLIENT__ & __SERVER__
    2. Check trên client để require css
  3. Các module không hỗ trợ SSR : ví dụ swiper -> ua=navigator.userAgent <- undefined trên server
    1. Xử lý tạm thời bằng cách ko dùng router, ko dùng renderHtml
    2. Chỉ match req.path với các action để gọi API tương ứng mà thôi