‫So as we just learned,
‫in the real world we don't just write React apps
‫in a single JavaScript file without any tooling.
‫So let's now learn about the options that we have
‫to set up a brand new React project.
‫And for now, the two most important options
‫are the Create-React-App tool
‫or a build tool called Vite.
‫So first, Create-React-App is basically
‫a complete starter kit for React applications
‫that was developed many years ago
‫in order to make it really easy
‫for developers to scaffold new React apps.
‫And what's really nice about this
‫is that all the common development tools
‫are already preconfigured out of the box
‫specifically for React.
‫So an app created with Create-React-App
‫automatically comes with a development server webpack
‫for module bundling, and of course,
‫important developer tools,
‫which include a linter like ESLint,
‫a code formatter like Prettier,
‫a testing library like Jest, and of course,
‫Fable for enabling the latest JavaScript features.
‫Now this all sounds great
‫but the problem with Create-React-App is that,
‫as I said in the beginning, it was developed many years ago.
‫And so it uses some slow and kind of outdated technologies
‫under the hood, and in particular, the webpack bundler.
‫So the team behind Create-React-App
‫has really stopped innovating, and therefore right now,
‫the recommendation is to not use Create-React-App
‫for real world projects anymore.
‫It is, however, still a perfectly fine way
‫to get started quickly with a new React app
‫for tutorials, courses, or simple experiments.
‫And so therefore, we will actually use Create-React-App
‫for most of the course,
‫so for all the small learning projects
‫that we're gonna build together.
‫So you might have read all the articles
‫saying that Create-React-App is dead,
‫and that you should never use it again.
‫But that's only true for building real apps.
‫Again, for learning, it's still 100% fine
‫because you will not encounter the problems
‫that large scale apps will face, like slow refresh times.
‫Now, if you do want to build
‫real world applications with React,
‫as we will do by the end of the course,
‫then Vite is the perfect choice.
‫Now, Vite is actually quite different from Create-React-App
‫as it's basically simply a modern build tool.
‫So a bit like a modern webpack
‫but which happens to also contain a starter template
‫for setting up brand new React applications.
‫However, in a React app created with Vite,
‫you will have to manually set up
‫many important developer tools,
‫such as ESLint, Prettier, a testing library, and so on.
‫And the most annoying and painful of those
‫is setting up ESLint to play nice with React.
‫So that can be a bit of work and it can go wrong.
‫And so this is the reason
‫why I still recommend using Create-React-App
‫for tutorials when we just want to get up and running
‫as quickly as possible.
‫Now, if we have all this additional work
‫to set up our tools,
‫then why even use Vite in the first place?
‫Well, the reason is that it's just extremely fast
‫to automatically refresh the page when the code changes
‫which is what we call hot module replacement.
‫Also, bundling is extremely fast, too,
‫which for large scale applications
‫can really make a difference
‫because when you have to wait one or two seconds
‫for each page refresh,
‫it can become really, really annoying over time.
‫But with Vite, the page will update almost instantly
‫each time that we save our code
‫and want to see the changes on the screen.
‫So in summary, we will use Create-React-App
‫for most small apps in this course
‫and then move to Vite for the last two or three projects
‫to make them a bit more real world
‫and more modern as well.
‫Now, if you have spent any time
‫looking at the React documentation,
‫you might have read that the React team
‫now advises developers to use a so-called React framework
‫like Next.js or Remix to build new projects.
‫So in fact, we have even more options
‫to set up a new React project
‫than the ones that we just talked about.
‫Now we're gonna talk about what React frameworks are
‫throughout the course,
‫but for now, all you need to know
‫is that a framework like Next.js contains solutions
‫for things like routing, data fetching,
‫and server side rendering,
‫so things that React itself does not provide easily
‫out of the box.
‫So essentially, a React framework
‫is a framework built on top of the React library
‫and which is gonna make it even easier to build applications
‫than with just vanilla React itself.
‫And this sounds great, right?
‫Well, yeah, it kind of does,
‫but only for some applications.
‫However, many people, and that include me,
‫think that telling developers
‫to always immediately go for a React framework
‫is not the best idea and not always necessary.
‫Vanilla React apps, so apps built only using React,
‫still have a very important place, too.
‫And so forcing this opinion on everyone
‫seems kind of strange,
‫but again, we will discuss this later on.
‫Now, in any case, this advice only makes sense
‫for building actual production ready products,
‫but not for learning React,
‫which is, of course, what we are trying to do
‫in this course.
‫So even if at some point
‫you want to learn Next.js as well,
‫of course you still need to learn React, itself, first.
‫So all this is to say
‫that you should not worry about this recommendation for now.
‫For now, let's just learn React
‫and set up new projects with Create-React-App first
‫and then with Vite in the bigger projects.
‫And with all this being said,
‫let's now actually go create
‫our very first real React application.