You should start by getting familiar with DOM manipulation as a concept. If you use the frameworks well, you won’t have to do much of it, but you should know what’s being replaced. You won’t need Flux because it was built for organizing applications that are interacting with a bunch of different end points at once, but you just want to show data to one user. React is fine for your purpose, since what you want is to turn a JS object into a series of HTML elements and update the display in response to input. React is fine, but it might be more than you need. While you’re reading about React, take a gander at
etch. Etch was developed to allow for writing components for Atom in a simple and consistent manner, and the syntax is pretty much the same. What both React and Etch do is take an HTML-like template that you give them (called JSX) and assemble a series of element creation calls behind the scenes. Once you follow the first thing I told you and figure out why it sucks to use a bunch of
.append() calls every time your data changes, you will have an understanding of why React/Etch are nice for automating the process.
For this specific project, the first thing you should do is have your Electron app use
document.write() to print the entire directory to the window. Once you’re there, you’ll be ready to wrap that up into a component.
It would also be helpful if you shared your code (preferably in the form of a GitHub repo), because I can tell you what needs to be done but not exactly how to get there unless I see where you currently are.