Why React in place of D3?
So, I’m migrating my web app to full client-side rendering using React recently. The reason is that I mixed both server-side rendering and client-side render too much. At first, all the pages use server rendering (something like jinja2 template). However, as a consequence of the increase in interaction with user on the web app, I started to add more and more js code, which leads to the logic duplication in both backend and frontend. I decided to move all the rendering to React.js and that makes my life much easier dealing with all the DOM manipulation and two-way binding.
thing I need to deal with is the diagram that I implemented using D3.js before. I have been
researching on the internet for a good solution and I was very closed to follow one of those
tutorials, which suggests hooking D3.js rendering in React’s
(actually, most of the tutorials suggest that). Suddenly, one of my frontend friend recommended me
throwing away D3.js for all those tasks. He said that React.js is very good at DOM
manipulation stuff, why I have to mixed D3 inside that to lose all the flexibility of two-way
binding, virtual DOM update,… Yeah, that sounds logical and I decided to give it a try, threw away
all my old code and started in a fresh new React way. Of course, I didn’t D3.js completely, I
still use it because of its supporting functions for calculating the diagram position and
Implement the Tree diagram in React.js
Okay, the first thing I need to do is to convert this old piece of code from D3 to React. The requirement is to draw a family tree like this. In contrast to my imagination, rendering the tree diagram using React is an amazingly effortless task.Read more