From bde970e39e18569c086ad9fd37e546687e5215cf Mon Sep 17 00:00:00 2001 From: Theo Browne Date: Sat, 21 Jan 2023 15:35:11 -0800 Subject: [PATCH 1/2] Replace cra recommendation with Vite --- beta/src/content/learn/start-a-new-react-project.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/beta/src/content/learn/start-a-new-react-project.md b/beta/src/content/learn/start-a-new-react-project.md index 3e1d44d36e5..f9fadb19385 100644 --- a/beta/src/content/learn/start-a-new-react-project.md +++ b/beta/src/content/learn/start-a-new-react-project.md @@ -27,13 +27,13 @@ React is a library that lets you organize UI code by breaking it apart into piec ## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/} -If you're **learning React,** we recommend [Create React App.](https://create-react-app.dev/) It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching. +If you're **learning React,** we recommend the [Vite React template.](https://vitejs.dev/guide/) It's the simplest way to try out React and build a new single-page, client-side application. Vite works with other frameworks and isn't opinionated about routing or data fetching. First, install [Node.js.](https://nodejs.org/en/) Then open your terminal and run this line to create a project: -npx create-react-app my-app +npx create-vite my-app --template react @@ -46,13 +46,13 @@ npm start -For more information, [check out the official guide.](https://create-react-app.dev/docs/getting-started) +For more information, [check out the official Vite docs.](https://vitejs.dev/) -> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. +> Vite's default templates don't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because this template can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. ### Popular alternatives {/*toolkit-popular-alternatives*/} -* [Vite](https://vitejs.dev/guide/) +* [create-react-app](https://create-react-app.dev/) * [Parcel](https://parceljs.org/getting-started/webapp/) ## Building with a full-featured framework {/*building-with-a-full-featured-framework*/} From 2d4692a8aac464415d18f55181839b5e7bb1d154 Mon Sep 17 00:00:00 2001 From: Theo Browne Date: Sat, 21 Jan 2023 15:36:52 -0800 Subject: [PATCH 2/2] Move popular alternatives section, add copy to clarify it's role --- beta/src/content/learn/start-a-new-react-project.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/beta/src/content/learn/start-a-new-react-project.md b/beta/src/content/learn/start-a-new-react-project.md index f9fadb19385..8971a86f4cc 100644 --- a/beta/src/content/learn/start-a-new-react-project.md +++ b/beta/src/content/learn/start-a-new-react-project.md @@ -48,13 +48,16 @@ npm start For more information, [check out the official Vite docs.](https://vitejs.dev/) -> Vite's default templates don't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because this template can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. - ### Popular alternatives {/*toolkit-popular-alternatives*/} +Vite is not the only option for bundling your React-based single page applications. Here are some other popular options: + * [create-react-app](https://create-react-app.dev/) * [Parcel](https://parceljs.org/getting-started/webapp/) +> Vite's default templates don't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because this template can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead. + + ## Building with a full-featured framework {/*building-with-a-full-featured-framework*/} If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly.