4 ms·

Why would you need JSX for a static website? If you need JS then it's not "static".

by arrowsmith 3y ago

nesarkvechnep 3y ago
Because they only know JS and it’s ecosystem.
ylyn 3y ago
You can render JSX at build-time. So it's just a templating language, as the parent comment said.
eropple 3y ago
React is completely happy to spit out a DOM tree as HTML for you; wiring up the in-browser JavaScript side of React is optional. This is how static site generators like Gatsby or NextJS work (with some hacks that as a user you don't really care about) and (eliding some detail) how React Server Components now work generally. I've also used it to generate email templates[1] with some success, too. I use JSX because it's a nicer templating system than EJS or similar. It allows me to write components to encapsulate reused fragments rather than text manipulation. And I like it, which counts for something. Candidly, this is something that people who fulminate about React probably should know before they start talking. [1] - https://github.com/eropple/rx-mailer https://github.com/eropple/rx-mailer
Capricorn2481 3y ago
Obviously there's a spectrum. A static website just means the files are served statically from a folder, and routing is just the folder path. You can still serve JS files and have a static website. If you put an alert on a button, you're not suddenly a SPA
- eropple 3y ago
  It's more than that: you can just call methods in ReactDOMServer to get a DOM tree. The tools to wrap this vary widely; you can use Gatsby (ehh) or NextJS (yeah!) to do it if you want a full-featured framework around all of it, you can use something like react-snap if you want something simple and less all-in, or you can just call them yourself and plop some files in a build directory.
post-it 3y ago
Generally, a static website refers to any website where the server just serves files rather than running application code for each request. JS runs on the client. For example, I've been working on a character generator for the Inquisitor tabletop game. It's completely static because I just SFTP the build output to my webserver, but it uses React and JSX.
codethief 3y ago
You're missing OP's point. The website can be fully static (even without any JS) but you could still use JSX/React to generate it (during build time, not runtime). If you've ever had to build a static website from scratch, with the same navigation, footer etc. on each page, and without using frames, then you'll appreciate the amount of work that a templating engine saves you (whether JS-based or else).
- ehnto 3y ago
  I think you all missed GPs point, JS is barely required, let alone an SPA framework, let alone static generation in an SPA framework, etc.
  - c-hendricks 3y ago
    And you're missing the other GPs point. Even when building a static website, you might want to reuse components. Or use shared components. Or do some logic. Or easily compose things. Note they said "JSX as a templating language". Why worsen the experience using Python + Jinja when you're just building a static site.
    - baobabKoodaa 3y ago
      [flagged]
    - ehnto 3y ago
      Mm, herein lies the problem, I was not thinking about Python at all, and I suspect we are all thinking about various different tools. A static site is necessarily not dynamic though, as soon as you need dynamic features you need to reach for one tool or another. "Static site generators" are just dynamic sites with a pre-compile step instead of JIT. When I think of a static site, I am thinking HTML, CSS, some server side includes for header and footer. A bit of vanilla JS if you absolutely need it. Apache and nginx both have native template includes so you don't even need an extra language like py or php.
      - 3y ago
zwily 3y ago
Static doesn’t mean no JavaScript. Usually it means it’s not rendered on the server. Every time i start making a static website, i end up needing to include a table (or some other structured display of data) and then just switch to JSX to render the data with a loop. Sometimes i then render it as html and deploy, and sometimes i deploy it as react. But that’s how i usually end up using React even when static.
- satvikpendem 3y ago
  Indeed, static just means that the site files can be on a CDN and not need to change. Technically, SPAs are also static, if they spit out pure HTML, CSS and JS files that you can put on a CDN.
bdcravens 3y ago
You use JSX the same way you'd use PHP - it just compiles into HTML. In this case, you just save the output after compiling it once. (as you can with the dozens or hundreds of non-JS options that do the same)

Why would you need JSX for a static website? If you need JS then it's not "static".

nesarkvechnep 3y ago

Because they only know JS and it’s ecosystem.

ylyn 3y ago

You can render JSX at build-time. So it's just a templating language, as the parent comment said.

eropple 3y ago

React is completely happy to spit out a DOM tree as HTML for you; wiring up the in-browser JavaScript side of React is optional. This is how static site generators like Gatsby or NextJS work (with some hacks that as a user you don't really care about) and (eliding some detail) how React Server Components now work generally. I've also used it to generate email templates[1] with some success, too. I use JSX because it's a nicer templating system than EJS or similar. It allows me to write components to encapsulate reused fragments rather than text manipulation. And I like it, which counts for something. Candidly, this is something that people who fulminate about React probably should know before they start talking. [1] - https://github.com/eropple/rx-mailer https://github.com/eropple/rx-mailer

Capricorn2481 3y ago

Obviously there's a spectrum. A static website just means the files are served statically from a folder, and routing is just the folder path. You can still serve JS files and have a static website. If you put an alert on a button, you're not suddenly a SPA

eropple 3y ago
It's more than that: you can just call methods in ReactDOMServer to get a DOM tree. The tools to wrap this vary widely; you can use Gatsby (ehh) or NextJS (yeah!) to do it if you want a full-featured framework around all of it, you can use something like react-snap if you want something simple and less all-in, or you can just call them yourself and plop some files in a build directory.

post-it 3y ago

Generally, a static website refers to any website where the server just serves files rather than running application code for each request. JS runs on the client. For example, I've been working on a character generator for the Inquisitor tabletop game. It's completely static because I just SFTP the build output to my webserver, but it uses React and JSX.

codethief 3y ago

You're missing OP's point. The website can be fully static (even without any JS) but you could still use JSX/React to generate it (during build time, not runtime). If you've ever had to build a static website from scratch, with the same navigation, footer etc. on each page, and without using frames, then you'll appreciate the amount of work that a templating engine saves you (whether JS-based or else).

ehnto 3y ago
I think you all missed GPs point, JS is barely required, let alone an SPA framework, let alone static generation in an SPA framework, etc.
- c-hendricks 3y ago
  And you're missing the other GPs point. Even when building a static website, you might want to reuse components. Or use shared components. Or do some logic. Or easily compose things. Note they said "JSX as a templating language". Why worsen the experience using Python + Jinja when you're just building a static site.
  - baobabKoodaa 3y ago
    [flagged]
  - ehnto 3y ago
    Mm, herein lies the problem, I was not thinking about Python at all, and I suspect we are all thinking about various different tools. A static site is necessarily not dynamic though, as soon as you need dynamic features you need to reach for one tool or another. "Static site generators" are just dynamic sites with a pre-compile step instead of JIT. When I think of a static site, I am thinking HTML, CSS, some server side includes for header and footer. A bit of vanilla JS if you absolutely need it. Apache and nginx both have native template includes so you don't even need an extra language like py or php.
    - 3y ago

zwily 3y ago

Static doesn’t mean no JavaScript. Usually it means it’s not rendered on the server. Every time i start making a static website, i end up needing to include a table (or some other structured display of data) and then just switch to JSX to render the data with a loop. Sometimes i then render it as html and deploy, and sometimes i deploy it as react. But that’s how i usually end up using React even when static.

satvikpendem 3y ago
Indeed, static just means that the site files can be on a CDN and not need to change. Technically, SPAs are also static, if they spit out pure HTML, CSS and JS files that you can put on a CDN.

bdcravens 3y ago

You use JSX the same way you'd use PHP - it just compiles into HTML. In this case, you just save the output after compiling it once. (as you can with the dozens or hundreds of non-JS options that do the same)