Блог

Главная - Вопросы по программированию - Как переместить компоненты reactjs на отдельную страницу при использовании CDN

Как переместить компоненты reactjs на отдельную страницу при использовании CDN

#reactjs #components #cdn

#reactjs #Компоненты #cdn

Вопрос:

Я изучаю 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

Ответ №1:

Вам нужно webpack перенести ваши компоненты, написанные на JSX, в JS. Затем вы можете импортировать react как 

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

Ссылка на руководство по веб-пакету: