We Keep Coding

Is it even possible to make a panel-like React component showing source code with line number and collapsing function?

The site now I am developing has a collapsable source code view panel.
And I have no idea how to implement a React component to do the exactly the same thing and I am really sorry that I can only afford an example what I want.
There is a code view panel on this site and I want exactly same panel like the one on this site.
https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts
On the solidity source code view panel there is a collapse function and I am not sure how to implement this function.
Is there any module that can parse solidity code or do I have to make a new logic to parse code?
To summarize my questions;
Make a React Component that can view source code.
How to add collapse function to that component?
Additionally, I am currently using material-ui 4.12.3 and React version is 17.0.2

It looks like they are using the Ace editor.
There are multiple React implementations of the Ace editor on npmjs. I recommend you look into one of those. (Then you'll also get expand/collapse in the code editor "for free".)

Suggestions on how to get a consistent xpath for a dom element in javascript

I have been testing multiple code snippets, npm packages, etc. trying to find a way to consistently get an xpath from a dom node. The only solution I found that works consistently is by using the chrome dev tools and choosing copy -> copyFullXpath.
What I currently have is working reasonably well but it doesn't seem to work well for a tags. I'm specifically trying to get data from the shopify admin. I realize they have an api but I need something I can implement in a chrome extension. Shopify frontend is implemented in React but I don't think it's related. I'm currently using this with success other than shopify a tags: https://github.com/firebug/firebug/blob/f8cf7e9c918dcf67c58f5affc0fb3716b0660232/extension/content/firebug/lib/xpath.js
I see chrome dev tools is open source but I don't know enough to extract the xpath portion (DomPath.js).
Any suggestions are appreciated.

After more debugging, I found that hovering over anchor tags was causing a div to be inserted several nodes up in the hierarchy. It was, in fact, due to the site. I decided when get the xpath from the element, to clone the current node and re-append it to it's parent so the event listeners would be removed. This solved my issue.

VueJs doesn't show component`s source code

I started working with the vueJS2 relatively recently, now I'm studying the components and I had a question for the experts.
As far as I know, the VueJS processes the HTML using JavaScript, and it is because of this that the rest of the HTML code is not visible.
Please correct me if I'm wrong.
view in Chrome browser
view in IDE
view in Chrome Source Code
You can see there is no <button> tag in Chrome source code
How can I make it so that when I use the components, I want to display the HTML completely FULL, as an example here:
source code of my jQuery DataTable
Another question related to the topic. Does it matter that the components reduce the whole HTML to 'one line ' for a search in the browsers?

You can't see the HTML within the source code because the compilation takes place after the source code has already been generated.
What you can do however is right clicking your component and selecting Inspect within Chrome. This works because the elements tab shows a live representation of your code, so therefore it also shows the compiled component markup.
If you want further debugging tools you can check out the Vue devtools Chrome extension.
This does not work like jQuery for the reason that Vue takes a data-driven approach. Your data is in charge of what you markup is going to look like. jQuery usually enhances the HTML that is already there.

How does Appium inspect the UI of an iOS app to show the view hierarchy?

Can someone guide me where on how or where to even begin?
I tried to look at Appium's GitHub repository, but all their code is in javascript which left me highly confused.
Any guidance?

You can use the uiautomatorviewer to inspect the UI of an ios app. It will give you the full xpath of that particular element which you want to inspect.

Can we use pure Bootstrap with React.js?

I would like to convert websites from PSD prototype to HTML/CSS/Bootstrap and then move on to JavaScript development and using React.js and some JavaScript coding.
Is it possible to use pure Bootstrap with React.js without using React-Bootstrap?
Also is it possible HTML/CSS Freelancer to do React-Bootstrap as a mockup only and then find a JavaScript developer to do the advance work like React.js and JS development?
I would like to develop app for Desktop using Electron and Hybrid App using same code base as possible.

In theory, yes. Since ReactComponent render themselves as html, you can just put the right css classes and there you go. That's totally fine for the css part of bootstrap.
BUT, all the javascript stuff done by the bootstrap library that modify the DOM will be in "conflict" with the virtual DOM of React.
One way to avoid that is to never rerender a react component for which its inner html is modified by bootstrap (by setting shouldComponentUpdate() { return false }).
Doing this way, you can think of React as just a template library to generate some HTML markup, and letting bootstrap actively modify this markup for you but's it's not what React is made for.
The whole point of React is the ability to see your UI as a function of your state : view = f(state) at any given moment.
That's why react-bootstrap reimplements all DOM modifications in a React way.

For sure you can. I will include the bootstrap css as a CDN and go with the normal development.