React Tools

Honestly, I find React pretty cool - it's quite easy to get started and build a simple dynamic SPA. It's actually fun writing stuff in the React declarative style.

My setup consists of a Flask server which js bundles for SPAs. The Flask server also exposes REST endpoints which the SPA uses to load and save data in the backend.

Recently, I've been running into a couple of problems:

1. Mapping from what you see into the React code.

When developing static HTML pages, you can just use Inspect Element in Firefox to see how the elements on the page map to your HTML code. If you're using templates, the templates map pretty closely to the outputted HTML. e.g. this

in my template shows as a

in the final HTML. This is not true of React. I can't easily map the components I have in my .jsx files to the outputted HTML. I find that this increases cognitive load by a fair amount, since I need to keep the entire structure of my SPA in my head when I think to figure out where the code affecting a particular component lives.

2. Boring data handling.

Say I want to have a database of cars and I want to build a frontend that lets people add cars.

Now, I have a Car table in my backend database, I have a Car object serverside and I have a Car component in React. Writing this repetitive code is super boring, tedious and time consuming. Frameworks such as Flask or Django come with some ORM solutions which can autogen the HTML for your frontend, deal with marshalling data from clientside to serverside and also let you easily commit to your backend db.

So, 2 questions:

1. Is there an equivalent for Inspect Element for React? 2. Is there some sort of ORM solution for React?

Also, any tips or materials you have on React would also come in handy.