1
00:00:00,000 --> 00:00:04,089
React doesn't use a special templating
language like other front end frameworks

2
00:00:04,089 --> 00:00:05,045
and libraries do.

3
00:00:05,045 --> 00:00:09,350
React components are written in plain
JavaScript with the help of JSX, and

4
00:00:09,350 --> 00:00:13,189
they contain the logic required to
display a small part of your UI.

5
00:00:13,189 --> 00:00:16,318
Creating a React component
is a two step process.

6
00:00:16,318 --> 00:00:21,463
First you define the component as
either a JavaScript function or class.

7
00:00:21,463 --> 00:00:24,852
Then, you use and
display the component with a JSX tag.

8
00:00:24,852 --> 00:00:29,213
We're going to built the main pieces of
the score board at first like, the header,

9
00:00:29,213 --> 00:00:30,476
player, and counter.

10
00:00:30,476 --> 00:00:33,281
So let's begin by defining
the header component.

11
00:00:33,281 --> 00:00:37,719
The easiest way to define a component
is to write a JavaScript function.

12
00:00:37,719 --> 00:00:43,778
In app.js, I'l replaced all my
constant variables with a function

13
00:00:43,778 --> 00:00:53,380
named Header Notice the capital H and
the function name.

14
00:00:53,380 --> 00:00:57,650
React components are required to
begin with an upper case letter.

15
00:00:57,650 --> 00:01:02,280
You'll learn exactly why in the next video
when we use and display this component.

16
00:01:02,280 --> 00:01:05,170
But it also helps to know that
the function is defining a component

17
00:01:05,170 --> 00:01:06,270
when you see it.

18
00:01:06,270 --> 00:01:09,740
So header is going to
return react elements

19
00:01:09,740 --> 00:01:13,330
describing what should appear
on the screen using JSX.

20
00:01:13,330 --> 00:01:17,320
To write my JSX across multiple lines,
I'll a space and

21
00:01:17,320 --> 00:01:21,070
I set parenthesis after
the return keyword.

22
00:01:21,070 --> 00:01:23,160
And you can read more about
why we add the space and

23
00:01:23,160 --> 00:01:24,720
parenthesis in the teachers notes.

24
00:01:24,720 --> 00:01:28,130
Next, we'll return a header element.

25
00:01:28,130 --> 00:01:33,699
I'll use JSX to add a set of opening and
closing header tags.

26
00:01:33,699 --> 00:01:38,359
Inside the header,
let's add an h1 for the title.

27
00:01:38,359 --> 00:01:44,540
And below the h1 add a span to
display the score boards stats.

28
00:01:44,540 --> 00:01:47,100
We're going to display the text for
the title and

29
00:01:47,100 --> 00:01:49,450
stats dynamically in a later video.

30
00:01:49,450 --> 00:01:53,890
For now, let's include static
place holder text inside the h1.

31
00:01:53,890 --> 00:01:58,708
I'll write Scoreboard,
and inside the span,

32
00:01:58,708 --> 00:02:03,920
let's add Players: and one player for now.

33
00:02:03,920 --> 00:02:09,242
Now, let's give a span a class of stats
so, that it can be styled with CSS.

34
00:02:09,242 --> 00:02:15,404
Again, in React, we use className
as the attribute instead of class.

35
00:02:18,096 --> 00:02:21,140
All right,
our header component is all set.

36
00:02:21,140 --> 00:02:24,510
In the next video, we'll render
it to the page using a JSX tag.