All language subtitles for 8. Setting Up a New React Project The Options

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 pre-configured

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 Babel 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 going to 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 a 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 V8 is the perfect choice.

Now, Veit 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 1 or 2 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 2 or 3 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 going to 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 going

to make it even easier to build applications then 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 or very first real React application.