JSX Babel install instructions unclear

[Elijer]

I'm not totally sure why there is a JSX tab in the docs but I really appreciate it (would like to know the thinking on that), as I want to use it.

However, there's this statement:

"This is the installation command suggested by Babel’s official manual. If you take a close look, you will find that there are actually four packages being installed, three as development dependency and one as production dependency."

Which is not helpful. I've read these sentences over several times and I can't figure it out -- which one of the 4 packages is a production dependency??? And also with the current syntax, aren't they all being installed as dev dependencies, not just 3?

Second-to-lastly, when I run this command, it doesn't work.

Lastly, there is no link as to what part of the Babel documentation to help me out in investigating this.

[Elijer]

The fact that the command included doesn't work might have to do with whitespace or something invisible. I copied the command again, but this time deleted the "---save-dev" part and it ran.

But this command still leaves the question: if I look closely, WHICH MODULE is a production module?

[pakastin]

@mauroreisvieira could you help out with this?

[mauroreisvieira]

@Elijer thanks for your report, I will check ASAP.

[Elijer]

Thanks!

…

On Fri, Aug 7, 2020, 5:12 AM Mauro Reis Vieira ***@***.***> wrote: @Elijer <https://github.com/Elijer> thanks for your report, I will check ASAP. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AED265SX735MG4ZXN5WCP2LR7PAPHANCNFSM4PW6NDHQ> .

[mauroreisvieira]

Hi @Elijer, can you check https://redom.js.org/#jsx if it's more clear now?

[Elijer]

Thanks for addressing this page Mauro. To be fair, I am still a little new with using Babel, so it's possible someone more experience with bundling wouldn't have had any problems. It wasn't clear to me before that babel is actually translating the JSX into REDOM commands! That's very cool. And yes, the NPM install command is already much simpler and makes more sense than the much longer command that was there before, so that looks great. I will try out actually following the instructions on this page very soon when I have the time.

…

On Tue, 11 Aug 2020 at 11:53, Mauro Reis Vieira ***@***.***> wrote: Hi @Elijer <https://github.com/Elijer>, can you check https://redom.js.org/#jsx if it's more clear now? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AED265VXHX4AUEV3T3DIDGDSAFZQ3ANCNFSM4PW6NDHQ> .

[mauroreisvieira]

Thanks @Elijer for you fast answer, please let me know if the instructions are clear and work 100% for you, since it's your first time with Babel.

I'm waiting for feedback, and thanks for your report and for using RE:DOM!

[Elijer]

Hi Mauro! Sorry for this not so fast response a year later. I think that everything is pretty clearly written, but I'm not able to successfully use babel to transpile JSX to REDOM syntax. I basically just did two things; install this: yarn add babel-plugin-transform-redom-jsx --dev And then add in the .babelrc file shown. What's happening is that no matter what, after recreating my project several times, I'm getting the error "Uncaught ReferenceError: React is not defined". I also tried doing this while using Parcel.js, which automatically installed react for me, which I didn't want and didn't work because then I hadn't set things up for React. Thanks for your email and again apologies for being so late in responding. With the rate JS moves it's sort of looking like maybe this isn't totally maintained anymore anyways? Let me know. I really just want to create components without a framework, and I love JSX. Thanks, Elijah

…

On Wed, 12 Aug 2020 at 18:12, Mauro Reis Vieira ***@***.***> wrote: Thanks @Elijer <https://github.com/Elijer> for you fast answer, please let me know if the instructions are clear and work 100% for you, since it's your first time with Babel. I'm waiting for feedback, and thanks for your report and for using RE:DOM! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AED265XGVINQBELZRK5QIWTSAK5M3ANCNFSM4PW6NDHQ> .

[Elijer]

*edit: Parcel.js is not automatically installing react for me: it is automatically installing @babel/plugin-transform-react-jsx for me which then leads me to get an error saying something like "please install react".

…

On Wed, 25 Aug 2021 at 21:43, Elijah Kennedy ***@***.***> wrote: Hi Mauro! Sorry for this not so fast response a year later. I think that everything is pretty clearly written, but I'm not able to successfully use babel to transpile JSX to REDOM syntax. I basically just did two things; install this: yarn add babel-plugin-transform-redom-jsx --dev And then add in the .babelrc file shown. What's happening is that no matter what, after recreating my project several times, I'm getting the error "Uncaught ReferenceError: React is not defined". I also tried doing this while using Parcel.js, which automatically installed react for me, which I didn't want and didn't work because then I hadn't set things up for React. Thanks for your email and again apologies for being so late in responding. With the rate JS moves it's sort of looking like maybe this isn't totally maintained anymore anyways? Let me know. I really just want to create components without a framework, and I love JSX. Thanks, Elijah On Wed, 12 Aug 2020 at 18:12, Mauro Reis Vieira ***@***.***> wrote: > Thanks @Elijer <https://github.com/Elijer> for you fast answer, please > let me know if the instructions are clear and work 100% for you, since it's > your first time with Babel. > > I'm waiting for feedback, and thanks for your report and for using RE:DOM! > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#29 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AED265XGVINQBELZRK5QIWTSAK5M3ANCNFSM4PW6NDHQ> > . >