why you need import React from 'react'

OPY-bbt commented 5 years ago

为什么需要在组件顶部写import React from 'react'？为了简单能不能写import R from 'react'呢？还有在每个文件里都写这一句也很麻烦，能不能干脆省略这句话呢？答案是都是可以滴～

OPY-bbt commented 5 years ago

需要写这么一句话是因为 @babel/plugin-transform-react-jsx插件的原因，它将我们写的jsx语法转化成React.createElement的样子。所以我们在文件顶部需要引入React。

OPY-bbt commented 5 years ago

@babel/plugin-transform-react-jsx插件有一个pragma的配置项，默认是"React.createElement"，所以如果你想用import R from 'react'这种方式引入React，那么只需要将pragma配置为"R.createElement"就可以了。webpack配置如下

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: [
          path.resolve(__dirname, 'node_modules'),
        ],
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              "@babel/plugin-syntax-jsx", 
              ["@babel/plugin-transform-react-jsx", { pragma: "R.createElement" }], 
              "@babel/plugin-transform-react-display-name",
            ],
          },
        }
      }
    ],
  },
}

OPY-bbt commented 5 years ago

如果得了懒癌怎么办？没关系，强大的webpack给我们提供了方法。在webpack中，有一个ProvidePlugin插件可以帮我们自动加载模块而不需要手动import。配置方法如下：

module.exports = {
  //...
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
    }),
  ],
}

释放你的双手～

OPY-bbt / OPY-bbt.github.io

why you need import React from 'react' #9