How to run nuka carousel component for react.js?

I am trying to use a nuka carousel for a react project that I will be working on.

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

I'm brand new to react and I can't figure out how to set up the carousel. I got a react project to run using starter kit and steps as described here:

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

However, at the moment I don't know how to initiate the carousel. On the nuka website, I see a sample code:

'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;

      

But where can I put this code? I tried putting it in helloworld.js (a startup file as described on the Responsive Start Page), but that throws an error that requires undefined. Does this mean that I need to start the node server first so that the request can be used? If so, how do I set up the server in addition to the react project, how do I set it up?

+3


source to share


1 answer


You have a styled component that expects some kind of compilation step before actually reaching your page. I looked at the nuka-carousel codebase and it expects to be used in a require module, so there is no real quick and dirty way to convert this to not use node.



I would suggest using Yeoman to find an app for apps. Learn how the different components interact with each other. Start the dev server with "grunt dev". Then add the nuka-carousel library and try to make your component above in a similar way.

+3


source







All Articles