如何在反应样板中使用 jsx 而不是 js 扩展？答案

【问题标题】：How can i use jsx instead of js extension in react boilerplate?如何在反应样板中使用 jsx 而不是 js 扩展？
【发布时间】：2018-11-13 18:44:32
【问题描述】：

我只想在https://github.com/react-boilerplate/react-boilerplate/中添加jsx页面

下面是我要添加的密码忘记页面jsx文件内容。

import React from 'react';
import { connect } from 'react-redux';
import {Link, Route} from 'react-router-dom';

class PwdForgotPage extends React.Component {
  render() {
    return (
      <div className="col-md-6 col-md-offset-3">
        Password forgot.
        <button className="btn btn-link">Back</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { registering } = state.registration;
  return {
    registering,
  };
}

const connectedPwdForgotPage = connect(mapStateToProps)(PwdForgotPage);
export { connectedPwdForgotPage as PwdForgotPage };

但如果我使用 jsx 扩展，则无法运行如下。

Module parse failed: C:\.....\frontend\app\containers\PwdForgotPage\PwdForgotPage.jsx Unexpected token (8:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div className="col-md-6 col-md-offset-3">
|         Password forgot.
|         <button className="btn btn-link">Back</button>

如果我使用 js 扩展，它可以工作。如何更改样板文件中的配置以支持 jsx 扩展？

【问题讨论】：

标签： reactjs redux jsx boilerplate

【解决方案1】：

你需要在 webpack 配置中添加 jsx 扩展来启用 babel babel-loader。

{
    test: /\.jsx?$/, // notice optional x?
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: options.babelQuery,
    },
  },

https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js#L23

或者主观上更具可读性/\.(js|jsx)$/

【讨论】：

【解决方案2】：

从您现有的项目中，您可以运行：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

然后.jsx文件将被解释。

欲了解更多信息，请查看以下网站： https://create-react-app.dev/docs/adding-typescript/

【讨论】：