Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add quick setup section for Vite in documentation #7416

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+10 −1
Open

Add quick setup section for Vite in documentation #7416

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/content/learn/start-a-new-react-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ If you want to build a new app or a new website fully with React, we recommend p

</Intro>


You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.

By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later.
Expand All @@ -31,6 +30,16 @@ If your app has unusual constraints not served well by these frameworks, or you

</DeepDive>

## Quick Setup {/*quick-setup*/}
Copy link
Contributor

@karlhorky karlhorky Jan 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of emphasizing that this option is "quick", maybe it would be better to emphasize what the drawbacks are (drawbacks are already described in the section "Can I use React without a framework?" above) and what developers miss out on with a simple Vite setup:

  1. Maybe a better heading here would be "Frontend-only React" or something (since Vite is not integrated with React Server Components yet - aside from some Vite RSC experiments)
  2. Since the Vite option has drawbacks, I guess the section makes more sense further down, after the "Production-grade React frameworks"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, thinking more on it, it seems as if the "Can I use React without a framework?" section above already covers a lot of the drawbacks to using setups like Vite, and also links to it

Maybe it doesn't need to be more visible than that?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is that it isn't visible at all.

Check the issue connected to this PR.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please stop forcing users to choose NextJS. This makes no sense. SPA is still the best choice for most projects that don't need SEO optimization.

Copy link
Contributor

@karlhorky karlhorky Jan 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next.js and other production-ready frameworks also have SPA support:

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hosting platforms generally let you configure a reverse proxy to maintain SPA and MPA like routing, so that shouldn't cause issues with static exports specifically.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next js Static export still isn’t an spa though.
Remix has an spa mode but even that doesn’t behave like a real spa
remix-run/remix#9008

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do find it strange how React is supposedly just a library, and yet it almost dictates that you should use a full-stack framework. Almost as if there is some financial incentive involved between React and Vercel, but I'm a cynic so ...

In either case, the current wording makes it seem as if the only correct way to use React is with a full-stack framework, and that everything else is bad - this wording drives people away from using React as just a front-end SPA, which is still very much possible to do. If this is the intent then perhaps the documentation should say that you do not recommend using React as a SPA at all, and then people can simply start using Vue or something else instead. Right now the wording is sort of open to interpretation in a way, although heavily leaning towards telling you to use Next.js.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React is not forcing you to do anything. Next doesn't require Vercel, and React doesn't require Next, it just recommends a meta framework for a better experience.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Better" experience for who, for Vercel?

Since from CRA deprecation, the React docs have changed from a impartial to a Next/Vercel oriented instructions.

Next is a vendor lock-in, Next is not SPA, Next only make sense for Server Side Rendering (SEO), deploying Next outside Vercel is a pain close to the death.

"Better" experience is far away from Next.


### Vite {/*vite*/}

**[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.** It's opinionated and comes with sensible defaults out of the box. To create a new Vite project, run in your terminal:

<TerminalBlock>
npx create-vite@latest
</TerminalBlock>

## Production-grade React frameworks {/*production-grade-react-frameworks*/}

These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).
Expand Down
Loading