Okay.
Welcome to section three.
And in this section it's time to introduce our react application into the mix.
And in this section we're going to take a look very briefly at some react basics.
I just want to introduce some of the main concepts before we actually start getting our hands dirty.
So coming up in this section of course we're going to talk about react some of the basics and just some
of the main themes about react.
Also we're going to take a look at vite.
This is the tool that we're going to use to help us create our react projects.
Now the makers of react used to have their own tool to do this, but they've discontinued making that.
They've left it to others who, quite frankly, were doing a better job.
And vite is one of those examples.
This gives us some really cool features.
Hot reloading is a thing and it works brilliantly.
We're going to be able to make changes in our code and see it reflected instantly in our browser.
And also we're going to take a look at adding a styling component framework to our application as well,
the one that we'll use to provide the styling components that will integrate into our app is material
UI.
It's a react component library that uses material design components that we can easily use inside our
application, and that really cuts down on the amount of CSS that we're going to need to write.
So what we're creating here is a single page application using react.
And what is a single page application.
Well, in a traditional application web based application we might have multiple pages.
And each page in our application has an HTML template.
We'd have an index.html, we'd have an about.html, for example, and a contact HTML.
And each time a new page is loaded, the whole page is loaded, including the navbar, which is shared
across all of the different templates, including the sidebar in this example.
And every time a new page is loaded, the old page is disposed of and the new page comes in to replace
it, including all of the things that were already inside the browser.
So it's not exactly efficient, and there would be a flicker sometimes between transitioning between
one page and the next page has the same assets need to be loaded in all over again.
When it comes to single page applications, we just have a single page the index.html.
And what makes the page is components.
So we create small reusable components and shared components such as the navbar and the sidebar.
They don't need to be removed.
When we replace a component in our page, they stay in place and we swap the stuff that needs to be
replaced with the other component.
So it's much more efficient and it feels much more responsive to the user as well.
So when it comes to components, that's really what we're using to build our application.
It's just going to be made up of many small components, small reusable components that contain all
of the logic, the HTML and the CSS needed to load and run that particular component.
And then our page is built using those.
So it's really up to us how we design the structure of our application.
But the typical goal is to have many small, reusable components that make up our page, rather than
giant components for each page, if you like.
But there's no laws around that.
But how you'll typically approach this is you'll find yourself leaning towards small components and
many of them, and as a component starts to feel a bit large, then you'll just end up breaking it up
into smaller and smaller components.
And that's how we'll approach it in this training course.
So what is a component then when it comes to react?
Well, it's just a function really a JavaScript function that returns something that looks a bit like
HTML and it looks very much like HTML, in fact, but it isn't.
It's something known as JSX, and JSX is JavaScript plus HTML, and we return what looks like HTML,
which does make it feel quite easy to learn react.
If we just start typing out HTML tags and hey, we've got a react component, but we can also add JavaScript
into this as well, and we can add variables.
And there are a few differences between normal HTML and JSX Jesus like we can see in this particular
example, we use class name instead of class.
The reason for that is class is a reserved word in JavaScript.
We cannot use it in our code that we return from a JavaScript function.
Also, when it comes to inline styles, we have to provide this as an object.
We don't just provide it as strings, and then we can use JavaScript in any element inside our JSX.
And anytime we do want to use JavaScript, we just open some curly brackets and boom, we can put our
JavaScript code anywhere we feel like inside what we're returning inside our component.
Also, react is going to provide events that we can use.
So if we want to track if a button has been clicked, then we have an onClick event that react can effectively
listen to and take a reaction on what just happened.
And any time the user's interacting with the browser, they're moving their mouse, they're typing into
an input field.
Then that's generating events, and there's a number of them that we can use in react to listen and
hook into those events.
A couple of common ones that we'll use on this training course when they're changing text in an input,
then we'll use the Onchange event, for example, and form submission we would make use of the Onsubmit
event.
Another thing our components can and will do is use state and states.
Really is just a component's memory.
Anything that we want to store inside a component, we can use component states.
But JavaScript functions well.
They don't have the ability to remember anything.
They just take arguments as their parameters and they return something.
They don't have any ability to remember something.
So inside react, we also have the concept of react hooks.
When we do want to do something like remember something inside a component, then we use a react hook
and in this case we use the use state hook.
Now this uses react functionality in the background.
So we hook into react if you like.
That's where the name comes from.
And in this case we want to use states inside a component.
So we use a react hook to do that.
And the way that this particular example works is we create a variable using const and provide an array.
And the first part of the array is the state value.
What are we keeping track of?
The second part is a function that allows us to set the value.
And because react is aware of what this state is, anytime that state is updated, then that would cause
our component to rerender and display the updated states in the user's browser.
Another important concept in the world of react is the concept of the virtual Dom your browser.
Our browser will keep track of the structure of any HTML page in what's referred to as a document object
model, and any changes to that web page would need to be applied to the actual document object model.
But making changes to this directly is not the most efficient way to do it.
And certain libraries like jQuery, that's what they do.
They manipulate the Dom to make changes to the user's browser, but it's not the most efficient place
to do it.
So what?
React does is it creates a copy of this in memory called the virtual Dom.
At any.
Time something changes inside the virtual Dom, react will compute a difference between.
The virtual Dom and the actual Dom, and it will apply that difference to the actual.
Dom.
So it only updates just what it needs to.
Much more efficient than directly manipulating the actual Dom.
So is react worth your time?
Well, it continues to top the charts in the Stack Overflow developer surveys for professional developers,
and many big companies use it for their user interfaces.
So it's not going away.
It's going to be around probably for a very long time.
And also it's considered easy to learn.
And there's an asterisks there because react itself is quite easy to learn if you know a bit of JavaScript,
if you know a bit of CSS, if you know a bit of HTML, you pretty much already know about 90% of react,
and then all you need to do is fill in the gaps with the very react specific things like hooks, and
then you pretty much know react.
So it can feel quite easy to learn.
But there's a caveat to that because react is really just a library.
It's not a framework.
It doesn't come with things like routing.
It doesn't come with forms.
Well, we can use forms in react, but we typically don't for any significant forms because it gets
quite verbose and quite tedious.
And things like global state management, we would typically reach out for a third party thing to help
us do that.
And that's where react becomes a little bit more tricky, because then all of a sudden you need to start
thinking about what do I use for this?
And that comes with a bit of experience, but the react side of things, well, that part is pretty
straightforward.
So let's begin our journey and start to build our react application.