So let's get started writing
our first custom React code
by building our first custom component.
As mentioned, components are these functions
that return JSX code and as a React developer you'll write
dozens, and hundreds, and thousands of those components
to build up your React applications.
Now we're about to build a Twitter-like demo application
where random people can post their stuff
for the entire world to read it, amazing.
And along the way,
whilst building that application, that demo website,
we'll dive into many core React features.
And we'll get started now by building
our first custom component.
Now for this demo application which we're about to build,
there are actually multiple possible components
we could identify.
We could, for example, build this button
as a separate component.
Or this list of posts of tweets,
if you wanna call it like this.
Or the individual tweets.
And indeed, that is how you should think of components
and React applications.
We have all these building blocks, and we then build
the overall UI by combining them.
Now, of course, you don't have to put every single character
into its own component
but it makes sense to group related functionalities together
into different building blocks.
And here we could, for example,
start by taking a closer look at the individual posts.
And the first custom component,
which I wanna build together with you, therefore,
is a component for such a single post.
And later, we'll be able to then output multiple posts
based on that custom component.
Now therefore, back in this project, which I gave you,
I'll go to that source folder
and in there add a new folder called components.
Now this name is up to you.
You don't have to name this folder, components.
You don't even have to create a folder in the first place,
but it makes sense to group your component files together
into such a folder.
Now this app JSX file,
which technically also contains that component,
is not part of that folder because that will soon be our
root component.
And I'll get back to the concept
of our root component later.
So for the moment, let's go to components.
And in there I'll add a new file called post.jsx.
The name is of course up to you, but post makes sense,
since we're about to add the code
that defines a single post in there.
The markup that defines a single post, for example,
and the .jsx is required because we plan on writing
of JSX code in there.
If we had just .js that would work in projects
created with create React app,
but Vite projects actually want .jsx to support JSX code
in JavaScript files.
And now as a next step, we have to create a function.
Because React components are just functions.
It's as simple as that regular JavaScript functions
with one special gotcha though,
the name of your functions should start
with an uppercase character.
And, of course, the name also should describe
what this component will be about.
So here I plan on defining the markup that defines
an individual post in that grid of posts.
And therefore, I'll name the function post like this.
And the upper-case starting character is important,
it's not required technically in here
but it is a recommendation, and it will be required later.
Now, this function should be exported so that it can be used
in our code files as well.
And for that, you can use the standard modern JavaScript
export syntax, where you either export it like this
by adding the export keyword in front of the function
or as a file default.
And the only difference is then regarding how you import
that function in another file.
So here I export it as a default.
And now in that function, as mentioned before,
we should return some JSX code,
because that is what turns a regular function
into a React component.
It's really only the fact that you start
with an upper-case character and even more important
that you return some JSX code.
Now for a single post to get started here,
we could return a div,
and then in there may be a paragraph
where we output the name of the author of the post.
And below that another paragraph with the post body
like React.js is awesome.
Now, after hitting my auto format shortcut here in VS code,
I get this function and that is now indeed
our first custom React component.
But, of course, if we just add this file like this,
and save all changes, nothing changes on the screen.
And by the way,
you must make sure to keep that NPM run dev process here
up and running.
In case of a create React app project,
it was NPM start with vite its NPM run dev,
and this starts a development server
which watches your code files,
serves your website on the address
that's being output here in the terminal,
in my case, local host 5173 so that you can preview
your React website there as you are building it.
And it will automatically reload the website here
and update the website and update what you see on the screen
as you make and save changes to your code.
So that's why this process must keep up and running.
But with that, we still don't see our post content here.
We still see, Hello World.
The reason for that is that I created this component,
this post component in a separate file
but I'm not using it anywhere.
It's the same as with a regular JavaScript function.
If I add a function called, add, where I do something,
even if I export that function
it's still not getting used anywhere.
Instead, exporting is just the first step
to make it usable outside of this file.
But we then have to use the function outside of this file.
And it's the same with this component function.
Now the place where we want to use our component functions
is inside of JSX code of other components.
So you build your complex user interfaces
by combining components with each other
and nesting components into each other.
Now at the moment we have two places
where we do have some JSX code in use.
That's the main JSX file where we pass some JSX code
to render and app JSX where I return, Hello World.
Now in both places we could output our post component,
but typically, when building React user interfaces,
you have one root component.
So one single component that's being output in main JSX
and in this case, that would be the app component here.
And then inside of that component,
inside of the app component in this case,
and any components used by that component,
you use your other components.
So the post component should be used in the JSX code
of the app component.
So there, instead of outputting Hello World,
we could output post like this.
Now in order to use it,
we have to import that component function though
and we do that by using the import keyword
and then post from ./components/Post.
And the file extension should be omitted, as mentioned.
But you have to specify the full relative path from app JSX
to that post .jsx file.
So with that, we're importing this post component function
and even though it's a function,
we're not using it like you would normally use functions
by executing it,
but instead, we're using it like an HTML element,
in this JSX code that's returned by app.
In this case, it's the only element that's returned.
And that's the special thing about your component functions.
They are standard JavaScript functions
but you can use them in JSX code
and behind the scenes React will basically execute
your component functions for you.
Take a look at the html Vite JSX code to be precise,
that's returned by them.
And then build the overall user interface and render it
to the screen.
That's what React is doing for you.
So React is then generating the browser instructions
that are needed to bring your HTML code
to life in the browser.
Now what's really important is that,
in the place where you use a component function in JSX code,
like we're doing it here with post or in main JSX with app,
your component functions must start
with an uppercase character.
It's optional in the file where you define them,
but there you typically also start their names
with an uppercase character.
But it's absolutely required in the places
where you use your components.
So in app JSX where I import post from the post JSX file,
this name here post must start with an uppercase character.
It should not start with a lowercase character
because in the JSX code you add to your components
elements that start with a lowercase character
are considered to be default elements.
So React will try to find a default HTML element
with that name,
which it would not find in case of post.
And elements starting with the uppercase character
are considered to be custom components.
And in that case, React will go ahead and execute
your custom component function as mentioned before.
But that's why default elements like div
are written like this and do not start
with an upper-case character,
but your own components must start
with an upper-case character when using them in JSX.
And that's really an important rule to memorize.
But with all of that out of the way,
if we save everything, we get this content on the screen.
And this is now the content we defined
in our own post component here.
So even though it's not super fancy
and definitely not interactive in any way,
it is our first custom component defined
and used in our React project.