How to start a React Project in 2023
I recently showed the (old) React Hooks documentation to my 70-year-old mentor, a comp sci PhD who started on punch cards and never stopped. I wish I had taken a reaction video of the flabbergasted look on his face when he was reading the React docs section titled "Classes Confuse People and Machines" (https://legacy.reactjs.org/docs/hooks-intro.html#classes-con...).
Now, I like React, more or less. But some of the discussion around React reminds me of Wimp Lo from Kung Pow ("...we trained him wrong as a joke..."). For instance, the whole immutability for performance thing (I get it, but lol). Or statements like this: "[w]ith Hooks, you can extract stateful logic from a component so it can be tested independently and reused" (thank God someone finally figured out how to reuse stateful logic in software /s).
Does anybody else think it's extremely damning that a mature framework such as React still has no agreed up on way to start a project? One of React's initial selling points was that it was a library, not a framework! React is unopinionated! Etc. Perhaps some opinion might have been better, in hindsight.
How is `react new` not a thing?
At this time in my life, learning to do front end work at work seems to be more difficult than reading and understanding the LLM paper from OpenAI (or Stephen Wolframe: How LLM works lengthy article). I did some front end work in the first 3 years of my career in server side render with JSP. We added jquery and the likes and it felt little complicated but manageable. Then I become mostly backend eng for the next 14 years. Now I feel like the dumbest folk in the group when it comes to talking UI framework. I know how those stuff works but the process to put them all together is akin to pulling teeth. And then there is a recent discussion at work about going back to SSR with hydration and get rid of react altogether. Hydration, SSR, improving response time by lower round trip calls, geez we did that in the early 2000s. Somehow I can’t help but thinking the way of shit we are in now maybe because of the ZIRP which is ending now. Maybe I can take a deep breath and say “things will be back to normal for fuck sake”
Sorry for the rant :-)
(I'm on the Next.js team)
Something we haven't done a great job of, so far, is talking about how you can use Next.js for SPAs or client-only React sites. You can start with basic HTML/CSS/JS, deploy and host anywhere, and then optionally opt-into features that require using a server (and host somewhere like a Node.js server or through a Docker container). Next.js can generate an HTML file per route, rather than having one large SPA bundle.
There's been a lot of feedback around CRA no longer being recommended and folks looking for a replacement[1]—and uncertainty if Next.js is the correct solution. We've been working on some better docs[2] that help explain how to use Next.js without a server.
[1]: https://twitter.com/dan_abramov/status/1636886736784457734
An incomplete sampling of the projects/frameworks/libraries mentioned in the article:
- create-react-app
- React
- Vite
- Webpack
- esbuild
- TypeScript
- ESLint
- Vue
- Remix
- Next.js
- OpenNext
- Astro
- Gatsby
- Parcel
- Turborepo
- React Native
- Expo
- Tauri
- Electron
- SvelteKitIf you're interested, this is the "absolute minimum" React project I was able to create, using esbuild (see `dev.mjs`) and some .html files. [0] It's a sub-package in a larger workspace, so there is some complexity inherited from the monorepo in terms of `tsconfig.json` and dependency management, but you can ignore that; the esbuild part was pleasantly simple to implement, and it pretty much "just works," such that each file in `www` is an entrypoint with one corresponding script from `pages/` that calls `createRoot(container).render(<App />)`.
Note that's also a "sandbox" for development purposes. If I were creating a new production app today, I would probably use Vite, which uses esbuild under the hood anyway. It's super easy to get started [1] with not only React, but also Lit or Vue or any other number of pre-configured templates, and it takes care of all the drudgery of bundling and tests for you so that you can get straight to work.
[0] https://github.com/splitgraph/madatdata/tree/main/packages/t...
So we’re back to the old pre SPA web and even have a term for it: MPA
If I build an MPA, why should I choose Astro if I can choose Rails? That’s a serious question to the HN community, not a rhetorical one - would very much love to learn if there’s something new here.
Create-react-app is deprecated? And the recommended replacement for SPAs is from the guy that makes Vue? What on earth?
To start developing a react project - all you need is a file bundler and a local dev server. Luckily webpack provides both and as a long-time web developer I strongly recommend just doing `npm init; npx webpack-cli init;`. To get react going you just do `npm install react react-router-dom`. I don't know why the author is suggesting rather "how to a start a React Project constrained by some kind of a framework".
So, let's recap the real rad method to start a React Project in 2023:
npx webpack-cli init Advantages:
1. You get what you want: a web bundler and a dev server
2. No premature bargains or decisions, all this base belongs to you.
3. Expand infinitely and meaningfully with modules you will want to utilize for covering your app's use-case, starting with react and react-dom
npx webpack-cli init Disadvantages:
1. Have to learn about your problems and discover solutions
2. Have to scroll through solutions documentation and configure them manually
3. Have to own your technical decisions and structure
As someone who does actual software engineering (although I have done my share of software tree houses and garages as well):
If you don't have solid experience already: Don't plan your projects with anything except plain React configured with TypeScript. Use "Create React Application" (cra) to set it up and stick with the standards.
Everything else you can add later - if you need it - and in the mean time you have the chance to move faster without breaking things and make better decisions.
If you already have solid experience: consider this anyway if it is just another web application. I personally at least have seen a lot of time wasted because people always deviate from the standards both in React, Angular and Maven.
When time comes to add things we think we need, think about the tokens mentioned in https://boringtechnology.club
I just built a ChatGPT-powered Spanish tutor for my son using Fresh from Deno and it was overall an enjoyable experience. Once I grok’d how islands worked it was pretty smooth sailing.
I do love NextJS but I will try a few more Fresh projects soon.
Use svelte. Trust me. JS/TS + html and css
The biggest svelte complaint I see is that there aren’t enough libraries. That’s because it is trivial to built things with svelte. And as a UI engineer you should know how to build, not just npm install some-shit
Source: former UI tech lead, been using react since Dec 2015 and have built apps with it that are used by millions of users.
I started a new React project earlier this week and ran into approximately zero of the issues or concerns mentioned here in the comments.
I genuinely don’t get why the webdev community insists in making their jobs so difficult by refusing to actually learn the tools they’re using. CRA is unnecessary, Next.js is unnecessary. The simple tutorial on the React website gives you everything you need to get started, and you can research which other tools you need once and be good forever.
If you need a framework: NextJS (no, don't suggest Remix, every single good feature about it has been copied by every library and their grandpas)
If you only need a bundler: Vite
If you want to be happy: Don't.
I know it's not popular, but I still use "npx create-react-app" and have built successful apps with it. I'm sure I'm missing something, but it doesn't seem essential for my use cases.
Just use Next.js? If you just use it by following the getting started and don't use their SSR features if you don't want them, it will Just Work™
I really don't understand why the outcry even exists. It's recommended for a reason and whining about how SPAs still exists misses that no one ever said that it doesn't. The only thing people are mad about is that Vite didn't make the list but that's understandable because I could never tell the new React developers we just hired to do this project by themselves with Vite. But with Next.js (or whatever else on the list) it was a matter of "File here, this URL, your React component here. Don't think about SSR I'll take care of it if we need it."
And it just works. Even too good because they run into issues so rarely that I forget that they make so much progress and we're already on our 3rd project with it. And they literally started coding 5 months ago.
And if you care about what's going on under the hood, guess what? You're one Bing chat away from finding Vite and a few commands to have it running locally. Want SSR now too? Guess again, you are already setup to do exactly that in a way more ergonomic way than the low level Vite plugin (which I like, but I would never be able to hand-off to other developers)
> However, since SSR is becoming a more important topic these days
Is it? This is the first I’ve heard of this fantastic news. What’s changed to have caused the increased importance?
I tend to only use esbuild on solo projects. It's simple, compiles JSX and TS, and the documentation is mostly easy to understand. The API also makes it easy to just create a `build.js` script I can call. As a bonus, it also includes live reload and a server these days.
Vite seems like the best batteries-included solution that is still relatively lightweight compared to going all in on a framework like Next.
I feel like the React folks are in this unfortunate position where they have to cater to people differently than other JavaScript libraries do, because to a lot of people, "React" means more than just a JavaScript library. And to some, they've never written JavaScript without React or even without build tools for that matter. I personally prefer the less-is-more approach to learning JS or any JS library (start with an .html file and a <script> tag, work your way up) and even though that may be a healthier way of learning React, it might frustrate more new users who just wanna make a shiny app.
The best way to start a react app is to use Svelte.
Someone should map out every frontend framework and it's path to everything, from SPA to SSR & which libraries that exists within that ecosystem.
Nvm, roadmap.sh/frontend came to my mind.
i can feel i am not the only one sharing the frustration on this, has anyone seen any dead simple js library or approach to build simple web apps that does not include boilerplates, builders, generators and what not? something like jquery but on steorids?
A bit unrelated, but what happened to Angular?
I was fully expecting to see a one-liner for this article: npx create next app. I think this article overstates the disadvantages of using a framework like NextJS.
If you don’t want to work on the bleeding edge, then don’t upgrade right away. That’s true of literally every library out there.
And IMO it’s trivial to host a next app just about anywhere. Vercel has done a much better job with portability than you would typically expect from similar companies.
The docs for NextJS are also just… rock solid. It really feels like they cover everything.
I’m not affiliated, just a happy developer using their framework.
Oh wow, this couldn't be more topical for me if it had to be. I seeded and maintained a react site at old job; so thought that I would do the same at new job.
I'm more than a little wary, as I have seen how easily out of hand the front end can get. Any "services" we are writing will be backend and mirroring all of that effort on the frontend feels very misguided. Not at all happy that the first thing I stumble into is looking to be a giant featured framework.
I love Next.js and don't find Vercel vendor lock-in from it. I've deployed a next app on github pages and it understood my folder based API structure fine
How to start a react project: don't. Use raw browser APIs. Maybe build yourself some thin wrappers for those APIs that you find awkward to use as is.
I genuinely don't understand why so many people want to abstract the platform away in projects that only run on a single platform (the browser in this case). You want to be as close to your platform as possible if you care about performance and resource use.
I’m currently working on a free open source framework for React developers and I’d love some feedback!
It’s a batteries included React framework for scaffolding out a Stripe level frontend, complete with a blog and documentation.
It’s built on top of Next.js, and is essentially free to host. :)
Please check out my minimum viable prototype and tell me what you think: https://elegantframework.com
As someone new to React, but who has used Webpack, I'm glad that CRA is gone.
It felt like "ravioli code" to me, and it seemed wrong that everyone was reluctant to use "eject", but then you couldn't configure any of the underlying tools, like Webpack, easily either.
Tools should be easily composable, they shouldn't be clumped together with an inflexible "ravioli" abstraction.
I'd add to the article that Vite allows to make React components libraries too. Same tool to build your apps and your libraries.
> bleeding edge tech solves many problems ...
> which day to day tech workers working on internal B2B do not face
That's so true. Good luck explaining to management that the front-end app needs additional cloud resources, such as a server, so we are on the edge of the trend with SSR.
Most apps behind a login face tough architectural / security meetings, defending SSR for their use-case.
Both React's and NextJS' marketing is straight-up obnoxious.
Currently, React Router is the only React framework that is even offering a solution to data fetching, mutations and transitions in the CSR space. Very basic problems.
NextJS is not at all a CSR framework. In that space it suffers all the problems your average CRA application has.
The frontend web framework landscape is pretty complicated and fragmented, sure, but is it really any different from backend?
Take a look at Amazon’s or Google’s enormous list of cloud products and tell me your eyes don’t glaze over. And that’s not even the full ecosystem, it’s just the products directly supported by one company!
If you enjoy productivity on all levels (also performance) just go with Next. If you are a purist go vanilla js.
Although I don't like some features of nextjs, it works for me. (things like server side prop management)
An interesting article, but it's unfortunately one more that misses the elephant in the room: Nrwl NX: https://nx.dev/
The esbuild diagram is quite misleading because Vite does not only use esbuild, but also rollup and postcss.
Webpack can be set up with esbuild and will be equally fast, while being more flexible to configure, especially regarding multiple CSS entry points, which to my knowledge is not possible with Vite.
> [Vite is] almost drop-in replacement for create-react-app (CRA)
Can anyone with experience replacing CRA with Vite speak to how true this is?
How to start a React project in 2023: Don't.
Seriously there is zero reason to use monstrous, painful software unless you're a sadist.
Use something like solid or better yet go for a substantially better language like Imba, especially if you're a startup.
npx create-next-app@latest myapp
Honestly, for every new project I now use tRPC + Next.js, and I expect this to finally be the stack that will last me the next 10 years.
If you are targeting native and web, I think the Tamagui + Solito starter that lets you share code between Expo/Nextjs is unbeat (disclaimer, I made Tamagui):
Just `npm create tamagui@latest`
See: https://tamagui.dev
Happy hacking!
As someone who just decided to learn React (and modern javascript, after 1.5 decades or so of not programming in javascript at all) in the past month or two, I've been extremely frustrated by the documentation (in particular) and the whole state of flux that it's in (in general). When I started with React, all the tutorials/guides on the site said "this is the old documentation, it's about to be replaced" on every single page. Still I worked through it and learned a bit. But by the end of working through it I figured "well, I might as well click the link that's on every page and see what modern React is like". So I tried to follow one of their guides and had issues with the very beginning. But I knew enough React to know what to do to fix the issue, so I did, and proceeded with the new guide, only to hit more problems immediately after that. So I gave up, and just stuck with the "old" way to do React. But then just 1 week after all those issues, the new docs were switched over to be the main docs. I'm honestly kind of afraid to try to work through them again and see if they fixed them already.
And now I just read this article, and, well, I'm even less motivated to get into this stuff. Is this just a really bad time for React? Or is it always such a chaotic changing climate around it?