React and third-party libraries

#ReactJS and third-party libraries:

  • It uses the Tags component that displays an unordered list based on the passed tags prop.
  • Component { render() { return (
      { this.props.tags.map((tag, i) =>

    • { tag }
    • ) }

    ); } }; // App.jsx class App extends React.

  • The very first thing that we have to do is to force a single-render of the Tags component.
  • class Tags extends React.
  • Every time when we click the button we update the state and trigger rerendering of Tags component.

React in patterns project. For other interesting patterns check out the repo.The example jQuery plugin for my example. It transforms an unordered list to input field for managing tags: plugin code. It works like that:. class. It uses the component that displays an unordered list based on the passed prop. When React renders the list on the screen we know that we have a tag so we can hook it to the jQuery plugin.Force a single-render component. That’s because when React adds the elements in the actual DOM we want to pass the control of them to jQuery. If we skip this both React and jQuery will work on same DOM elements without knowing for each other. To achieve a single-render we have to use the lifecycle method like so: here we are saying that our component will never rerender. If defined is used by React to understand whether to trigger or not. That’s ideal for our case because we want to place the markup on the page using React but we don’t want to rely on it after that.Initializing the pluginAPI for accessing actual DOM nodes. We have to use the attribute on a node and later reach that node via . is the proper lifecycle method for initializing the plugin. That’s because we get it called when React mounts the result of the method. lead to React rendering the with two items and then transforms it to a working tag editing widget.Controlling the plugin using React field. Such action will be triggered by the React component and needs to use the jQuery API. We have to find a way to communicate data to component but still keep the single-render approach. class and a button which if clicked will pass a string to component. component. However, because of we update nothing. The only one change is that we get a value of the prop which may be captured via another lifecycle method – : is a pure jQuery code. is a nice place for calling methods of the third-party library. component:Conclusion / blog of Krasimir Tsonev – front and back-end developer who writes for web technologies

@ReactiveConf: #ReactJS and third-party libraries:

React is probably one of the best choices for building UI. Good design, support and community. However, there are cases where we want to use an external service or we want to integrate something completely different. We all know that React works heavily with the actual DOM and basically controls what’s rendered on the screen. That’s why integrating of third-party components could be tricky. In this article we will see how to mix React and jQuery’s UI plugin and do it safely.

This article is part of React in patterns project. For other interesting patterns check out the repo.

I picked tag-it jQuery plugin for my example. It transforms an unordered list to input field for managing tags:

to:

To make it work we have to include jQuery, jQuery UI and the tag-it plugin code. It works like that:

Now, let’s create a simple React app that will use the plugin:

tag so we can hook it to the jQuery plugin.

like so:

or not. That’s ideal for our case because we want to place the markup on the page using React but we don’t want to rely on it after that.

method.

with two items and then tag-it transforms it to a working tag editing widget.

component but still keep the single-render approach.

component.

is a nice place for calling methods of the third-party library.

component:

Even though React is manipulating the DOM tree we are able to integrate third-party libraries and services. The available lifecycle methods give us enough control on the rendering process.

React and third-party libraries