Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Create a Component

4:15 with Laura Coronel

React components are written in plain JavaScript with the help of JSX, and they contain the logic required to display a small part of your UI.

React doesn't use a special templating language like other front end 0:00
frameworks and libraries do. 0:04
Instead, React components are written in plain JavaScript with the help of JSX and 0:06
they contain the logic required to display a small part of your UI. 0:13
The process of creating a React component involves two steps. 0:19
First, you define the component as a JavaScript function. 0:24
Then, you specify the React elements that the component should 0:28
render by returning them. 0:33
To utilize and display the component, we'll use a JSX tag. 0:35
Our initial focus will be on constructing the core components of 0:40
the app such as the header, item, and counter. 0:45
Let's begin by defining the header component. 0:49
The easiest way to define a component is to write a JavaScript function. 0:52
In main.jsx, I'll replace all the previously created 0:57
React elements with a function called Header. 1:02
Take note of the capital H in the function name. 1:08
React components are regular JavaScript functions, but 1:12
their names must start with a capital, otherwise they won't work. 1:17
In the upcoming video you'll understand the specific reasons behind 1:22
this naming convention when we use and display this component. 1:27
However, it also helps the recognize that this function is 1:31
defining a component when you see it. 1:36
The header component is responsible for returning React elements 1:39
that describe what should appear on the screen using JSX. 1:44
To write my JSX across multiple lines, I'll add a space and 1:49
a set of parentheses after the return keyword. 1:54
Without the parentheses any code on the lines after 1:58
the return statement would be ignored. 2:03
Next will return a header element, I'll use JSX 2:06
to add a set of opening and closing header tags. 2:12
Within the header, we'll include an h1 element for the title. 2:17
Below the h1 element, 2:22
we'll add a span element to display the total number of items. 2:24
In a later video, we'll display the title and 2:30
total dynamically, however, for now, let's include 2:34
static placeholder text such as grocery list inside the h1, 2:39
and inside the span, add Items and include 1 item. 2:44
Finally, let's assign the span a class of total items to enable CSS styling. 2:49
As a reminder in React we use the attribute class name instead of class. 2:56
All right, our header component is all set. 3:04
Since React components are essentially 3:07
regular JavaScript functions there are various ways to define them. 3:10
It's common to encounter components written as arrow functions. 3:14
As an example, I'll convert the Header function declaration into 3:19
an arrow function expression. 3:24
If your React component is a simple function that just returns JSX, 3:27
similar to this one, you have the option to use an implicit return. 3:32
This means you can omit the curly braces and return keyword and 3:37
simply enclose your JSX within parentheses. 3:43
There isn't a significant advantage to using arrow functions for 3:47
writing components. 3:52
It just provides a more concise syntax. 3:53
You can choose either or approach based on your preference. 3:57
I'll continue using the arrow function syntax, 4:00
including the curly braces and the return keyword. 4:04
In the next video we'll render the header component to the page using a JSX tag. 4:08