如何正确地将React组件存储在单独的文件中并导入React？

小编典典

如何正确地将React组件存储在单独的文件中并导入React？

reactjs

我已经完成了一些React教程的介绍，并试图将到目前为止的一些知识投入使用。我已经成功在中创建了一些组件，<script type='text/babel'>并使用babel将browser.js其转换为浏览器中的JS客户端。

但是，我现在正尝试将组件分解成单独的文件，进行编译，然后将已编译的JS提供给客户端，而不是在客户端进行。

我对如何正确地将ReactJS导入组件JSX文件感到困惑。我以前没有构建大型JS应用程序，因此我不熟悉将库导入其他模块的方法。

这是我的组件JSX文件之一：

var SidebarFilter = React.createClass({
  render: function() {
    return (
        <div className="btn-group">
          Some markup removed for brevity. 
        </div>
    );
  }
});

在我的主要html文件中，如果我有：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

在<script>为组件添加任何标签之前，一切正常。但是，如果将组件放置在react / reactdom脚本标签上方，那么它将不起作用。

我已经看到javascript具有import和还有require，但是我不确定这些区别是什么，何时以及是否/两者都需要任何其他构建或是否在浏览器中正确使用它们，哪个更好。

谢谢！

阅读 239

2020-07-22

共1个答案

小编典典

如果您只是在学习反应，那么使用script标签的方法就可以在html内进行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

如果要开发可以部署到生产环境的应用程序，则需要执行以下步骤。毫无疑问，可以通过Internet获得更好的教程，但是它将为您提供一些想法。

1.需要Browserfiy或Webpack：

在浏览器中不能require或import模块，你通常会做而写Node.js的代码。借助 Browserify / Webpack，
您可以编写require/import与在节点环境中使用方式相同的代码。我假设您会webpack考虑其受欢迎程度。

2.安装依赖项（es6）

这些是您需要在项目（package.json）中正常运行的最小依赖项

  "devDependencies": {
        "babel-cli": "^6.3.17",
        "babel-core": "^6.3.21",
        "babel-eslint": "^5.0.0-beta6",
        "babel-loader": "^6.2.0",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "babel-preset-stage-3": "^6.3.13",
        "css-loader": "^0.23.0",
        "eslint": "^1.10.3",
        "eslint-loader": "^1.1.1",
        "eslint-plugin-react": "^3.12.0",
        "style-loader": "^0.13.0",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.0"
      },
      "dependencies": {
        "react": "^15.0.0-rc.1",
    "react-dom": "^15.0.0-rc.1"

3，写你的webpack-config.js文件

样本webpack配置文件应如下所示。不要问我每一个细节，而要看一下webpack教程，因为我不能在这里解释所有内容。只要记住一个事实，那
Webpack就是模块捆绑javascript器为浏览器捆绑了其他资产。

var path    = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: 'http://localhost:8080/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test      : /\.jsx?$/,
        include   : path.join(__dirname, 'src'),
        loader    : 'react-hot!babel'
      },
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, 'sass'),
        loaders   : ["style", "css?sourceMap", "sass?sourceMap"]
      },
      {
          test    : /\.(png|jpg|svg)$/,
          include : path.join(__dirname, 'img'),
          loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
     } // inline base64 URLs for <=30k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

4.为您的应用程序设置入口点和路由

src-> index.js src-> routes.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,browserHistory} from 'react-router';
import routes from './routes';

ReactDOM.render(
    <Router routes={routes} history={browserHistory}/>
  , document.querySelector('.init')
);

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';
import Home from './components/home';


module.exports = (
       <Route path="/" component={App}>
           <IndexRoute component={Home}/>
       </Route>
)

5，在项目根目录中设置index.html

<!DOCTYPE html>
<html>
  <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Welcome to ReactJs</title>
  </head>
  <body>
    <div class="init"></div>
  </body>
  <script src="./public/bundle.js"></script>
</html>

6，跑步

形成您的项目根类型

webpack-dev-server --progress --colors

进口并要求

import并且require在功能上非常相似。唯一的区别是，import与es5一起require使用时，es6 可以使用新的语法糖。

2020-07-22