From 6580cb39a9bc1903f00c5ac328e6eee32a3b03b9 Mon Sep 17 00:00:00 2001 From: scarf Date: Mon, 22 May 2023 20:38:13 +0900 Subject: [PATCH 1/2] docs: list Vite as a viable option for beginners --- src/content/learn/start-a-new-react-project.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 280a1378e39..f7b4cbb7da4 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -4,7 +4,7 @@ title: Start a New React Project -If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML. +For beginners, quickstart using Vite. If you're comfortable with basics and want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. Frameworks provide features that most apps and sites eventually need, including routing, data fetching, and generating HTML. @@ -14,6 +14,16 @@ If you want to build a new app or a new website fully with React, we recommend p +## Quickstart React Development with Vite {/*quickstart-react-development-with-vite*/} + +**[Vite](https://vitejs.dev/) is a modern build tool that simplifies learning React development.** While other frameworks offer many powerful features, Vite's simplicity makes it a great choice for React beginners. Vite is fast, supports [TypeScript](https://vitejs.dev/guide/features.html#typescript) out of the box, and includes the [Hot Module Replacement (HMR)](https://vitejs.dev/guide/features.html#hot-module-replacement) feature to quickly test code modifications. To create a new Vite project, run in your terminal: + + +npx create-vite + + +Vite is best for small to medium-sized [single page applications (SPA)](https://developer.mozilla.org/en-US/docs/Glossary/SPA). For larger projects, consider using a framework. + ## Production-grade React frameworks {/*production-grade-react-frameworks*/} ### Next.js {/*nextjs*/} From 26ad3ef436e23d05f8ad3319992943f724fbdebb Mon Sep 17 00:00:00 2001 From: scarf Date: Mon, 22 May 2023 20:38:37 +0900 Subject: [PATCH 2/2] docs: switch `without` to `with` in framework usage section with Vite now being a viable and recommended option for new projects, the order of the frameworks in the documentation has been adjusted to reflect this change. --- src/content/learn/add-react-to-an-existing-project.md | 2 +- src/content/learn/start-a-new-react-project.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 03f49121148..4ba6ebe3ec7 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -24,7 +24,7 @@ Here's how we recommend to set it up: 2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). 3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. -This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks. +This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#should-i-use-react-with-a-framework) baked into those frameworks. Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead. diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index f7b4cbb7da4..3c0eedb6bde 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -76,7 +76,7 @@ Expo is maintained by [Expo (the company)](https://expo.dev/about). Building app -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Should I use React with a framework? {/*should-i-use-react-with-a-framework*/} You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.**