CODEWITHSUNDEEP
javascriptnode.jsreactjs
user1457366
user1457366

Reputation: 669

How do I start the nuka carousel component for react.js?

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

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

I am completely new to react and I can't figure out how to get the carousel set up. I have gotten a react project to run using the starter kit and steps as explained here:

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

However, at this point I have no clue how to initiate the carousel. On the nuka website I see the example 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 do I put that code? I tried putting it into helloworld.js (the startup file as explained on the react getting started page) but that throws an error that require is undefined. Does that mean that I need to run a node server first so that require can be used? If so, how do I set up the server in addition to the react project as I have it set up?

Upvotes: 3

Views: 935

Answers (1)

Eric N
Eric N

Reputation: 2206

You have a component built in a style that expects some sort of compile 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 isn't a real quick and dirty way to convert this over to not use node.

I would suggest using Yeoman to scaffold a react app for you. Get acquainted with how the different components interact with one another. Run a dev server with 'grunt dev'. Then, add the nuka-carousel library and try rendering your above component in a similar fashion to the examples.

Upvotes: 3

Related Questions