All language subtitles for 006 Creating a React Project_en

So let's get started with, React

and let's dive into that react code,

and learn how to work with react,

and how to write react code.

Now in the project I showed you before,

you might've noticed that,

I had a couple of files here,

in this react project,

and these files are actually Java script files,

but in those files, I then use HTML code.

And that is not something you can normally do.

Normally, you can't add HTML in Java script.

At least not like this.

You can add it as part of a string,

or have a template literal,

but not just like that.

That's not syntax that would work out of the box.

And indeed it wouldn't work, just like this.

That's why for working with react,

we set up a project,

that's a little bit more complex,

than a vanilla Java script project.

In the standard Java script project,

I just have a HTML CSS and a JavaScript file,

and in the HTML file,

I simply import those external files,

and then they do their thing.

Because that is all just,

standard modern Java script.

With react, to write react code in a convenient way,

We can't just set up a project like this,

because we want to use this HTML in JavaScript syntax,

and the browser would not understand,

this syntax out of the box.

That's why our react project is a bit more complex,

and involve some more files,

because it involves a so-called built step,

which means to code we write,

will not be the code that ends up in the browser.

We simply write code in a very convenient way,

for us as a developer,

and then behind the scenes,

that code will be transformed,

before it reaches the browser.

And in addition to that build step,

with a modern react project,

we typically also want a development server,

which hosts our running react application locally

on our machine.

And which for example,

updates the page in the browser,

whenever we make changes to our code.

So that we don't have to reload

that page manually all the time.

And because that's the kind of setup we need,

we don't just create a couple

of HTML and JavaScript files.

Instead, we typically create a react project,

with an extra tool that gives us all that,

behind the scenes magic,

added to the project automatically.

And the most popular tool for that,

would be Create React App.

You can simply Google

for a create dash react dash app,

and you either find this entry on the official docs

or disk git hub repository.

In the end, you can use either of the two,

there you learn a bit more about it

and that you might not need it,

but, in reality for, most react projects you do.

And then you'll learn

how you can set up a project with that tool.

And it's in the end just one easy command.

Now for this command to be executable

on your system though,

you need to install Node JS first.

Now node JS is a JavaScript run time,

that allows you to run jobs outside of the browser.

We don't, write any note JS code with react.

React is not a node JS library or framework.

It is about browser side JavaScript instead.

But we do need node JS,

to install, this create react app tool,

or to use this create react app tool,

and the project, generated by that tool.

will always use node JS behind the scenes,

for this automatically reloading development server

and for some code transformations,

which transformed the code we write,

into code that runs in the browser.

That's why you should visit node.js.org.

And there, install the latest node JS version.

Whatever that version is when you are visiting this.

Simply install the latest version here

by clicking on it.

That will then give you an installer

for your operating system.

It's available for MacOS, Linux, and Windows,

and it should automatically select,

your operating system here.

And then you simply walk through that installer

and install node JS.

Here I'm on macOS,

but the process will in the end be the same on windows.

You can just accept all the defaults.

Don't need to change anything there.

And that will then install node JS on your system.

Now, once that is done, you are ready,

to run this NPX create react at my app, command.

And for this, simply open up your default terminal

or command prompt on windows.

And in there, use the CD command,

to navigate into a folder,

where you wanna create your react project.

Your development folder, your desktop,

anything like that.

Then, once you're in that folder,

once you navigated that they're,

inside of that terminal,

or a command prompt, run NPX,

create dash react dash app,

and then simply, something like,

my first app, or in my case, react dash course,

simply we had entered (indistinct),

and this will now create a new folder named a react course,

in that folder, in which you ran that command.

And here I need to confirm,

that I wanna, temporarily install,

this create react app tool.

And then this folder will be created,

off that name you chose here.

And in that folder,

a brand new react project will be set up for you.

Now, react project sounds like a big thing.

It will still be a simple webpage with Java script,

Java script managed through react in the end.

But because of these transformations, I discussed,

because of data, it will be a project

where all these transformation steps,

are already pre-configured for you.

So that you can focus on the code,

and not on the setup of the project.

Notice can take a short while,

and if you're facing any problems here,

make sure you got no firewall blocking,

outgoing traffic, or anything like that.

No antivirus tool that could be interfering here.

And then at some point, you should be done.

You should see output that looks something like this.

Now with that, we can CD into that,

newly created folder,

and then run NPM start, which is a command,

based on, the node package manager,

which is a tool that was installed,

together with node JS,

which will in the end execute a script,

that was pre-configured

in that created react project.

And when we run this script,

a development server will be started,

as it says here,

which will host this react project.

It should open a new tab

in your browser automatically,

on local host, free thousand,

and display a starting project there, a starting website.

If it didn't, simply manually go

to local hosts free thousand,

or whichever address is shown to you here.

And then you should see something like this.

The exact starting project can change over time.

Since the starting project template can be changed

by the create react app team,

but all you made you should see something like this.

And that's now a little, dummy website,

which was pre-built for us,

and which already exists in that starting project.

Now we're going to get rid

of that starting project here,

and build our own website though,

our own react project.