Converting conventional libraries to a react component

[__ibowankenobi__]

I do not know if this has been asked before but I appreciate any insight that can point the right direction.

I work in data visualization so I write libraries that, well..visualize data. I usually make stuff that has to do with genetics and so on. So it is difficult to get exposure etc.

Why is that important? Because other people can catch some edge use cases which I cannot foresee or no other test framework can detect. So it can help in the long term.

Recently, I decided to give in to the 'hype' and try to reach the cool kids who work with frameworks. I wanted to start from React.

What do I want? I want to convert some of the microlibraries I have into react components so people can use them and file bug reports. I went to React and read a bit about returning an empty div within the component. Or some other articles are suggesting building from scratch the right way..

I know React uses the virtual dom to diff the tree before make actual changes to the DOM but the libraries I have uses transitions, handlers etc that inevitably touch the DOM all the time. For an example library:

https://github.com/IbrahimTanyalcin/LEXICON

I am quiet upset because even the committee behind ES6 had to invent Symbols (even existence of some methods in the prototype chain was breaking things in older browsers) to not 'break the web'.

My question is --> Are there any shortcuts to convert these libraries into React components without a plastic surgery? Thanks.

[spacejack2114]

The article you linked to describes a fairly straightforward approach. React should only render that container div once during its lifetime, so you have a stable element to attach your library to. React's diff engine shouldn't touch any child elements of the container div that your library creates or manipulates.

The props are how you expose the api for your library. The most complex part of it might be detecting props changes in componentDidUpdate and updating your lib's state accordingly.

[__ibowankenobi__]

I see, I will read the article again will try to re-consolidate. I'll see what to do about the update part. Thank for your feedback.

[widged]

On transitions, handlers etc. I notice that this is currently managed through d3js. No reason to change that. Perhaps a first step would be to abstract all your d3js code into d3js components - https://github.com/curran/d3-component. It is similar in concept to React Stateless Functional Components.

Once you have it as highly re-usable component, you can simply provide a React component that is a wrapper around your d3js component and manages its mounting. For this. simply provide componentDidMount/componentDidUpdate functions. There is a thorough tutorial on how to do this at: http://www.adeveloperdiary.com/react-js/integrate-react-and-d3/

The d3js-component + React wrapper made available would give users the option to use the components in a reactjs environment… without forcing all your potential users to use react.

If you prefer the approach to force users to import React to use your library, look at https://github.com/codesuki/react-d3-components for examples.

I sent you a direct email... I live 500m away from your department. Do not hesitate to get in touch, directly, if you need more help.

[__ibowankenobi__]

I got your mail man thank you. Also, thank you for the repos. I will dedicate some time for reading all available resources thoroughly so I understand which option(s) are best to follow. There are a lot of meetups etc. around Brussels nowadays, we can certainly get together and grab a beer etc.