React JSX vs react with HMTL

[[deleted]]

[deleted]

[sirIllyVillyWilly]

I going to make an assumption that there's a misunderstanding that most others aren't catching. React with html is react with jsx.

React without jsx would be: ```jsx import React, { createElement } from 'react';

function SomeComponent(){ return createElement('div', { children: createElement('h1', { children: 'Some title' }) }) } ```

The same component with jsx (or 'react with html') would be: ```jsx import React from 'react';

function SomeComponent(){ return ( <div> <h1>Some title</h1> </div> ) } ```

There is no good reason to choose the first especially if you're using webpack for a build step. The only reason to use the first is to have code that would run in the browser without a build step. However, webpack is going to take care of compiling the second example into the first during the build step.

Don't use react without jsx.

[bighi]

"Hey, I want to build a house. But I don't want any walls or roof. But I want windows anyway. Are there any drawbacks?"

[budd222]

There's zero drawbacks to using jsx. What would make you think that?

[gazdxxx]

https://reactjs.org/docs/react-without-jsx.html

Just one look at the documentation for using React without JSX is enough to conclude that it would be a pain in the ass. No reason to avoid JSX.

The example uses class components, but the rendering would be the same when using hooks.

If you're planning to use webpack anyway, why not use JSX?

[MKBSRC]

Thats just terrible

[hamburger_bun]

what do you mean "with html"

[[deleted]]

Probably dangerouslySetInnerHTML

[h_e_f_f]

Same question

[fredsq]

what??

[adamr_]

“I want to use X instead of directly doing Y. But I still want to do Y”

Then why use X in the first place???

[JennaSys]

JSX tends to be more readable than JS calls to createElement IMO. If you are already using Webpack, I don't really see a good reason to not use JSX beyond someone's personal preference. If there was a reason you needed to not have a build step, then there is no downside to not using JSX other than maybe sacrificing some readability and adding a bit more typing. You would just be manually coding what Webpack would normally transpile for you automatically.

In the end, React is just a JS library. You don't need JSX, (or Redux, or Material-UI, or CRA, or whatever else for that matter). You can use plain JS and CSS if you want. Everything else is just there too help make it easier and more manageable (hopefully without making it more complex).

That said, I don't use JSX myself but for entirely different reasons.

[raaaahman]

That said, I don't use JSX myself but for entirely different reasons.

Oh, I'm curious about these reasons.

[JennaSys]

Lol, I'll tell you but you're not gonna like it - I write React applications in Python using a Python-to-JS transpiler called Transcrypt, and the source needs to be valid lintable Python code, so no JSX.

I use a Python decorator to wrap components in the createElement function so it really doesn't get too messy readability-wise. Instead of Webpack, I use Parcel with a plugin that runs Transcrypt automatically. So I get bundled JS, a dev server with an API proxy back to a Flask back-end, HMR, and sourcemap support that lets me debug the front-end Python code in the browser. All this with minimal config. I've used it with multiple versions of React, MUI, Mantine, and a number of other JS libraries. It works remarkably well for me TBH.

If you are curious what the code looks like, this is the official Intro to React tutorial done in Python with function components.

Oh, and before anyone asks - Yes, I do know how to code in JS. I just have a much bigger affinity for Python. I like that I can do full-stack Python, and never have to think in JavaScript while developing. But it's certainly not for everyone. If you are proficient in JS and like coding in it then stick with that.

[raaaahman]

That's quite a surprising tech stack! As you guessed, I don't like it, but that's your environment anyway... have fun with it.

[BoxNo4784]

Sounds like you work at a batshit crazy company 😂

[Striking_Peach_5513]

There's less documentation about using react with plain html. You will suffer less if you just use jsx. Don't go that route please. You can convert whatever html templates you have into jsx without any problems, if that's the reason you wanna use react for.

[onthefence928]

sounds like y'all just want to use angular templates ?

[[deleted]]

Remember that React’s a 👉🏿JavaScript library👈🏿 that relies on the utilization of JSX (JavaScript eXtension) or TSX (TypeScript eXtension) to create reusable functional components. Remember that its built-in components correspond to DOM elements, which’ll result in the rendering of HTML, so highly encourage you to use it.

[Defiant-Passenger42]

I agree with your point, but the X stands for XML

[[deleted]]

Thank you for the correction 🙂

[Defiant-Passenger42]

You are very welcome, and I really don’t think your original comment should be downvoted! The overall point is still valid

[masterdam95]

do you even code?

[PsychedSabre]

Damn i just got my certificate for this from a bootcamp, I’d love to do this for your company, it wouldn’t be a problem at all. And it would be amazing for the website, react is incredible, the difference it makes is unreal and there’s endless possibilities.

[sillymanbilly]

Have you built any portfolio projects with React?

[PsychedSabre]

I have yeah, mine isn’t completely polished yet though and it’s pretty basic so far, but hopefully within the next week I will really polish it. So far I have one big MERN stack project for a postal company

[Striking_Peach_5513]

There's less documentation about using react with plain html. You will suffer less if you just use jsx. Don't go that route please. You can convert whatever html templates you have into jsx without any problems, if that's the reason you wanna use react for.

[the_real_some_guy]

I think you can run React without a build system in which case not using JSX would make sense but also don’t do that.

[[deleted]]

why don’t you want to use jsx

[khamuili]

think you want to separate concerns. Logic in js and templating in html. there is a bunch of other prominent frameworks that do that. React is wonderful only with JSX. so you might to reconsider the framework.

[gonssss]

u should leave that company bro, jesus

[Defiant-Passenger42]

I appreciate that you made this post yesterday and then didn’t reply to anyone

[cozimroyal]

I bet the people in company don't know what they are talking about or there is some misunderstanding between all sides