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-＆GT; index.js SRC-＆GT; 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是es6可用的新语法糖，而require与es5一起使用。

Answer 2

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

导入

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

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

您可以详细了解import here。

需要

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

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

您可以阅读更多关于Node.js模块系统here的内容。

对于这两种情况，我们导入的模块可以来自不同的来源，例如来自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等构建工具之一来进行转换，缩小等操作。您可以从Cerad在他的评论中指出的Webpack教程开始。

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

2 个答案:

导入

需要

导出模块