javascript - 如何启动 react.js 的 nuka 轮播组件？

Question

我正在尝试将 nuka 轮播用于我将要处理的 React 项目。

http://kenwheeler.github.io/nuka-carousel/#/

我对 react 完全陌生，我不知道如何设置轮播。我已经获得了一个 react 项目，可以使用入门工具包和此处说明的步骤运行:

https://facebook.github.io/react/docs/getting-started.html

但是，此时我不知道如何启动轮播。在 nuka 网站上，我看到了示例代码:

'use strict';

var React = require('react');

var Carousel = require('nuka-carousel');

const App = React.createClass({
  mixins: [Carousel.ControllerMixin],
  render() {
    return (
      <Carousel>
        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide1"/>
        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"/>
        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"/>
        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide4"/>
        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide5"/>
        <img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide6"/>
      </Carousel>
    )
  }
});

module.exports = App;

但是我该把代码放在哪里呢？我尝试将其放入 helloworld.js(启动文件，如 react 入门页面中所述)，但会抛出一个错误，要求未定义。这是否意味着我需要先运行一个 Node 服务器才能使用 require ？如果是这样，除了设置 React 项目之外，我该如何设置服务器？

Answer 1

您有一个构建样式的组件，在实际到达您的页面之前需要某种编译步骤。我查看了 nuka-carousel 代码库，它预计将在 require 模块中使用，因此没有真正快速而肮脏的方法将其转换为不使用 Node 。

我建议使用 Yeoman 为您构建一个 React 应用程序。熟悉不同的组件如何相互作用。使用“grunt dev”运行开发服务器。然后，添加 nuka-carousel 库并尝试以与示例类似的方式呈现您的上述组件。