Best way import jQuery plugins or external client scripts?

My projects comes with quite many external jQuery plugins. And I got troubles to import them into a specific component and make them work with development mode by npm start (server side rendering). My current solutions is to add them all to the bottom of Html.js return func. But, this way increases page load.

[manhhailua]

@minhnguyenwp : please stop importing jQuery into your component, that will increase the time on bundling process of Webpack and the size of bundle.js/vendor.js file as well. Just add a <script /> tag which has src attribute link to your jquery file and use $ in every components’ componentDidMount functions without re-importing jQuery.

Be aware of eslint alert that '$' is not defined, put a comment /* global $ */ on top of your files or update .eslintrc.js file at globals property to ignore this alert.

Anyway, using jQuery to handle the DOM might cause React DOM tree crash (React indexes all the actual rendered DOMs by it virtual DOM tree). So, please ensure you read these posts before getting your hands dirty with React and jQuery co-operation.

1. https://facebook.github.io/react/docs/refs-and-the-dom.html
2. https://facebook.github.io/react/docs/uncontrolled-components.html
3. https://facebook.github.io/react/docs/integrating-with-other-libraries.html
4. https://medium.com/@shuvohabib/using-jquery-in-react-component-the-refs-way-969de9aa651f

[rorteg]

Create one component jQuery, example (components/Jquery.js:

import React from 'react'
import jQuery from 'jquery' // Import directly from node-modules
window.jQuery = jQuery

export default () => (jQuery)

In your component you will use a jQuery plugin, example (components/Slider.js):

import React, {Component} from 'react'
import $ from './Jquery' // Import component
import flexSlider from 'flexslider' // Import directly from node-modules

class Slider extends Component {
    componentDidMount() {
         $(".hero-slider").flexslider({
            controlNav: true,
            directionNav: false,
            animation: "fade"
        });
    }

    render = () => (
        <div className="hero hero-slider">
	    <ul className="slides">
	        <li data-bg-image="dummy/slider-1.jpg">
		    <div className="container">
                         <h3 className="slider-subtitle">Your header goes here</h3>
			<h2 className="slider-title">Professional</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa molestiae necessitatibus possimus ducimus facere, error, nostrum. Quos sapiente ducimus maxime odio alias dolor consequuntur, maiores commodi exercitationem veniam. Id, ex?</p>
			<a href="#" className="button large">Read more</a>
		    </div>
		</li>
                 <li data-bg-image="dummy/slider-2.jpg">
		    <div className="container">
		        <h3 className="slider-subtitle">Your header goes here</h3>
			<h2 className="slider-title">Professional</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maiores illo eligendi obcaecati reiciendis, vel perspiciatis aliquid esse architecto deleniti asperiores, laboriosam nemo rerum! Ipsam numquam delectus minus iure sit!</p>
			<a href="#" className="button large">Read more</a>
		    </div>
		</li>
		<li data-bg-image="dummy/slider-3.jpg">
		    <div className="container">
			<h3 className="slider-subtitle">Your header goes here</h3>
			<h2 className="slider-title">Professional</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam iure, alias error suscipit porro quidem minus, autem repellendus rerum labore corrupti! Quia quas, architecto, quis non pariatur quisquam nisi magnam.</p>
			<a href="#" className="button large">Read more</a>
		    </div>
		</li>
	    </ul>
	</div>
    )
}

export default Slider