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

我已经完成了一些介绍React的教程，并试图将我的一些知识运用到实践中。我已经成功地在

中创建了一些组件，并使用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>
    );
  }
});

var SidebarFilter=React.createClass({
render:function（）{
返回(
为了简洁起见，删除了一些标记。
);
}
});

在我的主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>

在为我的组件添加任何

标记之前，一切正常。但是如果组件放在react/reactdom脚本标记的上方，则无法工作

我见过javascript有一个

导入

，也有

要求

，但我不确定区别是什么，在什么时候使用哪个更好，或者两者中的任何一个/两者是否需要任何额外的建筑，或者它们是否在浏览器中正确使用

---

谢谢

import和

require

都用于模块化javascript应用程序，但它们来自不同的地方：

进口

import

语句是ES6的一部分，如果您已经在项目中使用了ES6和babel，那么您可以很好地使用它。它将以前导出的模块（或其某些部分）导入到声明该模块的文件中

因此，在

import-React中，{PropTypes，Component}来自'React'

我们只从React模块导入PropTypes和组件成员，因此我们不必导入整个'React'模块，只导入我们需要的成员，我们将其分配给

React

变量

您可以阅读有关导入的更多信息

要求

require

语句是Node.js模块加载系统的一部分，其作用与ES6

import

相同。它允许您导入以前导出的模块或部分模块

var React=require（'React'）

正在将整个React模块导入

React

变量

您可以阅读更多关于Node.js模块系统的信息

对于这两种情况，我们导入的模块可以来自不同的来源，如npm下载库（如“react”）或您自己的文件，例如您创建和导出的组件。在第二种情况下，由于它不是npm下载的模块（来自“node_modules”文件夹），因此我们必须写入文件的路径。例如：

从'./components/MyComponent.js'导入MyComponent

或

var MyComponent=require（./components/MyComponent.js；

你可以用你喜欢的任何一种

导出模块
要导出模块，您有两个相同的选项，模块加载系统和

如您所见，您的下一步将是使用Node.js作为环境来构建React应用程序以及其中一个构建工具（如Webpack或Gulp），以进行传输、缩小等。您可以从Cerad在其评论中指出的Webpack教程开始。
如果您刚刚学习React，那么您使用脚本标记的方式就是使用React好的

<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>

3.编写您的webpack-config.js文件

一个示例
webpack
config文件应该是这样的。不要问我关于它的每一点，而是看看
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: './'
  }
};

导入并要求

import
和
require
在功能上非常相似。唯一的区别是
import
是es6提供的新语法糖，而
require
用于es5。
本教程是合理的最新教程，实际适用于当前软件。
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: './'
  }
};

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')
);

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>
)

<!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>

webpack-dev-server --progress --colors