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?
source to share
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.
source to share