How to make class diagram from React Native class

Any tools on class diagram that can generate from react native source code?
thank you

You mean generate UML or UML-like diagrams from JS classes?

Is the only one I know of. Probably easier if the project uses Typescript, and I assume there are some tools to help with that if you dig around.

Two things to note if you’re trying to do this:

  • JS does not use classes for inheritance (yes, the syntax is class, but that’s syntactic sugar), so if you’re studying Java or whatever and you’re being taught to model using UML, it doesn’t work the same way, JS uses prototypes. Applying classical OO in this case to JS is normally doomed to failure.
  • React doesn’t really use OO techniques, classes are just used as container functions (and the newer hooks API makes this explicit, it relies on closures).

This I am basing on the assumption you’ve been taught about UML modelling and you’re now trying to apply it to React under the assumption it’s an OO codebase because the API uses classes. If that’s the case, probably not going to be a great idea here.

okay. thanks for your answer. so i better create class diagram from API (example PHP) ?

Well if you’re creating class diagrams surely you’d make a diagram of a class, that’s the point of a class diagram.

What is the purpose of you doing this?

for my final project or should i say thesis

Yes but what is the purpose? I assume the thesis is not just randomly generating class diagrams from stuff

its for my thesis paper to telling my lecturer about my application. Cause in information system faculty have method SDLC (System Development Life Cycle) right? I’m using SDLC method to create mobile apps and need class diagram.

Jeez. Sorry to be cynical, but if that’s what your course requires so you can get a piece of paper saying you know software engineering, then go for it, generate class diagrams, do Object-Oriented analysis, whatever. It’ll utterly miss how the library you’re analysing actually works, or what programming paradigm it primarily uses (hint: React componenents are all just functions, which suggests it might not be fully OOP and a diagramming technique used to specifically describe OOP systems might not work terribly well), or how current development processes normally work (for better or for worse). But the if that’s the level of what you need to provide for your final thesis, the cynical side of me says you’ll still pass the course. If you want to make pretty class diagrams based on some interfaces that sit over functions, go for it :man_shrugging:

thank you mister :slight_smile: