4

I'm working on React old projects and several of them have the native structure, like:

...{
    key: "render",
    value: function () {
      return React.createElement(
        "div",
        {
          className: "WrapperExamQuery",
          id: "IndexComponent",
        },
        React.createElement(
          "div",
          {
            className: "loadingWraper",
          },
          React.createElement(
            "div",
            {
              className: "teamLoading",
            },
            React.createElement("span", null, "loading... ")...

In my actual working team, nobody knows why is this, and don't find the orignal code (if exist). Is there a tool to parse o unparse these files to work with React jsx normally? any advise will be welcome. Thanks!

Slbox
  • 10,957
  • 15
  • 54
  • 106
bluesky777
  • 400
  • 6
  • 23
  • I think the code trying to share the component viewers between react and react-native but of course needs a function to convert them separately. – Hesam Apr 25 '22 at 14:50

3 Answers3

4

We ran into the same issue a long time ago. And then we tried this library. It's not maintained anymore but you can try

https://github.com/JoeStanton/babel-transform-js-to-jsx

I hope it help :)

Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35
  • Thanks. Please tell me more. The code in the documentation is for package.json and to create a script for npm? – bluesky777 Apr 28 '22 at 10:39
0

The accepted answer did not work for me. What did work, and luckily I had the website I made with the files up and running, is I ended up simply copying the files from chrome's devtools. I'm sure in Firefox it's the same.

Open devtools and in the "Sources" tab, you have all the files in their original state, which you can download individually.

Basically, the browser seems to decode the build folder and recreate your original folder.

Steven Pilgrim
  • 1
  • 1
  • Please share the reason also why this worked for you? – Ritik Banger Sep 27 '22 at 13:05
  • Hello. Thanks for your help, but I want to ask you the same as Azimjo, I don't know why map files doesn't work properly, I mean, source tab only show the index.min.js, is horrible, I even can't debug it. Do you know why can this happen? thanks again. – bluesky777 Nov 07 '22 at 16:14
0

If you built with default build script in react that build package includes the components files to so u can reach them by going browser's sources section. it may be different for your hosting provider. I use Netfily and I can get my project like that.

Azimjon Umarov
  • 19
  • 5
  • Thanks! but it's an old code and I don't know why map files doesn't work properly, I mean, source tab only show the index.min.js, is horrible, I even can't debug it. Do you know why can this happen? thanks again. – bluesky777 Nov 07 '22 at 16:13
  • I think it is related to your hosting provider or in old version of react build script It should be different – Azimjon Umarov Nov 28 '22 at 12:32
  • I think it is related to your hosting provider or in old version of react build script It should be different – Azimjon Umarov Nov 28 '22 at 12:32