- In this lesson
we'll see how to create a very simple React application.
The application will demonstrate, first of all
how to download the React packages
from a content delivery network site.
In other words, we'll have an HTML page.
It'll have a couple of script tags,
it'll pull in the React libraries directly
in real time into our browser,
from our website.
We'll have a very simple user interface just to
help you understand how the bits fit together.
Have a look in the Example1 folder, index.html
So here's the folder.
JsTdd lesson nine, example one.
Index.html is just a single file.
One of the nice things about React is it's
easy to get started simply.
That's quite different from Angular where you
have to learn quite a lot to do anything.
React allows you to start simple
and then to get more complex as your competence grows.
So if you open that in a browser
this is what it looks like.
It has a heading and some simple content.
Okay. So the user interface is simple, but that's good.
So we can basically see how to build that in React.
Okay. So I'm gonna go through the code
bit by bit, and then afterwards I'll show you
how the whole code looks when you join it together.
So, first of all, a React web application,
you have an index.html
and somewhere in the body of the HTML
you have a single top level HTML element.
Typically a div,
and React will render--
the React Engine will render all
of its user interface into this element.
So the element is
like a hook into which you can inject content.
So it looks like this.
And a div,
You give it an ID, typically root
although it doesn't have to be root
as long as you are consistent later on.
You'll see what I mean.
This div will become the target into which all dynamically
generated content will be displayed by React.
Okay. So that in your HTML content is
gonna be dynamically expanded when the application runs.
Right. Okay.
You need to pull in some libraries.
There's a package for the React Engine itself.
The React Engine or the React Package
is capable of building a view,
which can then be rendered
either in a webpage using React JS
or in a mobile application
using React Native.
So the first import,
imports the React library itself.
And then the second import
imports react-dom.
React-dom is the library
that renders this view in the web browser.
Okay. So the React library lets you create the view
and then react-dom lets you render that view
in a browser,
in the document object model of a browser.
So we need to import both of these libraries
into our application.
So the easiest way to do this, initially,
is to download those directly
from the unpkg.com
content delivery network site.
So unpkg.com is the standard CDN
for downloading any kind of JavaScript library.
So you end up having script tag that look like this.
You have a script tag that pulls
from unpkg.com and pulling in the React library.
The version numbers obviously gonna change over time
but this is the React library.
That's the first one.
Plus another script tag that also goes to unpkg.com
and it pulls in react-dom, that's the second one.
Okay. The ability to create the view
and the ability to render that view in a webpage
both of those scripts, those script files are needed
in this simple example.
Right, now here's a thing,
we're also going to be be using Babel.
I mentioned Babel a few times in the last few lessons.
Babel is a transpiler.
It does two things in the context of a React application.
First of all, it'll transpile
or convert modern JavaScript into traditional JavaScript.
So a little bit earlier
I mentioned some of the new features
in JavaScript like interpolated strings, arrow functions,
classes, destructuring.
Modern JavaScript supports these features.
But if you are targeting browsers that are older
and to be honest, they'd have to be quite old these days.
What you might need to do is to convert your modern code
into a traditional JavaScript
that older browsers could understand.
So if you're using a modern browser
you don't need to do this conversion.
Modern browsers understand modern ecoscript.
But if you have an older browser
then you can use Babel to transpile your modern syntax
into traditional syntax
that older browsers would understand.
So Babel can do that,
converting modern JavaScript into
like old JavaScript.
And also it can transpile something called JSX.
Now I haven't mentioned that yet.
JSX is a syntax which combines JavaScript and XML
in a single file.
So I'll explain why, what it is and why we use it.
And then I'll explain why Babel is needed to convert it.
Anyway, long story short in this simple way
of writing a React application at the moment we need Babel
in the browser to do this work.
So we have a script tag that pulls in the Babel transpiler.
Okay. So pulls in the Babel transpiler.
That Babel transpiler will now,
when my webpage is loaded, it'll dynamically
convert, modern JavaScript into traditional Syntax.
And it'll also convert JSX into pure JavaScript.
Again, I need to explain that in a moment.
So we have a Babel script tag as well.
Okay. Now what is JSX?
A JSX file can contain JavaScript and XML.
So you use JavaScript to represent your application logic.
Defining functions, write in if statements
things like this.
And then you use XML
to define the user interface that you want to build.
Like I'll have a button please, and a text box.
So you embed this JSX syntax
in a script tag like this.
A bit later on when we're kind of
writing React applications like properly, if you like,
this is like a simplified approach
this kind of works automatically.
But at the moment, what we need to do is first of all
make sure that we've imported the Babel transpiler
like I discussed a few minutes ago.
And then have a script tag.
You put your code here that contains a mixture
of JavaScript and XML.
So your JSX code, you embed it
in a script envelope where you specify type, text, label.
What that does is it tells the Babel transpiler
that it needs to transpile the code inside here
into pure JavaScript.
I need to explain what this JSX syntax is gonna look like.
So it all comes down to the idea of components.
In React a component is either a function
or a class that renders
HTML or XML to the React Engine.
So it basically tells React
this is the content that I would like you to display please.
So here's an example of a component.
A component can either be written as a function
or as a class.
A few years ago, people used to use classes
but these days people use functions as a cleaner syntax.
So here I've written a functional component.
It's a function.
It starts with the capital letter, by the way.
It's a function that returns
HTML.
Well to be strictly correct,
it doesn't return HTML.
It returns XML.
Hence the term JSX.
This is a combination of JavaScript syntax and XML.
So it's really easy to generate content.
If I render this component
it will render a div with a heading and two bullet points.
Well, that's the user interface that we've seen.
You build your user interface using XML syntax.
It's a very easy syntax to get used to.
Now, the thing is
this code here is gonna run in a browser
and browsers have no clue what's going on here.
A browser would look at this and say,
but what? what are you doing?
You know, this is XML syntax
but this is meant to be JavaScript.
So in order for this code to be understood by the browser
Babel will transpile
or convert the XML syntax into pure JavaScript.
It'll effectively do something like
it'll convert the div element
into you like a console, right line, that kind of thing.
It'll build this into pure JavaScript function calls
to build HTML content dynamically.
We don't need to worry too much
about the underlying mechanism.
We can just cheerfully write components like this
that return embedded XML.
This component when rendered will render this XML.
So that's the last thing we need to think about.
How can we actually render this component on our webpage?
Well, it looks like this.
There's a class called ReactDOM
provided by one of those includes.
It has a render function
and the render function takes two parameters.
The first parameter is the component
that we want to render using XML syntax.
This is XML syntax, okay.
It is basically a function call.
When Babel sees this
it'll basically call the items list function.
The one that we looked at
on the previous slide.
That function returns a chunk of XML.
That XML will be rendered wherever we specify.
So the first parameter
which component do you want to render?
And therefore what HTML?
And the second parameter
where do you want it to appear on the webpage?
And then you give it the ID of your div
where that's going to be rendered.
Okay. So we create the component
by using the XML tag, we use XML syntax
but ultimately that's gonna be a function call.
And then the second parameter, we pass it into the React,
so they create-- get element by ID.
We specify where that's going to be rendered.
And that's what it looks like.
So just to finish off,
I'm gonna take a retrospective run
through the code completely from top to bottom
just to summarize how it all hands together.
So here is index.html in code editor.
So it's just a very simple HTML page.
You know, there's hardly anything to it, really.
So first of all
I've got some beautiful CSS styles
And then I've got my--
my div,
I've given my div an idea of root here.
Therefore, when I render my content,
I specify root here.
I could have changed this.
I could have called it my app root.
And then down here, when I come to render in the content
I'd have said my app root.
There, render the content here please,
in the element with that ID.
So you just need to be consistent
here
and here.
There will be imported three scripts.
If you remember a script for the React library itself
which enables us to create a view.
A script for ReactDOM, which enables us to
render a view in a browser.
And then the script tag for Babel, because
Babel needs to do some transpilation.
The code that I've got is enclosed in a script tag
It's enabled by Babel.
It's enBabled.
So Babel will transpile this into pure JavaScript.
So even though there's embedded XML here
Babel would transpile this into pure JavaScript
And it's pure JavaScript
that then gets rendered in the browser.
So here's a functional component.
It returns, whatever it returns is to be rendered.
When I invoke that component here
it'll basically call that function.
Whatever that function returns
would be rendered here in the webpage.
And that's how it looks when we finish.