What is a Component?

[MUSIC] 0:00 Hi, there, in the previous stage you learned how to create React elements, 0:04 the smallest building blocks of React applications. 0:08 This stage is all about thinking and 0:11 understanding components, which are at the heart of React. 0:13 Everything in React is considered to be a component. 0:16 So what exactly is a component? 0:20 A component is a piece of UI that you can reuse. 0:22 Just like you're able to reuse code in JavaScript with functions, 0:27 a component lets you reuse code that renders a part of your UI. 0:30 Being able to split your UI code into independent reusable pieces and 0:33 think about each piece in isolation is one of the most embraced features of React. 0:37 So first let's have a look at what we're going to build. 0:41 In this course, we're going to begin building a scoreboard application. 0:45 A scoreboard will be a simple app you can use when playing board games or 0:48 card games, for instance. 0:52 It will allow you to add and remove players from the game and 0:53 keep each player's score by increasing and decreasing a score counter for the player. 0:57 It's going to include dynamic information like the total number of players and 1:04 points, and even contain a stopwatch that can keep track of turn time. 1:08 To make things interesting and 1:13 competitive, the score leader will have a crown icon next to their name. 1:15 And we'll add some game mechanics that will let another player steal the crown 1:20 from the leader. 1:24 In this course we're only going to build certain parts of the scoreboard, 1:26 like the player display, score counter, and total player's stat. 1:30 We'll also be able to remove players from the board. 1:35 But in a followup course you'll level up your React skills by building all of 1:38 the remaining features of the scoreboard app. 1:42 The first step we'll take in building our scoreboard app is to think about 1:44 the application in small, simple components. 1:49 In the browser I'm going to use my Chrome dev tools inspector to highlight the main 1:51 sections of the app. 1:56 First, the header contains the title and 1:58 the stats, like the total number of players on the board. 2:01 Below the header is a list of players, and next to each player is 2:04 a counter that lets you increase and decrease the player's score. 2:09 Finally, we have the container that wraps the entire app. 2:13 So to start, our app might consist of three components. 2:18 A header component, a player component we can reuse to display each player and 2:22 score, and the container component that brings everything together. 2:28 As you build React projects, you'll find that breaking your app 2:32 into smaller components this way provides many benefits. 2:35 You can take pieces of repeated code, like the players and counters, 2:39 and turn them into a reusable component. 2:44 It's also easier to work with several small components rather than a single 2:47 large one. 2:52