What is the best tool for starting a new React project in 2023? Let's look at 7 good alternatives to create-react-app for starting a new ReactJS web development project. 

Subscribe to @nxdevtools for more awesome dev content!

#javascript #webdevelopment #reactjs 

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

- React Apps with Nx https://nx.dev/getting-started/react-standalone-tutorial
- Create React App Github Issue https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741
- 10 Rendering Patterns on the Web https://youtu.be/Dkx5ydvtpCA

🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- How to start react project as a beginner
- Getting started with Vite for React
- Build standalone react apps with Nx
- Getting started with Next.js
- Next.js vs Remix
- Gatsby vs Astro
2024-02-04T05:13:02.005Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c77a526f-6ae4-4b5b-9777-b963343cd1a1
8f37e5ba4b527c6489b58b5f95f1d5dfe0f482da944955e14ed347ef1e9db023
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
POV.
You're brand new to web development and you want to learn React JS.
Most of the tutorials and even Chat GPT tell you to use an official tool called create react app, but it's a trap.
If you use it, you already failed your React developer admissions test.
And as punishment, you now need to go learn Ember.
Js.
React.
Vloggers and YouTubers have been warning people against create react app for quite a while, but the discussion really heated up with this pull request from theo, suggesting the removal of this tool from the react docs altogether.
Dan from the react team responded with 5 different potential options to salvage this sinking ship.
But what's with all the hostility in the first place.
The problem with it is that it's slow in development, is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just tons of better options to get started with react in the modern ecosystem.
In today's video, we'll look at 7 ways to create a react app without create react app and look at trade offs so you can choose the optimal tool for the type of app you're building.
The absolute easiest way to experiment and start learning React or any front end framework is with an instant development environment like Stackblitz or CodeSandbox.
These are web based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things Rig Module Bundlers.
Like you literally just click a button, and now you're building a React app.
It also has the added benefit of being easily shareable, so you can access it from any computer.
This tech has come a long way in the last couple years, and you can even run back end code like Node.
Js and Next.
Js thanks to web containers.
Overall, this is a great Re Choice for learning and prototyping.
But if you're building a serious app, you'll need a dedicated build tool to manage it, and this is where decision making gets tricky.
The next tool we'll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or 2.
If you're already familiar with create react app, Vite is the closest thing to a one one replacement for it.
However, it's way faster in development because it builds your application on demand with tools like native ES modules and ES build that just scale way better for big regex.
And as of a few weeks ago, you can use swc instead of babel, which is a much faster Rust based compiler.
It uses rollup for module bundling as opposed to webpack and CRA.
It also has a TypeScript template out of the box and should support any modern libraries that you want to use.
What's important to understand though is that it provides a restarting point for building a single page application.
Unlike React rendering frameworks like Next.
Js, it doesn't deal with server side rendering or routing, at least out of the box.
Vite does have a low level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who really know what the hell they're doing and don't want to use a React rendering framework for whatever reason.
If you want to learn more about this, I have a video on my second channel beyond Fireship about 10 different rendering paradigms.
The bottom line is that Vite is a great option when building a single page application with React.
But there's another awesome tool called NX that can rebuild standalone React apps along with some extra features that you won't find in v.
N x is a tool known for building mono repos, but its CLI can also build plain React apps apps that have nothing to do with monorepos.
What's cool about it is that when you set up a new project, you have the option to choose your own bundler, like v to webpack, or bundlers of the future like rspack, which is a Rust based replacement of Webpack.
It's set up with TypeScript by default, and you can also choose a CSS preprocessor.
Its killer features, though, are all all about scaling complexity, like it does task caching and can even distribute that cache on the cloud, which means when another team member or continuous integration server on other side of the world builds the app, it'll use the computation in the cache instead of doing the same work over and over again.
And that can be a game changer for large teams.
But even if you're an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate more components and libraries.
Then from there, you can visualize how all your code is related with the nx graph command.
And finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI workflow.
Just choose a provider, then it writes all the boring error prone configuration for you.
That's Pretty cool, and NX can be used in other React frameworks as well.
But what if you want more than just a single page application?
Well, that's where React rendering frameworks, aka meta frameworks, come in, with the most popular option being Next JS.
The main difference when building a Next JS app is that you have a special directory, like pages or app, that can structure routing for a multipage application, and pages can be rendered on the server to improve search engine optimization and performance.
It also does server side data fetching with React server components to build full stack applications with minimal external dependencies.
Like here, we're using async await in a component that can run on the client and server.
And it provides tons of other features like image optimization and middleware that you likely want on a serious production project.
But Next Next is not the only game in town.
Remix is a similar framework that was recently acquired by Shopify that provides many of the same features, like file system based routing.
Next and Remix have been competing over the last couple years, which is awesome for React developers because now we have 2 excellent rendering frameworks to choose from.
The biggest difference is related to data fetching.
Next.
Js uses React server components, while Remix does not.
Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience.
At the time of this video, features like nested layouts and streaming are in beta in Next.
Js while they're fully stable in Remix.
So it's One step ahead of the game here when it comes to innovation, but yet another React rendering framework to think about is Gatsby.
It's not as hyped up as it used to be, but was just acquired a couple Raizo by Netlify.
Originally, it was popular for building content heavy, statically generated sites, but it also supports server side rendering just like Next.
Js and Remix.
The most striking difference is its focus on GraphQL to provide a data layer for your application.
It has this thing called Valhalla Content Hub that creates a single GraphQL API for all of your data sources that can be accessed with 0 configuration from a Gatsby front end.
If you're looking to migrate a content driven app to react, Gatsby has a lot more tools in place to make that process happen faster.
It'll even ask you which CMS you want to use during the initial setup and will also add features like markdown.
Although, another great option for a content heavy site is Astro.
Unlike all the other frameworks we've looked at, Astro is not exclusive to React.
It can also be used with Svelte, Vue, and Solid, or all these frameworks simultaneously.
React is most useful for building highly interactive UIs, but in most frameworks, React takes over the entire DOM.
Astro, on the other hand, has its own templating language for handling the majority of your static content, resend, then you can sprinkle in interactivity as needed, thanks to its islands architecture.
Not only does that simplify your code, but it also results huge performance gains because in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster.
It also just released version 2 point o that has a new feature called content collections, where actual markdown content adheres to a schema, allowing content heavy websites to scale up safely.
And now you have 7 different ways to create a react app without using create react app.
I'm not sure what the future holds for create react app, but if they go with option 5, it'll turn into run app launcher that'll point you to one of the frameworks I mentioned in this video.
Or maybe they'll go with my idea option 6, integrate generative AI into the tool where you just tell it what you're trying to build and it automatically generates the starter project for you.
If the React team doesn't do it, I think we'll see a tool like this by the end of the year.
And finally, I wanna thank NX for sponsoring Video.
They would have been on the list without a sponsorship, but they also have an awesome YouTube channel that you should definitely be subscribed to.
Thanks for watching, and I will see you in the next one.

Speaker 0: POV. You're brand new to web development and you want to learn React JS. Most of the tutorials and even Chat GPT tell you to use an official tool called create react app, but it's a trap. If you use it, you already failed your React developer admissions test. And as punishment, you now need to go learn Ember.

