使用 CDN 时如何将 reactjs 组件移动到单独的页面

Question

我正在学习 ReactJS，我遵循了生成此代码的教程：

<!DOCTYPE html>
<html>

<head>
  <title>React! React! React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>

</head>

 <body>

 <div id="container">
    <div id="content"></div>
 </div>

  <script type="text/babel">
var destination = document.querySelector("#container");

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link } = ReactRouter

var Home = React.createClass({
  render: function() {
      return (
        <div>
          <h2>HELLO</h2>
          <p>Cras facilisis urna ornare ex volutpat, et
          convallis erat elementum. Ut aliquam, ipsum vitae
          gravida suscipit, metus dui bibendum est, eget rhoncus nibh
          metus nec massa. Maecenas hendrerit laoreet augue
          nec molestie. Cum sociis natoque penatibus et magnis
          dis parturient montes, nascetur ridiculus mus.</p>

          <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
        </div>
      );
    }
});

var Contact = React.createClass({
  render: function() {
      return (
        <div>
          <h2>GOT QUESTIONS?</h2>
          <p>The easiest thing to do is post on
          our
          </p>
        </div>
      );
    }
});

var Stuff = React.createClass({
  render: function() {
      return (
        <div>
          <h2>STUFF</h2>
          <p>Mauris sem velit, vehicula eget sodales vitae,
          rhoncus eget sapien:</p>
          <ol>
            <li>Nulla pulvinar diam</li>
            <li>Facilisis bibendum</li>
            <li>Vestibulum vulputate</li>
            <li>Eget erat</li>
            <li>Id porttitor</li>
          </ol>
        </div>
      );
    }
});

var FourOhFour = React.createClass({
  render: function() {
      return (
        <div>
          <h2>NOPE</h2>
          <p>This page is missing. Maybe it never existed.
          Maybe we never existed. What if nothing is real?</p>
        </div>
      );
    }
});


var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Simple SPA</h1>
        <ul className="header">
          <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
          <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
          <li><Link to="/contact" activeClassName="active">Contact</Link></li>
        </ul>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="stuff" component={Stuff} />
      <Route path="contact" component={Contact} />
      <Route path='*' component={FourOhFour} />
    </Route>

  </Router>
), destination);
  </script>
</body>

</html>

我的问题是如何将这些组件提取到其他页面中？我尝试制作如下组件：

var React = require('react');

var Stuff = React.createClass({
  render: function() {
  return (
    <div>
      <h2>MORE STUFF!!!!</h2>
      <p>Mauris sem velit, vehicula eget sodales vitae,
      rhoncus eget sapien:</p>
      <ol>
        <li>Nulla pulvinar diam</li>
        <li>Facilisis bibendum</li>
        <li>Vestibulum vulputate</li>
        <li>Eget erat</li>
        <li>Id porttitor</li>
      </ol>
    </div>
  );
}
});

module.exports = Stuff;

然后在我的主文件中尝试：

import Stuff from './stuff.jsx';

但我刚收到这个错误：

 Uncaught ReferenceError: require is not defined

Answer 1

您将需要 webpack 将用 JSX 编写的组件转换为 JS。然后你可以导入像

这样的反应

import React from 'react';

而不是使用 require。

示例 webpack 文件

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

module.exports ={

    context: path.join(__dirname, "src"),
    devtool: "inline-sourcemap",
    entry: "./js/client.js",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-0'],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy']
                }
            }
        ]
    },
    output: {
        path: __dirname+ "/src",
        filename: "client.min.js"
    }
}

Webpack tutorial link:

使用 CDN 时如何将 reactjs 组件移动到单独的页面

How to move reactjs components into seperate page when using CDN

components

cdn

reactjs