Integrate Legacy Widgets

A lot of existing front-end code manipulates DOM nodes directly. It might cost too much time and effort to rewrite this code in React, but by wrapping this code in a React component, you can combine it with other React components without having to rewrite all the UI logic.

As an example, we’re going to build a React wrapper for the Pikaday date picker (https://github.com/dbushell/Pikaday) as shown in the figure.

images/picker_demo.png

React date pickers exist already, but the same techniques we’ll use to integrate Pikaday will let you wrap any code that accesses the DOM, so you can recycle any of your more exotic widgets.

Create a new directory ...

Get React for Real now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.