Js. React. Vloggers and YouTubers have been warning people against create react app for quite a while, but the discussion really heated up with this pull request from theo, suggesting the removal of this tool from the react docs altogether. Dan from the react team responded with 5 different potential options to salvage this sinking ship. But what's with all the hostility in the first place.

The problem with it is that it's slow in development, is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just tons of better options to get started with react in the modern ecosystem. In today's video, we'll look at 7 ways to create a react app without create react app and look at trade offs so you can choose the optimal tool for the type of app you're building. The absolute easiest way to experiment and start learning React or any front end framework is with an instant development environment like Stackblitz or CodeSandbox. These are web based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things Rig Module Bundlers. Like you literally just click a button, and now you're building a React app.

It also has the added benefit of being easily shareable, so you can access it from any computer. This tech has come a long way in the last couple years, and you can even run back end code like Node. Js and Next. Js thanks to web containers. Overall, this is a great Re Choice for learning and prototyping.

But if you're building a serious app, you'll need a dedicated build tool to manage it, and this is where decision making gets tricky. The next tool we'll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or 2. If you're already familiar with create react app, Vite is the closest thing to a one one replacement for it. However, it's way faster in development because it builds your application on demand with tools like native ES modules and ES build that just scale way better for big regex. And as of a few weeks ago, you can use swc instead of babel, which is a much faster Rust based compiler.

It uses rollup for module bundling as opposed to webpack and CRA. It also has a TypeScript template out of the box and should support any modern libraries that you want to use. What's important to understand though is that it provides a restarting point for building a single page application. Unlike React rendering frameworks like Next. Js, it doesn't deal with server side rendering or routing, at least out of the box.

Vite does have a low level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who really know what the hell they're doing and don't want to use a React rendering framework for whatever reason. If you want to learn more about this, I have a video on my second channel beyond Fireship about 10 different rendering paradigms. The bottom line is that Vite is a great option when building a single page application with React. But there's another awesome tool called NX that can rebuild standalone React apps along with some extra features that you won't find in v. N x is a tool known for building mono repos, but its CLI can also build plain React apps apps that have nothing to do with monorepos.

What's cool about it is that when you set up a new project, you have the option to choose your own bundler, like v to webpack, or bundlers of the future like rspack, which is a Rust based replacement of Webpack. It's set up with TypeScript by default, and you can also choose a CSS preprocessor. Its killer features, though, are all all about scaling complexity, like it does task caching and can even distribute that cache on the cloud, which means when another team member or continuous integration server on other side of the world builds the app, it'll use the computation in the cache instead of doing the same work over and over again. And that can be a game changer for large teams. But even if you're an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate more components and libraries.

Then from there, you can visualize how all your code is related with the nx graph command. And finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI workflow. Just choose a provider, then it writes all the boring error prone configuration for you. That's Pretty cool, and NX can be used in other React frameworks as well. But what if you want more than just a single page application?

Well, that's where React rendering frameworks, aka meta frameworks, come in, with the most popular option being Next JS. The main difference when building a Next JS app is that you have a special directory, like pages or app, that can structure routing for a multipage application, and pages can be rendered on the server to improve search engine optimization and performance. It also does server side data fetching with React server components to build full stack applications with minimal external dependencies. Like here, we're using async await in a component that can run on the client and server. And it provides tons of other features like image optimization and middleware that you likely want on a serious production project.

But Next Next is not the only game in town. Remix is a similar framework that was recently acquired by Shopify that provides many of the same features, like file system based routing. Next and Remix have been competing over the last couple years, which is awesome for React developers because now we have 2 excellent rendering frameworks to choose from. The biggest difference is related to data fetching. Next.

Js uses React server components, while Remix does not. Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience. At the time of this video, features like nested layouts and streaming are in beta in Next. Js while they're fully stable in Remix. So it's One step ahead of the game here when it comes to innovation, but yet another React rendering framework to think about is Gatsby.

It's not as hyped up as it used to be, but was just acquired a couple Raizo by Netlify. Originally, it was popular for building content heavy, statically generated sites, but it also supports server side rendering just like Next. Js and Remix. The most striking difference is its focus on GraphQL to provide a data layer for your application. It has this thing called Valhalla Content Hub that creates a single GraphQL API for all of your data sources that can be accessed with 0 configuration from a Gatsby front end.

If you're looking to migrate a content driven app to react, Gatsby has a lot more tools in place to make that process happen faster. It'll even ask you which CMS you want to use during the initial setup and will also add features like markdown. Although, another great option for a content heavy site is Astro. Unlike all the other frameworks we've looked at, Astro is not exclusive to React. It can also be used with Svelte, Vue, and Solid, or all these frameworks simultaneously.

React is most useful for building highly interactive UIs, but in most frameworks, React takes over the entire DOM. Astro, on the other hand, has its own templating language for handling the majority of your static content, resend, then you can sprinkle in interactivity as needed, thanks to its islands architecture. Not only does that simplify your code, but it also results huge performance gains because in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster. It also just released version 2 point o that has a new feature called content collections, where actual markdown content adheres to a schema, allowing content heavy websites to scale up safely. And now you have 7 different ways to create a react app without using create react app.

I'm not sure what the future holds for create react app, but if they go with option 5, it'll turn into run app launcher that'll point you to one of the frameworks I mentioned in this video. Or maybe they'll go with my idea option 6, integrate generative AI into the tool where you just tell it what you're trying to build and it automatically generates the starter project for you. If the React team doesn't do it, I think we'll see a tool like this by the end of the year. And finally, I wanna thank NX for sponsoring Video. They would have been on the list without a sponsorship, but they also have an awesome YouTube channel that you should definitely be subscribed to.

