3 ms·

What exactly is "plain React" though? Not sure I've ever seen a project that used only React and nothing else. It would seem you'd need a build step, at the min

by WD-42 2y ago

What exactly is "plain React" though? Not sure I've ever seen a project that used only React and nothing else. It would seem you'd need a build step, at the minimum.

roywiggins 2y ago
You only really need a build step to use JSX, which is strictly speaking optional.
- shepherdjerred 2y ago
  This is true (and part of why I love React/JSX) but in practice nobody writes JSX by hand.
  - cowoder 2y ago
    Isn't it the other way around, nobody writes React by hand they all use JSX?
    - shepherdjerred 2y ago
      You're right :)
- Lutger 2y ago
  Technically you don't even need react, you can do it all in javascript! Joking aside, you really do need to solve the problems jsx solves, but also webpack, next.js, react-router and depending on your application, something like mantine or tailwind. These are the minimum I think. If you have a smallish project you can get by hand-rolling your own solutions, but it doesn't make the problems themselves go away. In fact, it is exactly the claim in this thread that there are a lot of beaten paths in backend languages with relative stability over time, whereas in frontend it is 1) not clear what the beaten path is (there isn't one) and 2) when there appears to be favored solution, it often changes radically or disappears after just a couple of years. For example, create-react-app used to be the default way to start a react app, it is now deprecated. But for python, Django has been a stable beaten path for many, many years. Same for Rails. C# also tends to change every couple of years, but there is always just one single Microsoft recommended way to do things. Sure there are many experimental libraries and contenders in these languages as well, but there isn't really anything with the same maturity and stability in frontend.
- fijiaarone 2y ago
  you can always just do: <script src="react.js"> <script src="react-dom.js"> <script> const recognition = undefined var foo = document.querySelector("#foo") let bar = ReactDOM.createRoot(foo) foo.innerHTML = bar.render("<b>eyond<a>ll{recognition}"); </script>
shepherdjerred 2y ago
Yes, you would need a build step. create-react-app has existed for a very long time and works quite well though advanced applications tend to outgrow it. Alternatives are Webpack (stable, boring), Vite (starting to overtake Webpack since it's significantly simpler), and 1000 other libraries. Again, there is some movement here, but Webpack has been in a dominant position for nearly a decade and there's no reason you can't continue to use it today if you value stability. It's the equivalent of choosing to host your backend on a VPS instead of trying out serverless. Needing a build step is part of the complexity of frontend. I think frontend is getting much simpler with build tools like Vite and the addition of ES modules. But, even with these new things coming out, you can stick to your boring stable choices on the frontend just like you can on the backend.
- WD-42 2y ago
  Yea I'm not really buying it. create-react-app is deprecated. https://react.dev/learn/start-a-new-react-project https://react.dev/learn/start-a-new-react-project points you directly at Next.js as a *starting point* and the section about using React without a framework does it's best to discourage you from doing it. This is insane for beginners.
- nsonha 2y ago
  You use a lot of words to respond to such a minor point. The main point is that actual "plain react" is useless. You need at least a router, some way to manage state, some way to manage style and so on. It's why nextjs is so popular, they are practically "plain react"
  - __jonas 2y ago
    Useless is a massive exaggeration. > You need at least a router You only need a router if you want to build a SPA with different routes, not all web applications are that! Tons of practical React apps are just a single screen, or even embedded component. > some way to manage state You do not need an external library for complex state management, the React docs have some great guides on how to achieve this with plain React: https://react.dev/learn/scaling-up-with-reducer-and-context https://react.dev/learn/scaling-up-with-reducer-and-context > some way to manage style Plain CSS and the JSX style property are entirely enough for most apps. If you are using a build tool like Vite, you can also do CSS modules for scoping styles to your React components for more complex applications. I do agree that styling is not a strong point of React, but I don't think pulling in a dependency is necessary.
aprdm 2y ago
You don't need a build step if you do everything in javascript without jsx. I have done it like that in the past on air gapped environments (and vendored the deps)

by WD-42 2y ago

What exactly is "plain React" though? Not sure I've ever seen a project that used only React and nothing else. It would seem you'd need a build step, at the minimum.

roywiggins 2y ago

You only really need a build step to use JSX, which is strictly speaking optional.

shepherdjerred 2y ago
This is true (and part of why I love React/JSX) but in practice nobody writes JSX by hand.
- cowoder 2y ago
  Isn't it the other way around, nobody writes React by hand they all use JSX?
  - shepherdjerred 2y ago
    You're right :)
Lutger 2y ago
Technically you don't even need react, you can do it all in javascript! Joking aside, you really do need to solve the problems jsx solves, but also webpack, next.js, react-router and depending on your application, something like mantine or tailwind. These are the minimum I think. If you have a smallish project you can get by hand-rolling your own solutions, but it doesn't make the problems themselves go away. In fact, it is exactly the claim in this thread that there are a lot of beaten paths in backend languages with relative stability over time, whereas in frontend it is 1) not clear what the beaten path is (there isn't one) and 2) when there appears to be favored solution, it often changes radically or disappears after just a couple of years. For example, create-react-app used to be the default way to start a react app, it is now deprecated. But for python, Django has been a stable beaten path for many, many years. Same for Rails. C# also tends to change every couple of years, but there is always just one single Microsoft recommended way to do things. Sure there are many experimental libraries and contenders in these languages as well, but there isn't really anything with the same maturity and stability in frontend.
fijiaarone 2y ago
you can always just do: <script src="react.js"> <script src="react-dom.js"> <script> const recognition = undefined var foo = document.querySelector("#foo") let bar = ReactDOM.createRoot(foo) foo.innerHTML = bar.render("<b>eyond<a>ll{recognition}"); </script>

shepherdjerred 2y ago

Yes, you would need a build step. create-react-app has existed for a very long time and works quite well though advanced applications tend to outgrow it. Alternatives are Webpack (stable, boring), Vite (starting to overtake Webpack since it's significantly simpler), and 1000 other libraries. Again, there is some movement here, but Webpack has been in a dominant position for nearly a decade and there's no reason you can't continue to use it today if you value stability. It's the equivalent of choosing to host your backend on a VPS instead of trying out serverless. Needing a build step is part of the complexity of frontend. I think frontend is getting much simpler with build tools like Vite and the addition of ES modules. But, even with these new things coming out, you can stick to your boring stable choices on the frontend just like you can on the backend.

WD-42 2y ago
Yea I'm not really buying it. create-react-app is deprecated. https://react.dev/learn/start-a-new-react-project https://react.dev/learn/start-a-new-react-project points you directly at Next.js as a *starting point* and the section about using React without a framework does it's best to discourage you from doing it. This is insane for beginners.
nsonha 2y ago
You use a lot of words to respond to such a minor point. The main point is that actual "plain react" is useless. You need at least a router, some way to manage state, some way to manage style and so on. It's why nextjs is so popular, they are practically "plain react"
- __jonas 2y ago
  Useless is a massive exaggeration. > You need at least a router You only need a router if you want to build a SPA with different routes, not all web applications are that! Tons of practical React apps are just a single screen, or even embedded component. > some way to manage state You do not need an external library for complex state management, the React docs have some great guides on how to achieve this with plain React: https://react.dev/learn/scaling-up-with-reducer-and-context https://react.dev/learn/scaling-up-with-reducer-and-context > some way to manage style Plain CSS and the JSX style property are entirely enough for most apps. If you are using a build tool like Vite, you can also do CSS modules for scoping styles to your React components for more complex applications. I do agree that styling is not a strong point of React, but I don't think pulling in a dependency is necessary.

aprdm 2y ago

You don't need a build step if you do everything in javascript without jsx. I have done it like that in the past on air gapped environments (and vendored the deps)