- [Instructor] At the very beginning of the course,
I said for a lot of people today,
their first interaction with JavaScript
is through a JavaScript Framework like React or Vue
and I said,
if you understand the fundamentals of JavaScript itself,
you'll be able to understand
what is going on inside a JavaScript Framework like React
even if you don't know the framework
or the framework specific language.
We started out by looking at this React component
and now that we're at the end of the course
we can revisit the same component
to see what is going on
so that you can see how all the things you've learned,
apply to React as well.
Off the top,
the component imports two items,
React from react
and PropTypes from prop-types.
You now know what this means,
it means somewhere else in the project
sits something called react and something called prop-types
and we're just importing it into this component
so that we can use it in that component.
Then there's a constant called imgWithClick
that sets up an object
that has a single property, cursor and pointer.
In React, developers prefer to use objects
for pretty much everything.
So you'll see a lot of the time
when you want to save any kind of data,
you save it in an object,
subjects are very easy to work with
and as you've seen through this entire course
objects are the core piece of JavaScript.
So placing data and objects just make sense.
Scrolling one more line down,
we get the main export component from this file.
Now, remember how we set up a class earlier
and I put the class in a separate file
and then export the class out,
React components work exactly the same way.
So you can think of a React component
as a React version of a JavaScript class.
Here the developer has defined a const called
Photo capitalized.
And if we scroll all the way to the bottom
you'll see Photo exported down here.
So if we call this file,
you get the photo component, the photo class
and then you can make an instance of it.
What happens inside the photo component?
Well, first it sets up a series of parameters
just like we did with a class.
So here, inside the parentheses
you have a list of all the parameters or properties
that are going to be used inside the photo component.
Then there's an arrow function
that captures all of these properties
and uses them to do different things.
Inside the arrow function,
we can do myriad of different things.
In this case, a new constant is setup
that has another object.
This one was called imgStyle
and has an object that sets some properties for CSS,
so margin and display
and then below there's a conditional statement
that test to see is the current layout, a column or not
and if so, it sets some other properties,
proposition left and top.
Then there's a click handler.
This is an arrow function
that effectively does the same thing as an event listener.
So listens for an onclick event on the current object
and then it does something
and then the component returns content.
So here we have what's known as JSX.
JSX is an extension to the JavaScript coding language
that allows you to output content
in an even simpler way
than when we use the template literal.
So you can see, it looks very similar to a template literal
except you don't have the back ticks
and you don't need to put the dollar symbol
in front of these curly brackets to make it work.
But looking at this
you can see the formatting is exactly the same
and you recognize that these pieces
behave the same way
as everything else has been working with so far,
just a tiny bit different because it's in React.
Scrolling even further down,
we have an export of a constant called photoPropType.
This one uses the prop-types
that was imported at the very top
and sets up a shape for the objects.
What's happening here is
the developer has set up a set of rules
for what the different properties
in this component must look like.
So it says, the key property must be a string.
The source property must be a string
and it also is required for the components output content
and so on
and scrolling down
we have photo.propTypes
and this is a standard object.
So here we have a set of properties
and then we have a set of methods
and these methods uses arrow functions to pass values
and you'll notice the methods are using arrow functions
in JavaScript.
You can't do that because then everything breaks
but because this is inside React
you can actually use arrow functions inside your methods.
That's just an idiosyncrasy of React.
And then finally, like I said,
we export out to the photo component
or the photo class to make it work.
Now here's the thing,
you don't need to understand
what is going on in this particular React component.
I mean, I pull this out of a larger React project
and it's a standalone piece of code that does nothing.
If you run it, it will do nothing.
It doesn't work in the current context I'm presenting it.
My point with all this is
now that we've gone through all these different things
in the course
you can recognize all the pieces of this component,
even though you've never touched React before,
even though you don't know JSX
and even though you may have never had experience
working With JavaScript at all.
Understanding the fundamentals of JavaScript
gives you the tools and language you need
to be able to understand
what is going on in JavaScript frameworks
because JavaScript frameworks
are built on top of Vanilla JavaScript.
Now you have the tools
and you are ready to get started on your learning journey
to extend your knowledge into JavaScript Frameworks as well.