reactjs - How to use npm installed react component in JSX -

i'm trying use 3rd party react component (react-slick) within jsx , running problem. i'm attempting use within this example app creator (example1.jsx snippet below).

whenever 2 warnings , error:

warning: jsx uses plain function. react components valid in react's jsx transform.

warning: calling react component directly. use factory or jsx instead. see: http://fb.me/react-legacyfactory

uncaught typeerror: cannot read property '__reactautobindmap' of null

i have tried similar example2.jsx, solution found in stack overflow question. however, while no warnings or errors thrown, in case code did not render @ all.

i have tried various methods of using react.createfactory (which shouldn't used in jsx begin with), , other finagling no results.

this stupid question how hell use npm installed components in jsx?

example1.jsx

var react = require('react'); var slider = require('react-slick');  var singleitem = react.createclass({   render: function () {     var settings = {       dots: true,     }     return (       <div>         <h3> image slider 1 item @ time</h3>         <slider dots={true}>           <div><img src="/img/autumn.jpg" alt=""/></div>           <div><img src="/img/sun.jpg" alt=""/></div>         </slider>       </div>     );   } });  var app = react.createclass({   render: function () {     return (       <div classname='container'>         <singleitem />       </div>     );   } }); 

example2.jsx

var app = react.createclass({   render: function () {     return (       <div classname='container'>         {singleitem}       </div>     );   } }); 

it looks aren't referencing slider component. may find solution looks more like

var slick = require('react-slick'); var slider = slick.slider 

use debugger check object being given require. possible need require component directly referencing 1 of libraries file e.g.

var slider = require('./slider.jsx'); 

take @ lib or dist directory also, can see module.exports value require.