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

Question

我已经完成了一些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 ，但我不确定有什么不同，哪个更好用，何时，如果其中一个/两个需要任何额外的建筑物或如果它们在正确使用浏览器。

谢谢！

Answer 1

如果您只是学习反应，那么您使用脚本标记的方式是在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>

如果要开发可部署到生产的应用程序，则需要按照以下步骤操作。 毫无疑问，互联网上有更好的教程，但它会给你一些想法。

1.Need Browserfiy或Webpack：

在浏览器中，您不能像编写node.js代码时那样通常require或import模块。 在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.Running

形成项目根类型

webpack-dev-server --progress --colors

进口和要求

import和require在功能上非常相似。 唯一不同的是import可与ES6而新的语法糖require使用与ES5。

Answer 2

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

进口

import语句是ES6的一部分，如果您已经在项目中使用带有babel的ES6，那么您可以正常使用它。 它将先前导出的模块（或其某些部分）导入到声明它的文件中。

因此，在import React, { PropTypes, Component } from 'react'我们只从react模块导入PropTypes和Component成员，因此我们不必导入整个'react'模块，只导入我们需要的成员，我们将它分配给React变量。

您可以在此处详细了解import 。

要求

require语句是Node.js模块加载系统的一部分，其作用与ES6 import相同。 它允许您导入以前导出的模块或其中的一部分。

var React = require('react')将整个react模块导入React变量。

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

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

import MyComponent from './components/MyComponent.js';

要么

var MyComponent = require(./components/MyComponent.js;

您可以使用您喜欢的任何一种。

导出模块

要导出模块，您有两个选项， Node.js模块加载系统和ES6 。

正如您所看到的，您的下一步是使用Node.js作为环境来构建React应用程序以及Webpack或Gulp之类的构建工具，以进行转换，缩小等操作。您可以从Webpack教程Cerad在他的评论中指出。

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

问题描述

2 个解决方案

解决方案1
10 已采纳 2016-03-18 09:42:32

解决方案2
4 2016-03-18 09:06:38

进口

要求

导出模块

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

问题描述

2 个解决方案

解决方案1 10 已采纳 2016-03-18 09:42:32

解决方案2 4 2016-03-18 09:06:38

进口

要求

导出模块

解决方案1
10 已采纳 2016-03-18 09:42:32

解决方案2
4 2016-03-18 09:06:38