- In this section,
we got to see how to create a Complete React Application.
We're going to demonstrate
how to use a tool called Create React App.
It simplifies creating a React application,
either in TypeScript or in JavaScript,
we're gonna choose TypeScript.
It'll generate a complete application
with all the configuration that we need
and some simple code files
and HTML files to give us a starting point.
It'll also define when we use this tool,
it'll create a package.json file
and that will specify all the libraries
that need to be downloaded,
and it will download them
as part of our application creation process.
So, it'll download the React library,
React-DOM, Babel,
and any other libraries that are needed.
Okay.
And it'll organize our JavaScript code or TypeScript code,
and our user interface artifacts correctly.
So, it'll generate code, it'll generate components,
it'll generate HTML files and style sheets
and configuration files for a simple application.
But it's a good starting point
into which you can then add your own functionality.
I've already done this before.
So, I'm gonna show you an example of a prebuilt application,
I'll show you how I've built it as well.
If you go to the Example2 folder.
Here we are.
I've already created, using the Create React App tool,
I've already created a sample application called Demo App.
I'm gonna show you the content of that in a moment.
First of all, let me show you how I built it,
or how did I generate it.
So, we can use this tool, Create React App.
You can get information about it here,
it's quite a nice tool.
It's what most people these days use,
I think when they're generating,
you know professional React applications
because it does a lot of the heavy lifting for you.
It's very easy to use.
You just run a command like this.
So, first of all, you have to have
Node Package Manager installed beforehand, okay?
So, if you don't already have that go to nodejs.org,
download the Node-JS library tool.
NPX is Node Package Manager, Execute.
You give it the name of an application to execute.
Presumably you don't have that installed on your machine
at the moment, it'll download it for you.
It'll download this tool and then run it.
And it generates React application as its name suggests
in this folder, okay?
So it'll create a folder called Whatever Demo App,
and in there it'll create a full, simple React application.
Now by default, it would generate JavaScript.
If you specify --template typescript,
then obviously generates TypeScript code instead.
So it'll end up with files called .tsx, instead of .jsx,
it'll have TypeScript code instead of JavaScript.
Okay? So it'll generate a React application in TypeScript
and it'll create basically the template code.
There'll be a node, a package.json file
saying what libraries are needed
and it'll download those libraries
into the node module folder.
It'll do all of that when you run this tool.
It's quite slow, it'll take about five minutes to do it,
you know but you only need to do it once.
So let's have a look at the application that it generated.
I'm gonna open up my Demo application in a code editor.
So here it is
this is what was generated by the Create React App tool.
So the first thing I wanna point out is package.json,
this was generated by the tool.
It specifies all the dependencies
that need to be downloaded into our local folder.
All of these dependencies will be downloaded
into node modules.
Okay? If you expand node modules,
to be honest, it's a crazy number of dependencies,
so I'm not gonna go through all of those.
but pick out a couple of them,
notice that it automatically pulls down the React library.
In my earlier example,
I had a script tag in my webpage to pull that library in,
this is the prep, the correct way to do it,
really is to download it beforehand using package manager,
node package manager.
So I've also got the React-DOM library
for rendering stuff in a webpage
and I've got the TypeScript compiler.
There's some interesting things here for testing
that come in handy later on.
The testing library that we've looked at already
the basic testing library,
plus some extensions for using testing library with React.
Okay? So there's a whole bunch of dependencies here
that are important.
But it'll download those automatically
into the node modules folder
and then it's generated
also various content in the public folder
and various content in the SRC folder.
Okay. So let's take a look at those two folders now.
So first of all,
that's the directory structure in the application
that I just showed you about.
The public folder contains the basic HTML content
at the top level in your application.
To be quite honest,
it's the only file here that's actually needed
is index.HTML, and it's extremely simple.
We'll have a look at that in a minute.
Most of the interesting content is in the SRC folder.
It's in the SRC folder where we have our components.
So I'll just point out the few things
before we get into the detail index.HTML by default,
that's the homepage.
And there's a file called index.tsx or index.jsx.
This is the first,
or this is kinda like the entry point for your code.
It's always the index TSX file that runs first
and you'll also notice that there's an index.css.
So the idea is that you define in there:
you define your corporate branding,
your corporate color scheme fonts across the whole website.
Then as we'll see in a moment
there's also a file called App TSX in there,
it defines the application component.
It generates one component by default
and it's called App,
it's the top level component in the application.
It also generates a sample test script
which will come in handy later to test that component.
Plus a CSS style sheet,
if you want to define styles just for that component.
So that's an interesting point,
We can have two sets of style sheets.
A style sheet called index, for the whole website,
and then individual style sheets called App.css,
that pertain just to one particular component,
just for that component.
Okay, so let's have a look. First of all,
at the index.HTML,
the homepage for our web application, it's really simple.
It's a lot simpler than what we looked at
when we wrote it all ourself.
And basically the only thing that contains of interest
is the anchor point,
into which our HTML content is gonna be rendered.
A div whose ID is root, for example,
React is gonna render all the content there.
Okay? So if you opened up the index HTML,
you can ignore everything in there, apart from this div,
into which our content will be rendered, right?
When you run a React application
the first file that gets executed in the SRC folder
is index.tsx.
And index.tsx looks quite similar to what we had before,
the first few statements are different.
If you haven't seen this before
this is the way that you import classes and functions
from libraries.
It picks up the React library from the node modules folder
which defines a classical React.
And it picks up the React-DOM library from node modules
which defines a classical React-DOM,
this is how you import style sheets.
You don't use link tags anymore,
you just import a style sheet.
Interesting, isn't it? You import code
and you import style sheets in the same way,
import the style sheet and also from App.
Now, this is interesting as well.
When you want to import a SRC file,
there's a SRC file called App TSX that
contains my App component.
But when you import TSX files, you don't say App.tsx,
You just give it the root part of your filing
and it automatically figures
that you're trying to import App.txs.
Inside that file,
it defines a functional component called App,
as we'll see in a moment.
And this functional component,
when it's invoked vetoes XML or HTML to be rendered.
Right this code here,
is looking fairly similar to what we've seen before.
React on render,
the render function takes two parameters.
The first parameter
I'm gonna ignore the strict mode bit for now.
Ignore that.
Effectively the first parameter is
what component do you want to render?
Well, it'll be the application component please.
Okay, that's gonna be the content for our webpage.
It'll render the App component by calling the App function
and it'll render it in our element called root.
That's the element we saw just now in the index page.
Now what about this?
What about this React StrictMode then?
Typically you embed your component,
your application component in React StrictMode,
it enables more rigorous check in
about how components and objects are used
in your application.
It's like an extra level of safety checks
enforced by React.
There's an interesting article about it here,
it's quite esoteric.
So you don't really need to know much about it
to be honest, you just use it
and it'll just make sure that your application
follows best practice.
Right. So this is the first it code file that gets executed
and basically what it does is it renders the App component.
So that's the next thing for us to have a look at
is the App component.
What does that actually do?
So here it is.
Here's my App component App TSX.
Oh, it imports its own style sheet,
each component can have its own style sheet,
typically with the same found name.
Import the style sheet, just for this component.
My functional component will return a chunk of XML,
well HTML really, but in XML syntax.
Okay, so the actual detail in here
is actually less important.
What's important is the big picture.
We have a functional component
that returns a chunk of HTML, XML
whatever it returns is gonna be rendered in my webpage.
Right? So I guess all we need to do now
is to actually run the application.
So what you'd need to do is
if you open up a command window in the Demo App folder
and then you can run yarn start,
or you can say NPM start, if you prefer.
And what that does it basically the React compiler
will build your application in memory.
It'll start up a simple web server
by default on the local machine port 3000,
and then it opens a browser automatically
so they can view the rendered content.
Okay so, let's do that.
I've already in this command window here
I've already ran yarn start.
And as you can see,
it started up a local web server,
ran it on local host 3000.
So, and it also opened a browser window as well
pointed to that URL
and here's what it looks like.
Here's the content rendered by my App component
in the webpage.
And it's really cool,
there's a hot reload feature.
If you change the code in your App component,
the React engine will automatically
recompile your application
and it'll automatically refresh it in a browser,
using an underlying web socket effectively
to keep a live link between your code
and the rendered content.
So I'm gonna do that now.
I'm gonna go back into the code.
I'm gonna go into my App component.
Remember it's the App component
that's doing all the rendering,
and in here when it says Learn React,
I'm gonna change that to be Learn React today,
It's so cool!
When I save that file,
it'll automatically the React-engine
will automatically recompile my code
and refresh the view in the browser.
So in the browser,
immediately it's been refactored and re-executed.
So that was a very simple React application
but it's got proper structure.
So quick recap, it generated this application.
I used to create React App tool.
It generated a package.json
and it downloaded all the dependencies.
It downloaded those dependencies
into my node modules folder, okay, which is massive.
It generated a public folder
of which the only, you know particularly interesting thing
is the index file which has this div with an ID,
and that's the only thing that really matters
in this public folder.
And then in the SRC folder amongst the other bits,
oh the spinning graphic by the way, was logo SVG.
But anyway index.txs rendered my application component,
my App. Oh and also imported the style sheet.
My application component returned,
it was a functional component
and it returned some HTML, XML
and that's what got rendered in the webpage.
Okay so we have here now a framework
into which we can add our own components to build up
to build up a more, you know, complete user interface.