Thanks for watching, and I will see you in the next one.
POV. You're brand new to web development and you want to learn React JS. Most of the tutorials and even Chat GPT tell you to use an official tool called create react app, but it's a trap. If you use it, you already failed your React developer admissions test. And as punishment, you now need to go learn Ember.
software development
Js. React. Vloggers and YouTubers have been warning people against create react app for quite a while, but the discussion really heated up with this pull request from theo, suggesting the removal of this tool from the react docs altogether. Dan from the react team responded with 5 different potential options to salvage this sinking ship. But what's with all the hostility in the first place. The problem with it is that it's slow in development, is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just tons of better options to get started with react in the modern ecosystem. In today's video, we'll look at 7 ways to create a react app without create react app and look at trade offs so you can choose the optimal tool for the type of app you're building.
The absolute easiest way to experiment and start learning React or any front end framework is with an instant development environment like Stackblitz or CodeSandbox. These are web based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things Rig Module Bundlers. Like you literally just click a button, and now you're building a React app. It also has the added benefit of being easily shareable, so you can access it from any computer. This tech has come a long way in the last couple years, and you can even run back end code like Node. Js and Next. Js thanks to web containers. Overall, this is a great Re Choice for learning and prototyping. But if you're building a serious app, you'll need a dedicated build tool to manage it, and this is where decision making gets tricky. The next tool we'll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or 2.
software development
software
programming
technology
If you're already familiar with create react app, Vite is the closest thing to a one one replacement for it. However, it's way faster in development because it builds your application on demand with tools like native ES modules and ES build that just scale way better for big regex. And as of a few weeks ago, you can use swc instead of babel, which is a much faster Rust based compiler. It uses rollup for module bundling as opposed to webpack and CRA. It also has a TypeScript template out of the box and should support any modern libraries that you want to use.
software development
software
programming
What's important to understand though is that it provides a restarting point for building a single page application. Unlike React rendering frameworks like Next. Js, it doesn't deal with server side rendering or routing, at least out of the box. Vite does have a low level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who really know what the hell they're doing and don't want to use a React rendering framework for whatever reason.
If you want to learn more about this, I have a video on my second channel beyond Fireship about 10 different rendering paradigms. The bottom line is that Vite is a great option when building a single page application with React. But there's another awesome tool called NX that can rebuild standalone React apps along with some extra features that you won't find in v.
graphic design
N x is a tool known for building mono repos, but its CLI can also build plain React apps apps that have nothing to do with monorepos. What's cool about it is that when you set up a new project, you have the option to choose your own bundler, like v to webpack, or bundlers of the future like rspack, which is a Rust based replacement of Webpack. It's set up with TypeScript by default, and you can also choose a CSS preprocessor. Its killer features, though, are all all about scaling complexity, like it does task caching and can even distribute that cache on the cloud, which means when another team member or continuous integration server on other side of the world builds the app, it'll use the computation in the cache instead of doing the same work over and over again.
And that can be a game changer for large teams. But even if you're an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate more components and libraries. Then from there, you can visualize how all your code is related with the nx graph command. And finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI workflow. Just choose a provider, then it writes all the boring error prone configuration for you.
programming
That's Pretty cool, and NX can be used in other React frameworks as well. But what if you want more than just a single page application? Well, that's where React rendering frameworks, aka meta frameworks, come in, with the most popular option being Next JS. The main difference when building a Next JS app is that you have a special directory, like pages or app, that can structure routing for a multipage application, and pages can be rendered on the server to improve search engine optimization and performance. It also does server side data fetching with React server components to build full stack applications with minimal external dependencies. Like here, we're using async await in a component that can run on the client and server.
And it provides tons of other features like image optimization and middleware that you likely want on a serious production project. But Next Next is not the only game in town. Remix is a similar framework that was recently acquired by Shopify that provides many of the same features, like file system based routing. Next and Remix have been competing over the last couple years, which is awesome for React developers because now we have 2 excellent rendering frameworks to choose from.
software
software development
youtube
The biggest difference is related to data fetching. Next. Js uses React server components, while Remix does not. Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience.
At the time of this video, features like nested layouts and streaming are in beta in Next. Js while they're fully stable in Remix. So it's One step ahead of the game here when it comes to innovation, but yet another React rendering framework to think about is Gatsby. It's not as hyped up as it used to be, but was just acquired a couple Raizo by Netlify.
animation
video gaming
Originally, it was popular for building content heavy, statically generated sites, but it also supports server side rendering just like Next. Js and Remix. The most striking difference is its focus on GraphQL to provide a data layer for your application. It has this thing called Valhalla Content Hub that creates a single GraphQL API for all of your data sources that can be accessed with 0 configuration from a Gatsby front end. If you're looking to migrate a content driven app to react, Gatsby has a lot more tools in place to make that process happen faster.
It'll even ask you which CMS you want to use during the initial setup and will also add features like markdown. Although, another great option for a content heavy site is Astro. Unlike all the other frameworks we've looked at, Astro is not exclusive to React. It can also be used with Svelte, Vue, and Solid, or all these frameworks simultaneously. React is most useful for building highly interactive UIs, but in most frameworks, React takes over the entire DOM. Astro, on the other hand, has its own templating language for handling the majority of your static content, resend, then you can sprinkle in interactivity as needed, thanks to its islands architecture.
astrology
Not only does that simplify your code, but it also results huge performance gains because in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster. It also just released version 2 point o that has a new feature called content collections, where actual markdown content adheres to a schema, allowing content heavy websites to scale up safely. And now you have 7 different ways to create a react app without using create react app. I'm not sure what the future holds for create react app, but if they go with option 5, it'll turn into run app launcher that'll point you to one of the frameworks I mentioned in this video.
Or maybe they'll go with my idea option 6, integrate generative AI into the tool where you just tell it what you're trying to build and it automatically generates the starter project for you. If the React team doesn't do it, I think we'll see a tool like this by the end of the year.
artificial intelligence
software development
robotics
software
And finally, I wanna thank NX for sponsoring Video.
They would have been on the list without a sponsorship, but they also have an awesome YouTube channel that you should definitely be subscribed to. Thanks for watching, and I will see you in the next one.
youtube
POV. You're brand new to web development and you want to learn React JS. Most of the tutorials and even Chat GPT tell you to use an official tool called create react app, but it's a trap. If you use it, you already failed your React developer admissions test. And as punishment, you now need to go learn Ember. Js. React. Vloggers and YouTubers have been warning people against create react app for quite a while, but the discussion really heated up with this pull request from theo, suggesting the removal of this tool from the react docs altogether. Dan from the react team responded with 5 different potential options to salvage this sinking ship. But what's with all the hostility in the first place. The problem with it is that it's slow in development, is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just tons of better options to get started with react in the modern ecosystem. In today's video, we'll look at 7 ways to create a react app without create react app and look at trade offs so you can choose the optimal tool for the type of app you're building. The absolute easiest way to experiment and start learning React or any front end framework is with an instant development environment like Stackblitz or CodeSandbox. These are web based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things Rig Module Bundlers. Like you literally just click a button, and now you're building a React app. It also has the added benefit of being easily shareable, so you can access it from any computer. This tech has come a long way in the last couple years, and you can even run back end code like Node. Js and Next. Js thanks to web containers. Overall, this is a great Re Choice for learning and prototyping. But if you're building a serious app, you'll need a dedicated build tool to manage it, and this is where decision making gets tricky. The next tool we'll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or 2. If you're already familiar with create react app, Vite is the closest thing to a one one replacement for it. However, it's way faster in development because it builds your application on demand with tools like native ES modules and ES build that just scale way better for big regex. And as of a few weeks ago, you can use swc instead of babel, which is a much faster Rust based compiler. It uses rollup for module bundling as opposed to webpack and CRA. It also has a TypeScript template out of the box and should support any modern libraries that you want to use. What's important to understand though is that it provides a restarting point for building a single page application. Unlike React rendering frameworks like Next. Js, it doesn't deal with server side rendering or routing, at least out of the box. Vite does have a low level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who really know what the hell they're doing and don't want to use a React rendering framework for whatever reason. If you want to learn more about this, I have a video on my second channel beyond Fireship about 10 different rendering paradigms. The bottom line is that Vite is a great option when building a single page application with React. But there's another awesome tool called NX that can rebuild standalone React apps along with some extra features that you won't find in v. N x is a tool known for building mono repos, but its CLI can also build plain React apps apps that have nothing to do with monorepos. What's cool about it is that when you set up a new project, you have the option to choose your own bundler, like v to webpack, or bundlers of the future like rspack, which is a Rust based replacement of Webpack. It's set up with TypeScript by default, and you can also choose a CSS preprocessor. Its killer features, though, are all all about scaling complexity, like it does task caching and can even distribute that cache on the cloud, which means when another team member or continuous integration server on other side of the world builds the app, it'll use the computation in the cache instead of doing the same work over and over again. And that can be a game changer for large teams. But even if you're an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate more components and libraries. Then from there, you can visualize how all your code is related with the nx graph command. And finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI workflow. Just choose a provider, then it writes all the boring error prone configuration for you. That's Pretty cool, and NX can be used in other React frameworks as well. But what if you want more than just a single page application? Well, that's where React rendering frameworks, aka meta frameworks, come in, with the most popular option being Next JS. The main difference when building a Next JS app is that you have a special directory, like pages or app, that can structure routing for a multipage application, and pages can be rendered on the server to improve search engine optimization and performance. It also does server side data fetching with React server components to build full stack applications with minimal external dependencies. Like here, we're using async await in a component that can run on the client and server. And it provides tons of other features like image optimization and middleware that you likely want on a serious production project. But Next Next is not the only game in town. Remix is a similar framework that was recently acquired by Shopify that provides many of the same features, like file system based routing. Next and Remix have been competing over the last couple years, which is awesome for React developers because now we have 2 excellent rendering frameworks to choose from. The biggest difference is related to data fetching. Next. Js uses React server components, while Remix does not. Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience. At the time of this video, features like nested layouts and streaming are in beta in Next. Js while they're fully stable in Remix. So it's One step ahead of the game here when it comes to innovation, but yet another React rendering framework to think about is Gatsby. It's not as hyped up as it used to be, but was just acquired a couple Raizo by Netlify. Originally, it was popular for building content heavy, statically generated sites, but it also supports server side rendering just like Next. Js and Remix. The most striking difference is its focus on GraphQL to provide a data layer for your application. It has this thing called Valhalla Content Hub that creates a single GraphQL API for all of your data sources that can be accessed with 0 configuration from a Gatsby front end. If you're looking to migrate a content driven app to react, Gatsby has a lot more tools in place to make that process happen faster. It'll even ask you which CMS you want to use during the initial setup and will also add features like markdown. Although, another great option for a content heavy site is Astro. Unlike all the other frameworks we've looked at, Astro is not exclusive to React. It can also be used with Svelte, Vue, and Solid, or all these frameworks simultaneously. React is most useful for building highly interactive UIs, but in most frameworks, React takes over the entire DOM. Astro, on the other hand, has its own templating language for handling the majority of your static content, resend, then you can sprinkle in interactivity as needed, thanks to its islands architecture. Not only does that simplify your code, but it also results huge performance gains because in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster. It also just released version 2 point o that has a new feature called content collections, where actual markdown content adheres to a schema, allowing content heavy websites to scale up safely. And now you have 7 different ways to create a react app without using create react app. I'm not sure what the future holds for create react app, but if they go with option 5, it'll turn into run app launcher that'll point you to one of the frameworks I mentioned in this video. Or maybe they'll go with my idea option 6, integrate generative AI into the tool where you just tell it what you're trying to build and it automatically generates the starter project for you. If the React team doesn't do it, I think we'll see a tool like this by the end of the year. And finally, I wanna thank NX for sponsoring Video. They would have been on the list without a sponsorship, but they also have an awesome YouTube channel that you should definitely be subscribed to. Thanks for watching, and I will see you in the next one.
POV.
pov
You're
you're
brand
brand
new
new
to
to
web
web
development
development
and
and
you
you
want
want
to
to
learn
learn
React
react
JS.
js
Most
most
of
of
the
the
tutorials
tutorials
and
and
even
even
Chat
chat
GPT
gpt
tell
tell
you
you
to
to
use
use
an
an
official
official
tool
tool
called
called
create
create
react
react
app,
app
but
but
it's
it's
a
a
trap.
trap
If
if
you
you
use
use
it,
it
you
you
already
already
failed
failed
your
your
React
react
developer
developer
admissions
admissions
test.
test
And
and
as
as
punishment,
punishment
you
you
now
now
need
need
to
to
go
go
learn
learn
Ember.
ember
Js.
js
React.
react
Vloggers
vloggers
and
and
YouTubers
youtubers
have
have
been
been
warning
warning
people
people
against
against
create
create
react
react
app
app
for
for
quite
quite
a
a
while,
while
but
but
the
the
discussion
discussion
really
really
heated
heated
up
up
with
with
this
this
pull
pull
request
request
from
from
theo,
theo
suggesting
suggesting
the
the
removal
removal
of
of
this
this
tool
tool
from
from
the
the
react
react
docs
docs
altogether.
altogether
Dan
dan
from
from
the
the
react
react
team
team
responded
responded
with
with
5
5
different
different
potential
potential
options
options
to
to
salvage
salvage
this
this
sinking
sinking
ship.
ship
But
but
what's
what's
with
with
all
all
the
the
hostility
hostility
in
in
the
the
first
first
place.
place
The
the
problem
problem
with
with
it
it
is
is
that
that
it's
it's
slow
slow
in
in
development,
development
is
is
a
a
pain
pain
to
to
set
set
up
up
with
with
popular
popular
tools
tools
like
like
Tailwind
tailwind
and
and
TypeScript,
typescript
and
and
most
most
importantly,
importantly
there
there
are
are
just
just
tons
tons
of
of
better
better
options
options
to
to
get
get
started
started
with
with
react
react
in
in
the
the
modern
modern
ecosystem.
ecosystem
In
in
today's
today's
video,
video
we'll
we'll
look
look
at
at
7
7
ways
ways
to
to
create
create
a
a
react
react
app
app
without
without
create
create
react
react
app
app
and
and
look
look
at
at
trade
trade
offs
offs
so
so
you
you
can
can
choose
choose
the
the
optimal
optimal
tool
tool
for
for
the
the
type
type
of
of
app
app
you're
you're
building.
building
The
the
absolute
absolute
easiest
easiest
way
way
to
to
experiment
experiment
and
and
start
start
learning
learning
React
react
or
or
any
any
front
front
end
end
framework
framework
is
is
with
with
an
an
instant
instant
development
development
environment
environment
like
like
Stackblitz
stackblitz
or
or
CodeSandbox.
codesandbox
These
these
are
are
web
web
based
based
tools
tools
that
that
allow
allow
you
you
to
to
run
run
React
react
in
in
the
the
browser
browser
without
without
needing
needing
to
to
manually
manually
install
install
a
a
bunch
bunch
of
of
dependencies
dependencies
on
on
your
your
system
system
and
and
deal
deal
with
with
things
things
Rig
rig
Module
module
Bundlers.
bundlers
Like
like
you
you
literally
literally
just
just
click
click
a
a
button,
button
and
and
now
now
you're
you're
building
building
a
a
React
react
app.
app
It
it
also
also
has
has
the
the
added
added
benefit
benefit
of
of
being
being
easily
easily
shareable,
shareable
so
so
you
you
can
can
access
access
it
it
from
from
any
any
computer.
computer
This
this
tech
tech
has
has
come
come
a
a
long
long
way
way
in
in
the
the
last
last
couple
couple
years,
years
and
and
you
you
can
can
even
even
run
run
back
back
end
end
code
code
like
like
Node.
node
Js
js
and
and
Next.
next
Js
js
thanks
thanks
to
to
web
web
containers.
containers
Overall,
overall
this
this
is
is
a
a
great
great
Re
re
Choice
choice
for
for
learning
learning
and
and
prototyping.
prototyping
But
but
if
if
you're
you're
building
building
a
a
serious
serious
app,
app
you'll
you'll
need
need
a
a
dedicated
dedicated
build
build
tool
tool
to
to
manage
manage
it,
it
and
and
this
this
is
is
where
where
decision
decision
making
making
gets
gets
tricky.
tricky
The
the
next
next
tool
tool
we'll
we'll
look
look
at
at
is
is
Vite,
vite
which
which
has
has
enjoyed
enjoyed
a
a
meteoric
meteoric
rise
rise
to
to
the
the
top
top
of
of
the
the
JavaScript
javascript
build
build
tool
tool
charts
charts
over
over
the
the
last
last
year
year
or
or
2.
2
If
if
you're
you're
already
already
familiar
familiar
with
with
create
create
react
react
app,
app
Vite
vite
is
is
the
the
closest
closest
thing
thing
to
to
a
a
one
one
one
one
replacement
replacement
for
for
it.
it
However,
however
it's
it's
way
way
faster
faster
in
in
development
development
because
because
it
it
builds
builds
your
your
application
application
on
on
demand
demand
with
with
tools
tools
like
like
native
native
ES
es
modules
modules
and
and
ES
es
build
build
that
that
just
just
scale
scale
way
way
better
better
for
for
big
big
regex.
regex
And
and
as
as
of
of
a
a
few
few
weeks
weeks
ago,
ago
you
you
can
can
use
use
swc
swc
instead
instead
of
of
babel,
babel
which
which
is
is
a
a
much
much
faster
faster
Rust
rust
based
based
compiler.
compiler
It
it
uses
uses
rollup
rollup
for
for
module
module
bundling
bundling
as
as
opposed
opposed
to
to
webpack
webpack
and
and
CRA.
cra
It
it
also
also
has
has
a
a
TypeScript
typescript
template
template
out
out
of
of
the
the
box
box
and
and
should
should
support
support
any
any
modern
modern
libraries
libraries
that
that
you
you
want
want
to
to
use.
use
What's
what's
important
important
to
to
understand
understand
though
though
is
is
that
that
it
it
provides
provides
a
a
restarting
restarting
point
point
for
for
building
building
a
a
single
single
page
page
application.
application
Unlike
unlike
React
react
rendering
rendering
frameworks
frameworks
like
like
Next.
next
Js,
js
it
it
doesn't
doesn't
deal
deal
with
with
server
server
side
side
rendering
rendering
or
or
routing,
routing
at
at
least
least
out
out
of
of
the
the
box.
box
Vite
vite
does
does
have
have
a
a
low
low
level
level
API
api
for
for
server
server
rendering,
rendering
and
and
there
there
are
are
plugins
plugins
that
that
support
support
it,
it
but
but
this
this
would
would
be
be
a
a
more
more
advanced
advanced
setup
setup
for
for
developers
developers
who
who
really
really
know
know
what
what
the
the
hell
hell
they're
they're
doing
doing
and
and
don't
don't
want
want
to
to
use
use
a
a
React
react
rendering
rendering
framework
framework
for
for
whatever
whatever
reason.
reason
If
if
you
you
want
want
to
to
learn
learn
more
more
about
about
this,
this
I
i
have
have
a
a
video
video
on
on
my
my
second
second
channel
channel
beyond
beyond
Fireship
fireship
about
about
10
10
different
different
rendering
rendering
paradigms.
paradigms
The
the
bottom
bottom
line
line
is
is
that
that
Vite
vite
is
is
a
a
great
great
option
option
when
when
building
building
a
a
single
single
page
page
application
application
with
with
React.
react
But
but
there's
there's
another
another
awesome
awesome
tool
tool
called
called
NX
nx
that
that
can
can
rebuild
rebuild
standalone
standalone
React
react
apps
apps
along
along
with
with
some
some
extra
extra
features
features
that
that
you
you
won't
won't
find
find
in
in
v.
v
N
n
x
x
is
is
a
a
tool
tool
known
known
for
for
building
building
mono
mono
repos,
repos
but
but
its
its
CLI
cli
can
can
also
also
build
build
plain
plain
React
react
apps
apps
apps
apps
that
that
have
have
nothing
nothing
to
to
do
do
with
with
monorepos.
monorepos
What's
what's
cool
cool
about
about
it
it
is
is
that
that
when
when
you
you
set
set
up
up
a
a
new
new
project,
project
you
you
have
have
the
the
option
option
to
to
choose
choose
your
your
own
own
bundler,
bundler
like
like
v
v
to
to
webpack,
webpack
or
or
bundlers
bundlers
of
of
the
the
future
future
like
like
rspack,
rspack
which
which
is
is
a
a
Rust
rust
based
based
replacement
replacement
of
of
Webpack.
webpack
It's
it's
set
set
up
up
with
with
TypeScript
typescript
by
by
default,
default
and
and
you
you
can
can
also
also
choose
choose
a
a
CSS
css
preprocessor.
preprocessor
Its
its
killer
killer
features,
features
though,
though
are
are
all
all
all
all
about
about
scaling
scaling
complexity,
complexity
like
like
it
it
does
does
task
task
caching
caching
and
and
can
can
even
even
distribute
distribute
that
that
cache
cache
on
on
the
the
cloud,
cloud
which
which
means
means
when
when
another
another
team
team
member
member
or
or
continuous
continuous
integration
integration
server
server
on
on
other
other
side
side
of
of
the
the
world
world
builds
builds
the
the
app,
app
it'll
it'll
use
use
the
the
computation
computation
in
in
the
the
cache
cache
instead
instead
of
of
doing
doing
the
the
same
same
work
work
over
over
and
and
over
over
again.
again
And
and
that
that
can
can
be
be
a
a
game
game
changer
changer
for
for
large
large
teams.
teams
But
but
even
even
if
if
you're
you're
an
an
independent
independent
developer,
developer
NX
nx
has
has
other
other
useful
useful
tools
tools
like
like
generators
generators
that
that
can
can
automatically
automatically
add
add
dependencies
dependencies
like
like
Tailwind
tailwind
or
or
scaffold
scaffold
out
out
the
the
boilerplate
boilerplate
more
more
components
components
and
and
libraries.
libraries
Then
then
from
from
there,
there
you
you
can
can
visualize
visualize
how
how
all
all
your
your
code
code
is
is
related
related
with
with
the
the
nx
nx
graph
graph
command.
command
And
and
finally,
finally
when
when
it
it
comes
comes
time
time
to
to
automate
automate
with
with
continuous
continuous
integration
integration
and
and
delivery,
delivery
you
you
can
can
easily
easily
make
make
that
that
happen
happen
by
by
generating
generating
a
a
CI
ci
workflow.
workflow
Just
just
choose
choose
a
a
provider,
provider
then
then
it
it
writes
writes
all
all
the
the
boring
boring
error
error
prone
prone
configuration
configuration
for
for
you.
you
That's
that's
Pretty
pretty
cool,
cool
and
and
NX
nx
can
can
be
be
used
used
in
in
other
other
React
react
frameworks
frameworks
as
as
well.
well
But
but
what
what
if
if
you
you
want
want
more
more
than
than
just
just
a
a
single
single
page
page
application?
application
Well,
well
that's
that's
where
where
React
react
rendering
rendering
frameworks,
frameworks
aka
aka
meta
meta
frameworks,
frameworks
come
come
in,
in
with
with
the
the
most
most
popular
popular
option
option
being
being
Next
next
JS.
js
The
the
main
main
difference
difference
when
when
building
building
a
a
Next
next
JS
js
app
app
is
is
that
that
you
you
have
have
a
a
special
special
directory,
directory
like
like
pages
pages
or
or
app,
app
that
that
can
can
structure
structure
routing
routing
for
for
a
a
multipage
multipage
application,
application
and
and
pages
pages
can
can
be
be
rendered
rendered
on
on
the
the
server
server
to
to
improve
improve
search
search
engine
engine
optimization
optimization
and
and
performance.
performance
It
it
also
also
does
does
server
server
side
side
data
data
fetching
fetching
with
with
React
react
server
server
components
components
to
to
build
build
full
full
stack
stack
applications
applications
with
with
minimal
minimal
external
external
dependencies.
dependencies
Like
like
here,
here
we're
we're
using
using
async
async
await
await
in
in
a
a
component
component
that
that
can
can
run
run
on
on
the
the
client
client
and
and
server.
server
And
and
it
it
provides
provides
tons
tons
of
of
other
other
features
features
like
like
image
image
optimization
optimization
and
and
middleware
middleware
that
that
you
you
likely
likely
want
want
on
on
a
a
serious
serious
production
production
project.
project
But
but
Next
next
Next
next
is
is
not
not
the
the
only
only
game
game
in
in
town.
town
Remix
remix
is
is
a
a
similar
similar
framework
framework
that
that
was
was
recently
recently
acquired
acquired
by
by
Shopify
shopify
that
that
provides
provides
many
many
of
of
the
the
same
same
features,
features
like
like
file
file
system
system
based
based
routing.
routing
Next
next
and
and
Remix
remix
have
have
been
been
competing
competing
over
over
the
the
last
last
couple
couple
years,
years
which
which
is
is
awesome
awesome
for
for
React
react
developers
developers
because
because
now
now
we
we
have
have
2
2
excellent
excellent
rendering
rendering
frameworks
frameworks
to
to
choose
choose
from.
from
The
the
biggest
biggest
difference
difference
is
is
related
related
to
to
data
data
fetching.
fetching
Next.
next
Js
js
uses
uses
React
react
server
server
components,
components
while
while
Remix
remix
does
does
not.
not
Both
both
frameworks
frameworks
solve
solve
many
many
of
of
the
the
same
same
problems,
problems
but
but
there
there
are
are
many
many
subtle
subtle
differences
differences
in
in
the
the
developer
developer
experience.
experience
At
at
the
the
time
time
of
of
this
this
video,
video
features
features
like
like
nested
nested
layouts
layouts
and
and
streaming
streaming
are
are
in
in
beta
beta
in
in
Next.
next
Js
js
while
while
they're
they're
fully
fully
stable
stable
in
in
Remix.
remix
So
so
it's
it's
One
one
step
step
ahead
ahead
of
of
the
the
game
game
here
here
when
when
it
it
comes
comes
to
to
innovation,
innovation
but
but
yet
yet
another
another
React
react
rendering
rendering
framework
framework
to
to
think
think
about
about
is
is
Gatsby.
gatsby
It's
it's
not
not
as
as
hyped
hyped
up
up
as
as
it
it
used
used
to
to
be,
be
but
but
was
was
just
just
acquired
acquired
a
a
couple
couple
Raizo
raizo
by
by
Netlify.
netlify
Originally,
originally
it
it
was
was
popular
popular
for
for
building
building
content
content
heavy,
heavy
statically
statically
generated
generated
sites,
sites
but
but
it
it
also
also
supports
supports
server
server
side
side
rendering
rendering
just
just
like
like
Next.
next
Js
js
and
and
Remix.
remix
The
the
most
most
striking
striking
difference
difference
is
is
its
its
focus
focus
on
on
GraphQL
graphql
to
to
provide
provide
a
a
data
data
layer
layer
for
for
your
your
application.
application
It
it
has
has
this
this
thing
thing
called
called
Valhalla
valhalla
Content
content
Hub
hub
that
that
creates
creates
a
a
single
single
GraphQL
graphql
API
api
for
for
all
all
of
of
your
your
data
data
sources
sources
that
that
can
can
be
be
accessed
accessed
with
with
0
0
configuration
configuration
from
from
a
a
Gatsby
gatsby
front
front
end.
end
If
if
you're
you're
looking
looking
to
to
migrate
migrate
a
a
content
content
driven
driven
app
app
to
to
react,
react
Gatsby
gatsby
has
has
a
a
lot
lot
more
more
tools
tools
in
in
place
place
to
to
make
make
that
that
process
process
happen
happen
faster.
faster
It'll
it'll
even
even
ask
ask
you
you
which
which
CMS
cms
you
you
want
want
to
to
use
use
during
during
the
the
initial
initial
setup
setup
and
and
will
will
also
also
add
add
features
features
like
like
markdown.
markdown
Although,
although
another
another
great
great
option
option
for
for
a
a
content
content
heavy
heavy
site
site
is
is
Astro.
astro
Unlike
unlike
all
all
the
the
other
other
frameworks
frameworks
we've
we've
looked
looked
at,
at
Astro
astro
is
is
not
not
exclusive
exclusive
to
to
React.
react
It
it
can
can
also
also
be
be
used
used
with
with
Svelte,
svelte
Vue,
vue
and
and
Solid,
solid
or
or
all
all
these
these
frameworks
frameworks
simultaneously.
simultaneously
React
react
is
is
most
most
useful
useful
for
for
building
building
highly
highly
interactive
interactive
UIs,
uis
but
but
in
in
most
most
frameworks,
frameworks
React
react
takes
takes
over
over
the
the
entire
entire
DOM.
dom
Astro,
astro
on
on
the
the
other
other
hand,
hand
has
has
its
its
own
own
templating
templating
language
language
for
for
handling
handling
the
the
majority
majority
of
of
your
your
static
static
content,
content
resend,
resend
then
then
you
you
can
can
sprinkle
sprinkle
in
in
interactivity
interactivity
as
as
needed,
needed
thanks
thanks
to
to
its
its
islands
islands
architecture.
architecture
Not
not
only
only
does
does
that
that
simplify
simplify
your
your
code,
code
but
but
it
it
also
also
results
results
huge
huge
performance
performance
gains
gains
because
because
in
in
many
many
cases,
cases
it
it
eliminates
eliminates
the
the
need
need
to
to
ship
ship
JavaScript
javascript
to
to
the
the
browser,
browser
making
making
your
your
website
website
load
load
faster.
faster
It
it
also
also
just
just
released
released
version
version
2
2
point
point
o
o
that
that
has
has
a
a
new
new
feature
feature
called
called
content
content
collections,
collections
where
where
actual
actual
markdown
markdown
content
content
adheres
adheres
to
to
a
a
schema,
schema
allowing
allowing
content
content
heavy
heavy
websites
websites
to
to
scale
scale
up
up
safely.
safely
And
and
now
now
you
you
have
have
7
7
different
different
ways
ways
to
to
create
create
a
a
react
react
app
app
without
without
using
using
create
create
react
react
app.
app
I'm
i'm
not
not
sure
sure
what
what
the
the
future
future
holds
holds
for
for
create
create
react
react
app,
app
but
but
if
if
they
they
go
go
with
with
option
option
5,
5
it'll
it'll
turn
turn
into
into
run
run
app
app
launcher
launcher
that'll
that'll
point
point
you
you
to
to
one
one
of
of
the
the
frameworks
frameworks
I
i
mentioned
mentioned
in
in
this
this
video.
video
Or
or
maybe
maybe
they'll
they'll
go
go
with
with
my
my
idea
idea
option
option
6,
6
integrate
integrate
generative
generative
AI
ai
into
into
the
the
tool
tool
where
where
you
you
just
just
tell
tell
it
it
what
what
you're
you're
trying
trying
to
to
build
build
and
and
it
it
automatically
automatically
generates
generates
the
the
starter
starter
project
project
for
for
you.
you
If
if
the
the
React
react
team
team
doesn't
doesn't
do
do
it,
it
I
i
think
think
we'll
we'll
see
see
a
a
tool
tool
like
like
this
this
by
by
the
the
end
end
of
of
the
the
year.
year
And
and
finally,
finally
I
i
wanna
wanna
thank
thank
NX
nx
for
for
sponsoring
sponsoring
Video.
video
They
they
would
would
have
have
been
been
on
on
the
the
list
list
without
without
a
a
sponsorship,
sponsorship
but
but
they
they
also
also
have
have
an
an
awesome
awesome
YouTube
youtube
channel
channel
that
that
you
you
should
should
definitely
definitely
be
be
subscribed
subscribed
to.
to
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss various React frameworks, including Vite, NX, and Remix, and their benefits for building single page applications. They stress the importance of choosing a tool for the type of app and emphasize the importance of scaling complexity. The speaker also mentions Gatsby and Astro as popular frameworks, but thanks NX for sponsoring Video. They end with a mention of a new video about creating react app without using create react app.
7 better ways to create a React app
POV. You're brand new to web development and you want to learn React JS. Most of the tutorials and even Chat GPT tell you to use an official tool called create react app, but it's a trap. If you use it, you already failed your React developer admissions test. And as punishment, you now need to go learn Ember. Js. React. Vloggers and YouTubers have been warning people against create react app for quite a while, but the discussion really heated up with this pull request from theo, suggesting the removal of this tool from the react docs altogether. Dan from the react team responded with 5 different potential options to salvage this sinking ship. But what's with all the hostility in the first place. The problem with it is that it's slow in development, is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just tons of better options to get started with react in the modern ecosystem. In today's video, we'll look at 7 ways to create a react app without create react app and look at trade offs so you can choose the optimal tool for the type of app you're building. The absolute easiest way to experiment and start learning React or any front end framework is with an instant development environment like Stackblitz or CodeSandbox. These are web based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things Rig Module Bundlers. Like you literally just click a button, and now you're building a React app. It also has the added benefit of being easily shareable, so you can access it from any computer. This tech has come a long way in the last couple years, and you can even run back end code like Node. Js and Next. Js thanks to web containers. Overall, this is a great Re Choice for learning and prototyping. But if you're building a serious app, you'll need a dedicated build tool to manage it, and this is where decision making gets tricky. The next tool we'll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or 2. If you're already familiar with create react app, Vite is the closest thing to a one one replacement for it. However, it's way faster in development because it builds your application on demand with tools like native ES modules and ES build that just scale way better for big regex. And as of a few weeks ago, you can use swc instead of babel, which is a much faster Rust based compiler. It uses rollup for module bundling as opposed to webpack and CRA. It also has a TypeScript template out of the box and should support any modern libraries that you want to use. What's important to understand though is that it provides a restarting point for building a single page application. Unlike React rendering frameworks like Next. Js, it doesn't deal with server side rendering or routing, at least out of the box. Vite does have a low level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who really know what the hell they're doing and don't want to use a React rendering framework for whatever reason. If you want to learn more about this, I have a video on my second channel beyond Fireship about 10 different rendering paradigms. The bottom line is that Vite is a great option when building a single page application with React. But there's another awesome tool called NX that can rebuild standalone React apps along with some extra features that you won't find in v. N x is a tool known for building mono repos, but its CLI can also build plain React apps apps that have nothing to do with monorepos. What's cool about it is that when you set up a new project, you have the option to choose your own bundler, like v to webpack, or bundlers of the future like rspack, which is a Rust based replacement of Webpack. It's set up with TypeScript by default, and you can also choose a CSS preprocessor. Its killer features, though, are all all about scaling complexity, like it does task caching and can even distribute that cache on the cloud, which means when another team member or continuous integration server on other side of the world builds the app, it'll use the computation in the cache instead of doing the same work over and over again. And that can be a game changer for large teams. But even if you're an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate more components and libraries. Then from there, you can visualize how all your code is related with the nx graph command. And finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI workflow. Just choose a provider, then it writes all the boring error prone configuration for you. That's Pretty cool, and NX can be used in other React frameworks as well. But what if you want more than just a single page application? Well, that's where React rendering frameworks, aka meta frameworks, come in, with the most popular option being Next JS. The main difference when building a Next JS app is that you have a special directory, like pages or app, that can structure routing for a multipage application, and pages can be rendered on the server to improve search engine optimization and performance. It also does server side data fetching with React server components to build full stack applications with minimal external dependencies. Like here, we're using async await in a component that can run on the client and server. And it provides tons of other features like image optimization and middleware that you likely want on a serious production project. But Next Next is not the only game in town. Remix is a similar framework that was recently acquired by Shopify that provides many of the same features, like file system based routing. Next and Remix have been competing over the last couple years, which is awesome for React developers because now we have 2 excellent rendering frameworks to choose from. The biggest difference is related to data fetching. Next. Js uses React server components, while Remix does not. Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience. At the time of this video, features like nested layouts and streaming are in beta in Next. Js while they're fully stable in Remix. So it's One step ahead of the game here when it comes to innovation, but yet another React rendering framework to think about is Gatsby. It's not as hyped up as it used to be, but was just acquired a couple Raizo by Netlify. Originally, it was popular for building content heavy, statically generated sites, but it also supports server side rendering just like Next. Js and Remix. The most striking difference is its focus on GraphQL to provide a data layer for your application. It has this thing called Valhalla Content Hub that creates a single GraphQL API for all of your data sources that can be accessed with 0 configuration from a Gatsby front end. If you're looking to migrate a content driven app to react, Gatsby has a lot more tools in place to make that process happen faster. It'll even ask you which CMS you want to use during the initial setup and will also add features like markdown. Although, another great option for a content heavy site is Astro. Unlike all the other frameworks we've looked at, Astro is not exclusive to React. It can also be used with Svelte, Vue, and Solid, or all these frameworks simultaneously. React is most useful for building highly interactive UIs, but in most frameworks, React takes over the entire DOM. Astro, on the other hand, has its own templating language for handling the majority of your static content, resend, then you can sprinkle in interactivity as needed, thanks to its islands architecture. Not only does that simplify your code, but it also results huge performance gains because in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster. It also just released version 2 point o that has a new feature called content collections, where actual markdown content adheres to a schema, allowing content heavy websites to scale up safely. And now you have 7 different ways to create a react app without using create react app. I'm not sure what the future holds for create react app, but if they go with option 5, it'll turn into run app launcher that'll point you to one of the frameworks I mentioned in this video. Or maybe they'll go with my idea option 6, integrate generative AI into the tool where you just tell it what you're trying to build and it automatically generates the starter project for you. If the React team doesn't do it, I think we'll see a tool like this by the end of the year. And finally, I wanna thank NX for sponsoring Video. They would have been on the list without a sponsorship, but they also have an awesome YouTube channel that you should definitely be subscribed to. Thanks for watching, and I will see you in the next one.
The speakers discuss various React frameworks, including Vite, NX, and Remix, and their benefits for building single page applications. They stress the importance of choosing a tool for the type of app and emphasize the importance of scaling complexity. The speaker also mentions Gatsby and Astro as popular frameworks, but thanks NX for sponsoring Video. They end with a mention of a new video about creating react app without using create react app.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : 7 better ways to create a React app 
        and a small summary : The speakers discuss various React frameworks, including Vite, NX, and Remix, and their benefits for building single page applications. They stress the importance of choosing a tool for the type of app and emphasize the importance of scaling complexity. The speaker also mentions Gatsby and Astro as popular frameworks, but thanks NX for sponsoring Video. They end with a mention of a new video about creating react app without using create react app.
        [/INST]
        
        Generate the video : POV. You're brand new to web development and you want to learn React JS. Most of the tutorials and even Chat GPT tell you to use an official tool called create react app, but it's a trap. If you use it, you already failed your React developer admissions test. And as punishment, you now need to go learn Ember. Js. React. Vloggers and YouTubers have been warning people against create react app for quite a while, but the discussion really heated up with this pull request from theo, suggesting the removal of this tool from the react docs altogether. Dan from the react team responded with 5 different potential options to salvage this sinking ship. But what's with all the hostility in the first place. The problem with it is that it's slow in development, is a pain to set up with popular tools like Tailwind and TypeScript, and most importantly, there are just tons of better options to get started with react in the modern ecosystem. In today's video, we'll look at 7 ways to create a react app without create react app and look at trade offs so you can choose the optimal tool for the type of app you're building. The absolute easiest way to experiment and start learning React or any front end framework is with an instant development environment like Stackblitz or CodeSandbox. These are web based tools that allow you to run React in the browser without needing to manually install a bunch of dependencies on your system and deal with things Rig Module Bundlers. Like you literally just click a button, and now you're building a React app. It also has the added benefit of being easily shareable, so you can access it from any computer. This tech has come a long way in the last couple years, and you can even run back end code like Node. Js and Next. Js thanks to web containers. Overall, this is a great Re Choice for learning and prototyping. But if you're building a serious app, you'll need a dedicated build tool to manage it, and this is where decision making gets tricky. The next tool we'll look at is Vite, which has enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or 2. If you're already familiar with create react app, Vite is the closest thing to a one one replacement for it. However, it's way faster in development because it builds your application on demand with tools like native ES modules and ES build that just scale way better for big regex. And as of a few weeks ago, you can use swc instead of babel, which is a much faster Rust based compiler. It uses rollup for module bundling as opposed to webpack and CRA. It also has a TypeScript template out of the box and should support any modern libraries that you want to use. What's important to understand though is that it provides a restarting point for building a single page application. Unlike React rendering frameworks like Next. Js, it doesn't deal with server side rendering or routing, at least out of the box. Vite does have a low level API for server rendering, and there are plugins that support it, but this would be a more advanced setup for developers who really know what the hell they're doing and don't want to use a React rendering framework for whatever reason. If you want to learn more about this, I have a video on my second channel beyond Fireship about 10 different rendering paradigms. The bottom line is that Vite is a great option when building a single page application with React. But there's another awesome tool called NX that can rebuild standalone React apps along with some extra features that you won't find in v. N x is a tool known for building mono repos, but its CLI can also build plain React apps apps that have nothing to do with monorepos. What's cool about it is that when you set up a new project, you have the option to choose your own bundler, like v to webpack, or bundlers of the future like rspack, which is a Rust based replacement of Webpack. It's set up with TypeScript by default, and you can also choose a CSS preprocessor. Its killer features, though, are all all about scaling complexity, like it does task caching and can even distribute that cache on the cloud, which means when another team member or continuous integration server on other side of the world builds the app, it'll use the computation in the cache instead of doing the same work over and over again. And that can be a game changer for large teams. But even if you're an independent developer, NX has other useful tools like generators that can automatically add dependencies like Tailwind or scaffold out the boilerplate more components and libraries. Then from there, you can visualize how all your code is related with the nx graph command. And finally, when it comes time to automate with continuous integration and delivery, you can easily make that happen by generating a CI workflow. Just choose a provider, then it writes all the boring error prone configuration for you. That's Pretty cool, and NX can be used in other React frameworks as well. But what if you want more than just a single page application? Well, that's where React rendering frameworks, aka meta frameworks, come in, with the most popular option being Next JS. The main difference when building a Next JS app is that you have a special directory, like pages or app, that can structure routing for a multipage application, and pages can be rendered on the server to improve search engine optimization and performance. It also does server side data fetching with React server components to build full stack applications with minimal external dependencies. Like here, we're using async await in a component that can run on the client and server. And it provides tons of other features like image optimization and middleware that you likely want on a serious production project. But Next Next is not the only game in town. Remix is a similar framework that was recently acquired by Shopify that provides many of the same features, like file system based routing. Next and Remix have been competing over the last couple years, which is awesome for React developers because now we have 2 excellent rendering frameworks to choose from. The biggest difference is related to data fetching. Next. Js uses React server components, while Remix does not. Both frameworks solve many of the same problems, but there are many subtle differences in the developer experience. At the time of this video, features like nested layouts and streaming are in beta in Next. Js while they're fully stable in Remix. So it's One step ahead of the game here when it comes to innovation, but yet another React rendering framework to think about is Gatsby. It's not as hyped up as it used to be, but was just acquired a couple Raizo by Netlify. Originally, it was popular for building content heavy, statically generated sites, but it also supports server side rendering just like Next. Js and Remix. The most striking difference is its focus on GraphQL to provide a data layer for your application. It has this thing called Valhalla Content Hub that creates a single GraphQL API for all of your data sources that can be accessed with 0 configuration from a Gatsby front end. If you're looking to migrate a content driven app to react, Gatsby has a lot more tools in place to make that process happen faster. It'll even ask you which CMS you want to use during the initial setup and will also add features like markdown. Although, another great option for a content heavy site is Astro. Unlike all the other frameworks we've looked at, Astro is not exclusive to React. It can also be used with Svelte, Vue, and Solid, or all these frameworks simultaneously. React is most useful for building highly interactive UIs, but in most frameworks, React takes over the entire DOM. Astro, on the other hand, has its own templating language for handling the majority of your static content, resend, then you can sprinkle in interactivity as needed, thanks to its islands architecture. Not only does that simplify your code, but it also results huge performance gains because in many cases, it eliminates the need to ship JavaScript to the browser, making your website load faster. It also just released version 2 point o that has a new feature called content collections, where actual markdown content adheres to a schema, allowing content heavy websites to scale up safely. And now you have 7 different ways to create a react app without using create react app. I'm not sure what the future holds for create react app, but if they go with option 5, it'll turn into run app launcher that'll point you to one of the frameworks I mentioned in this video. Or maybe they'll go with my idea option 6, integrate generative AI into the tool where you just tell it what you're trying to build and it automatically generates the starter project for you. If the React team doesn't do it, I think we'll see a tool like this by the end of the year. And finally, I wanna thank NX for sponsoring Video. They would have been on the list without a sponsorship, but they also have an awesome YouTube channel that you should definitely be subscribed to. Thanks for watching, and I will see you in the next one.
        