3 ms·
A basic React app is 3 lines of code with an optional but recommended compilation step. You can get a very complex app with 20% of the code compared to Angular.
by throwAGIway 2y ago
A basic React app is 3 lines of code with an optional but recommended compilation step. You can get a very complex app with 20% of the code compared to Angular. Nothing else of the big ones (React, Vue, Angular, Svelte) comes close. Just don't use bloat like create-react-app, instead make an empty folder and install react and react-dom yourself.
- ttfkam 2y agoWhat's the smallest "Hello ${name}" hooked up to an input field you can make deployable in React? Svelte's is about 2.1KB last I checked. Can React get below 40KB?
- acemarke 2y agoNope, ReactDOM is 132K min, 42K gzipped: - https://unpkg.com/browse/react-dom@18.2.0/cjs/ https://unpkg.com/browse/react-dom@18.2.0/cjs/ - https://bundlephobia.com/package/react-dom@18.2.0 https://bundlephobia.com/package/react-dom@18.2.0
- throwAGIway 2y agoNote that this is the full package, and that it's normal to use a bundler that will treeshake things you don't use away. For example react-dom includes server-side rendering functions that are not necessary on browser side.
- ttfkam 2y agoSo how small can you get for a hello world page with a single "hello $name" component, spending an hour or less on it?
- acemarke 2y agoThat bundle size + the size of your component. Just created a fresh Vite+React app and rendered a "hello world" component, and the resulting output is: dist/assets/index-uoOveHrm.js 142.66 kB │ gzip: 45.76 kB
- acemarke 2y agoAfraid that's not accurate. The package size I linked is specifically the `react-dom.production.min.js` bundle that is used on the client side. The `react-dom` package does include _separate_ bundles used for server rendering, but that whole React client bundle will get included in your app, and it does _not_ tree-shake at all. (To be clear I _like_ React, but it's best to be accurate about what happens here.)
- throwAGIway 2y agoSo this package is not the actual react-dom package I get when I npm install react-dom? Thanks for the correction!
- acemarke 2y agoThe `react-dom` NPM package includes multiple different JS bundles that are used for different purposes. See that `unpkg` link I pasted in the parent comment. There's 3 different flavors of `react-dom` for use in the client (dev, prod, profiling), and then several variations of `react-dom` for use _on the server_. The client bundles don't include any of the server functionality. _None_ of the bundles are treeshakeable at all, because A) they're shipped as CommonJS modules and not ESM, and B) the way the React library is written and architectured as a whole. All of the reconciler logic is intertwined and unshakeable, so even if React did suddenly switch to shipping ESM modules instead of CJS, it would still end up as the exact same bundle size.
- throwAGIway 2y agoGo for Preact if bundle size is your concern.
- ttfkam 2y agoI'd rather go to Svelte for lower bundle size than Preact, better performance than Preact, and clearer code with fewer lines written than Preact. Sure, I'd lose access to the React ecosystem, but I'd also gain access to the vast ecosystem of vanilla JS libraries without having to write/use a wrapper, so that's a wash. (bind:this is awesome!)
- throwAGIway 2y agoYep, sure! Personally I don't like the Svelte programming model, and I like Preact signals a lot, and hooks are fine to me. But Svelte is definitely a good way overall.