It's hard to take this seriously. Saying React is bloated because `create-react-app` pulls too many dependencies makes it seem like you don't understand what `create-react-app` is for. `create-react-app` is not a hello world, it's application scaffolding. Imagine if I said Ruby's hello world was 1 million lines because I had started with Rails. That is what is happening here.
Show me what longwood looks like when you have a large complex application with several re-usable components, then compare it to react. It's very easy to create "clean" minimal libraries that do nothing more than hello world. The complexity comes from building actual applications.
Agreed on the create-react-app point. A hello world in React requires far less code than what CRA provides[0]. If they're gonna compare to create-react-app, then at least mention HMR.
The comparison of syntaxes also sounds a bit shallow. There are legitimate arguments for why one syntax might better than another (e.g. using a full blown templating language in order to allow the compiler to optimize more aggressively, like in the case of svelte and angular, vs using the parent language for ease of learning, like is the case for react). IMHO, the syntax argument in this article merely boils down to opinion (i.e. "X syntax is ugly, mine looks nicer") and ignores other alternatives (hyperscript being one big omission in this space).
As far as what React actually gets wrong, I think that are certainly things that can be criticized about it. The author of Crank.js does one such exposition quite eloquently IMHO[1]. The author of Solid.js has written at length about what performance could look like if we left various preconceptions and tech debt behind. Etc. Unfortunately, I feel that this article doesn't showcase nearly as much substance as some of these other libraries in the same space.
Using create-react-app is the solution to the problem of a sea of intertwined, tightly coupled, frequently breaking dependencies. Even with CRA there are still tons of frequent dependency problems.
Hello world may not require CRA, but not using CRA is often a huge mistake.
Basically all problems with react end up being a day of debugging. The solutions are never a stack overflow question but are often the nth comment in a github bug report. on some obscure dependency your project only indirectly relies on. Deleting node-modules folder and reloading packages is a more-than-monthly occurrence. Manually tweaking package version pins, up and down, explicitly switching sub-dependencies out for newer ones that the maintainer hasn't updated yet, and discovering totally broken and totally replaced dependencies happens constantly. CRA saves you from many of the dependency headaches as it's all pre-pinned, but you still end up fighting all the same battles eventually.
I've never had more dependency hell or build problems with any platform I've used compared to react/npm, which includes Java, .NET, Python, and PHP.
How often do you run into problems like that? I've very rarely encountered anything like that with React, especially in the last two or three years. I don't use create-react-app and my package.json currently lists 88 dependencies.
Regardless of using CRA or not, would the adoption of a lockfile help in keeping your direct and indirect dependencies pinned to the same versions over time?
I experienced these issues with a lock file. Frankly, the dependency manager just isn't doing it's job well. It's job is to manage the dependencies so that I don't have to.
Writing no code and configuring nothing is better than writing code and configuring things.
That's more time you get to spend on your actual app.
Writing code and configuring things leads to responsibilities and technical debt. So rely on well known, free and easy solutions until you can't. This is the way.
`create-react-app` is not a hello world, it's application scaffolding.
Somebody should've told that to pretty much every author of every React tutorial out there. They all start with `create-react-app` because it's "easier" this way.
Imagine if I said Ruby's hello world was 1 million lines because I had started with Rails. That is what is happening here.
Incidentally, I remember visiting a code bootcamp a few years ago. Back then, they put people who never saw a line of code in their life in front of Sublime and showed them how to make web apps with Ruby on Rails. So this definitely happens, and the results are as expected.
Can anyone point me toward a light(er)weight boilerplate for a react/JSX app than create-react-app? I'm thinking just just package.json and webpack.config.json in a git repo that I can clone to start a new project. Something like this but for react: https://github.com/cferdinandi/build-tool-boilerplate.
Serious question. Is there an alternative to create-react-app for SPAs? I know Next.js is the hottest framework right now but i'm only interested in client-side rendering
I'm not following your logic. React+ReactDom only has 3 dependencies, so I don't understand how that follows. How is React bloated because `create-react-app` gives you functionality to setup a PWA? If I don't care about PWAs, I don't need to use it, but `create-react-app` downloads it anyways.
The majority of the dependencies pulled in on create-react-app is from the `react-scripts` which helps entirely with scaffolding. Saying that React is bloated because the scaffolding generation tool downloads too much code sounds crazy.
You don't need to compile React, and compiling `jsx` is just a couple lines. Clearly there's something being missed here about the function of create-react-app. It's an application development environment. React itself is quite secondary to its purpose.
Comments
It's hard to take this seriously. Saying React is bloated because `create-react-app` pulls too many dependencies makes it seem like you don't understand what `create-react-app` is for. `create-react-app` is not a hello world, it's application scaffolding. Imagine if I said Ruby's hello world was 1 million lines because I had started with Rails. That is what is happening here.
Show me what longwood looks like when you have a large complex application with several re-usable components, then compare it to react. It's very easy to create "clean" minimal libraries that do nothing more than hello world. The complexity comes from building actual applications.
Agreed on the create-react-app point. A hello world in React requires far less code than what CRA provides[0]. If they're gonna compare to create-react-app, then at least mention HMR.
The comparison of syntaxes also sounds a bit shallow. There are legitimate arguments for why one syntax might better than another (e.g. using a full blown templating language in order to allow the compiler to optimize more aggressively, like in the case of svelte and angular, vs using the parent language for ease of learning, like is the case for react). IMHO, the syntax argument in this article merely boils down to opinion (i.e. "X syntax is ugly, mine looks nicer") and ignores other alternatives (hyperscript being one big omission in this space).
As far as what React actually gets wrong, I think that are certainly things that can be criticized about it. The author of Crank.js does one such exposition quite eloquently IMHO[1]. The author of Solid.js has written at length about what performance could look like if we left various preconceptions and tech debt behind. Etc. Unfortunately, I feel that this article doesn't showcase nearly as much substance as some of these other libraries in the same space.
[0] https://reactjs.org/docs/hello-world.html
[1] https://crank.js.org/blog/introducing-crank
Using create-react-app is the solution to the problem of a sea of intertwined, tightly coupled, frequently breaking dependencies. Even with CRA there are still tons of frequent dependency problems.
Hello world may not require CRA, but not using CRA is often a huge mistake.
I'd like to learn more about bad times that have occurred due to failure to use CRA up front.
Basically all problems with react end up being a day of debugging. The solutions are never a stack overflow question but are often the nth comment in a github bug report. on some obscure dependency your project only indirectly relies on. Deleting node-modules folder and reloading packages is a more-than-monthly occurrence. Manually tweaking package version pins, up and down, explicitly switching sub-dependencies out for newer ones that the maintainer hasn't updated yet, and discovering totally broken and totally replaced dependencies happens constantly. CRA saves you from many of the dependency headaches as it's all pre-pinned, but you still end up fighting all the same battles eventually.
I've never had more dependency hell or build problems with any platform I've used compared to react/npm, which includes Java, .NET, Python, and PHP.
How often do you run into problems like that? I've very rarely encountered anything like that with React, especially in the last two or three years. I don't use create-react-app and my package.json currently lists 88 dependencies.
Regardless of using CRA or not, would the adoption of a lockfile help in keeping your direct and indirect dependencies pinned to the same versions over time?
I experienced these issues with a lock file. Frankly, the dependency manager just isn't doing it's job well. It's job is to manage the dependencies so that I don't have to.
Writing no code and configuring nothing is better than writing code and configuring things.
That's more time you get to spend on your actual app.
Writing code and configuring things leads to responsibilities and technical debt. So rely on well known, free and easy solutions until you can't. This is the way.
For example, having to help someone who was stuck for a day debugging a broken setup and it turns out they didn't know class properties are not JS
Somebody should've told that to pretty much every author of every React tutorial out there. They all start with `create-react-app` because it's "easier" this way.
Incidentally, I remember visiting a code bootcamp a few years ago. Back then, they put people who never saw a line of code in their life in front of Sublime and showed them how to make web apps with Ruby on Rails. So this definitely happens, and the results are as expected.
Can anyone point me toward a light(er)weight boilerplate for a react/JSX app than create-react-app? I'm thinking just just package.json and webpack.config.json in a git repo that I can clone to start a new project. Something like this but for react: https://github.com/cferdinandi/build-tool-boilerplate.
I'd check out Parcel, it brings back the experience of throwing in a regular <script> tag and being good to go. https://parceljs.org/typeScript.html
npx create-snowpack-app
Serious question. Is there an alternative to create-react-app for SPAs? I know Next.js is the hottest framework right now but i'm only interested in client-side rendering
I'm happy with snowpack, it has a create-snowpack-app cli command with templates for react, svelte, etc.
It's other way around: create-react-app pulls too many dependencies because React is bloated.
They could have made React lighter and require no compilation. But instead they created a scaffold and fought complexity by adding more complexity.
React requires no compilation. (JSX requires compilation, but you can use React without JSX.)
CRA is a scaffold, but you don’t need to use CRA to use React.
While true I don’t know that I’ve ever seen a non-didactic codebase that uses react but not jsx.
Can anyone point to any recognizable projects or products that do so?
I'm not following your logic. React+ReactDom only has 3 dependencies, so I don't understand how that follows. How is React bloated because `create-react-app` gives you functionality to setup a PWA? If I don't care about PWAs, I don't need to use it, but `create-react-app` downloads it anyways.
The majority of the dependencies pulled in on create-react-app is from the `react-scripts` which helps entirely with scaffolding. Saying that React is bloated because the scaffolding generation tool downloads too much code sounds crazy.
React does not require compilation.
You don't need to compile React, and compiling `jsx` is just a couple lines. Clearly there's something being missed here about the function of create-react-app. It's an application development environment. React itself is quite secondary to its purpose.