Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Basics!
You have completed React Basics!
Preview
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.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up