Okay, let's now take a look at some react components basics.
And we are looking at a react component right now inside our app dot TSX.
Let's close the others down to focus purely on this one.
And we'll make a few adjustments inside here and get it nice and simple.
So this div this surrounding div inside here I'll just add an H1 tag.
And let's just give the name of the app restore.
And below this div we'll create a list of products.
So just above the function let's add a const and we'll specify products.
We'll say equals and open square brackets just for an array.
And we'll just have a couple of example products.
One called with a name of product one.
And we'll give it a price and we'll just say 100.00.
And I'll just copy this line down.
And this can be product two.
And the price can be 200.
Very basic.
Nothing really much going on there.
Just a list of products that we can use just to demonstrate a few straightforward concepts with what
we're doing here.
So I mentioned before that this is a JavaScript function.
And inside the return statement here where we've got JSX, we can also supply JavaScript code or TypeScript.
I'm going to use those two terms interchangeably because TypeScript is really just a superset on top
of JavaScript.
And it looks pretty much the same, at least how we're initially going to use it inside here.
So inside here I'm going to display the list of products in the browser.
And we can do that using an unordered list.
So we'll say UL.
And then to use JavaScript or TypeScript.
Then we open curly brackets.
And then I can use the products variable I've created above the component.
And I wish to loop over this so that I can display the products in the browser.
So to loop over something in JavaScript, what we typically do is use the map function.
And if we look at the description of the map function and then open parentheses, and our map function
is a function that accepts up to three arguments.
The map method calls the callback function one time for each element in the array.
So this is a function that we can use on an array, and we can provide it with a callback function to
do something with each element in that array.
Now all we really want to do is display them as list items inside this unordered list.
So we can say that we want the argument, the item to be passed to the function that's going to be carried
out on each item in the array.
And then we use an arrow function and that's just equals and right angle bracket.
And then we can open parentheses.
And inside the parentheses we can specify a list item.
And then we can specify in curly brackets we can say item dot name.
And we'll just add a dash and open curly brackets again and say item dot price.
And if we go and take a look at our browser and see the effect of what we've done here, then we can
see that we've got the heading the H1, and we can see we've got product one and product two.
So we're displaying the contents of this and a couple of things I want to point out here as well these
brackets, these parentheses what we're doing here when we use parentheses like this then inside parentheses
we're implicitly returning what's inside the parentheses.
If this was curly brackets for instance.
And I swapped the parentheses for curly brackets instead, then I'm getting a warning here.
And if I hover over the warning then type void is not assignable to blah blah blah.
It's because we have to explicitly return something if we're inside curly brackets.
And I have to say I wish to return the list item from the function.
So do watch out for that.
And it's easier just to use parentheses unless you need to write a block of different statements inside
here.
So I'm just going to go back to parentheses.
But I just wanted to point that out because it may be hard to see that I'm using parentheses here,
but the difference between parentheses and the curly brackets is we implicitly return when we use parentheses,
and we see the results on the screen.
But not everything is perfect because if I just close the other tabs down to clean things up here,
if I go and take a look at the Chrome developer tools, which we can get access to by right clicking
and say inspect, and I take a look at the console, then I'm seeing a bunch of errors.
Now a lot of these would be due to hot reloading.
So if you do see a busy console in your Chrome developer tools, just give the page a refresh and see
what you're actually dealing with.
Now, we do have a warning here, and it tells us that each child in a list should have a unique key
prop.
And if I go back to the code, then what we have here is a list item or JSX effectively that's being
looped over.
Now react needs to uniquely identify each element inside a component, and if we don't provide this
with a key, then it's not able to do that.
So what we can do to remove that warning is give our list item a key.
And we can just use item name for instance.
And that will resolve the problem.
And if I go back to the browser I refresh the page again.
Now we don't see any issues inside there.
So great.
Now it tells us to download the react Dev tools for a better development experience.
We'll take a look at those a bit later on, and we'll continue just taking a look at react component
basics.
So supposing for instance, I added another product and we added a product called product two.
We duplicated the name because why not just for an example.
And we set the price to 300.
Does this work.
Well it works.
But now we've got the error that tells us that it's encountered two children with the same key.
Aha.
So what do we do to resolve this?
Well we could just give this an ID property, for instance, and make sure that the ID is unique and
then use that as the key.
Alternatively, we could also just use the second parameter inside the map function and use the index.
Now each one of the items in the array has an index, and instead of using itemname in this example,
we could just specify index and that will remove the error.
If I go back to the browser, I refresh the page again.
Now we've got our three products and we don't see an error inside here.
So another thing that we've kind of already looked at, of course, is we can give inline styles inside
JSX to our different options.
And I could just give our H1, for instance, some style, and I could specify color and give it a color
of red.
Now we're not going to do much with styling I guess, inside this training course, because what we're
going to take a look at soon is Material View, which is a react component library, which gives us
some pre-styled components using material Design that we can use in our application to help us with
the styling of our application.
So it's not too often that we'll take a look at this approach for styling our components, but if we
go back and take a look, we can see that's taken effect.
Another thing I wanted to mention was if I delete the div then well, that's annoying because it didn't
delete the closing div and it's left me with a warning.
So we'll do something to adjust that.
Actually, if we go to code and settings, and if we take a look inside here for linked editing or just
search for linked, this linked editing controls whether the editor has linked editing enabled.
Depending on the language, related symbols such as HTML tags are updated while editing, so let's enable
that.
And what this should allow us to do is when we delete the word div, it should also update its closing
tag as well.
So just slightly more efficient.
Now the reason I wanted to do that is I wanted to point out that this is referred to as a fragment,
and because this is JavaScript code, we can only return one thing.
We can return one object, we can return one level of JSX inside here, and if I was to remove the angle
brackets which don't look like they're doing anything, then I'm going to see a warning saying that
hey, I can't do this.
JSX expressions must have one parent element, so we do need that fragment inside there.
And what this is shorthand for is there is actually a react element or component called fragments that
we could use in place of the shorthand angle brackets.
And that's an approach we could take there.
But I'm just going to go back for simplicity at this time to just returning a single div which contains
our JSX.
Effectively.
That's giving us the output we see now.
Now, supposing I wanted to add a button which added a product into our products list.
Now this is hard coded array of products effectively in this component.
But if we want to make this dynamic, then we need to take a look at using some react hooks.
And the first hook that we're going to take a look at is the use state hook.
And we'll take a look at that next.