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 bloggers 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 five different potential options to salvage the 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 and the modern ecosystem in today's video we'll look at seven ways to create a react app without create react app and look at the 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 to react or any front-end framework is with an instant development environment like stack Blitz or code sandbox 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 like 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 is 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 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 Veet which is enjoyed a meteoric rise to the top of the JavaScript build tool charts over the last year or two if you're already familiar with create react app vit is the closest thing to a one-to-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 projects and as of a few weeks ago you can use swc instead of Babel which is a much faster rust based compiler it uses roll up 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 starting point for building a single page application unlike react rendering Frameworks like nexjs it doesn't deal with server-side rendering or routing at least out of the box Veet 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 Veet is a great option when building a single page application with react but there's another awesome tool called NX that can build Standalone react apps along with some extra features that you won't find in V and X is a tool known for building mono repos but its CLI can also build plain react apps that have nothing to do with mono repos 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 RS pack 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 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 the other side of the world builds the app it'll use the computation in the cache instead 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 for 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 and 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 xjs the main difference when building a next JS app is that you have a special direct Reef like Pages or app that can structure routing for a multi-page 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 universally both 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 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 in remix have been competing over the last couple years which is awesome for react developers because now we have two excellent rendering Frameworks to choose from the biggest difference is related to data fetching the xjs 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 days ago 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 Walhalla content Hub that creates a single graphql API for all of your data sources that can be accessed with zero 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 spelled View 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 then you can sprinkle in interactivity as needed thanks to its Island's architecture not only does that simplify your code but it also results in 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.0 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 seven 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 an 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 want to thank NX for sponsoring this 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

Channel: Fireship

Views: 472,910

Keywords: webdev, app development, lesson, tutorial

Id: 2OTq15A5s0Y

Length: 7min 8sec (428 seconds)

Published: Fri Feb 03 2023