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 add 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 teacher's 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 board's 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.