Instructor: So let's now dive
into all these important basics and fundamentals.
And for that keep in mind what you learned
in the first course section.
React is a JavaScript library for building user interfaces.
And we also learned that of course in general,
HTML, CSS and JavaScript
are about building user interfaces as well.
But I also mentioned in the first course section
that we use libraries like React
because that simplifies building those user interfaces.
We don't need it,
you can build any website without React
but if you are having more complex user interfaces
like the one we have in his expense tracker.
If you use something like React
it all of a sudden becomes much easier
to build something like this.
You won't have to focus on all the nitty-gritty details
and it will be less error prone
if you use something like React
because you will be able to focus
on your core business logic
that makes up your application
instead of having to focus on the actual steps
of updating the page when something happens somewhere.
That's why we use libraries like React.
And to make that job simpler for us,
to make that work simpler for us,
React embraces a concept called components.
React is
all about components.
But of course that brings up one important question.
What exactly is a component?
Well, let me come back to this question in a second.
Instead let me come back to this first sentence here
even though we don't fully know yet
what components are.
Why could React be about one
concept in its core?
Because all user interfaces in the end
are made up of components.
So what could be a component then
if it is something which is crucial
in all user interfaces you see?
Well, let's have a look at this finished application
which we're going to build through out this
and the next course sections.
If you have a look at this user interface
at this web application,
you might be able to identify a couple of building blocks
that make up this interface.
For example, have a look as the expense items down there.
This in the end is the same item being repeated twice here.
It's the same item, just with different data.
The same would be true by the way here for this chart,
the individual bars and that chart.
That's the same item,
just repeated with a different label
and a different amount of filling.
And that is exactly what components are,
reusable building blocks in your user interface.
Components are in the end just a combination of HTML code,
CSS code for styling
and possibly JavaScript code for some logic.
And you don't have to reuse a component
to make it a component.
It's just one of its traits that it is reusable.
But on this user interface
which you see here there would be more components
than just these expense items and these chart bars.
The item here at the top would be a component,
if we expanded this would then be
more elements inside of that component.
That filter here would be a component,
the overall chart would be a component,
the overall list of items would be a component.
But inside of the items
we could say this
date
item here would be a separate component,
the amount here would be a component.
We can really split it up
in a very granular way if we want to.
We got all these individual building blocks
which we combine together to build a user interface.
And in the end of course
all user interfaces can be split up
into components like this.
Into containers and buttons and input elements
and product items, which are being output.
Something like that.
All user interfaces on all kinds of web applications
can be split up into components like this.
And React is all about these components.
You build these individual components
and then you tell React how to compose them together
into a final user interface.
And React embraces this concept of components
because of that reusability aspect
and because it allows us to separate our concerns.
Both concepts are important concepts
in programming in general.
Having reusable building blocks helps us avoid repetition,
and in programming in general it is good
if we don't repeat ourselves.
Having a separation of concerns helps us
with keeping our code base small and manageable
instead of having one large file
which holds all the HTML code
and all the JavaScript logic.
For the entire user interface
we have small separated units,
these components where every component
has one clear
concern, one focus,
one specific task it focuses us on.
And if we split that code across multiple files then
as we are going to do it though out this course
then we'll have small pieces of code
which are easy to manage and maintain.
And these of course are not concepts
or ideas React invented.
Instead if we take a step back from React
and we think about programming in general,
then of course in any programming language
and no matter what you are building
you tend to work with functions
and you split your code into multiple small functions
which then may call each other
to outsource logic into a function,
to separate concerns
and to be able to execute
the same code multiple times if you need to.
And React just picks up that concept of functions
and of separating code across functions
and translates it to the
front end web application world
where we built an entire user interface
by splitting our code into multiple components
which we then can mix and match as we need to.