Back to: ReactJS Tutorials
Creating Custom Component in React:
In this article, I am going to discuss Creating the First Custom Component in React with Examples. Please read our previous article where we discussed How React Works.
Creating Custom Component in React:
Now, to work towards the expense tracker, let’s think again about the kind of components we have used here. You might remember that in the end, we were able to split up this simple-looking application into a bunch of Components.
In the chart that is shown in the above image, we had the individual chart bars and individual expense items, we had the form for adding a new expense and therefore we get a bunch of components we could get started with.
Now, we get started with the expense item. So, the row where we have the title, amount, and the date of an expense. So now, we want to build our first own Component. Now we could add it here in App.js, but it is considered a good and best practice to actually put new components into new files so that you have one file per Component. And that will mean that in a React project, you will end up with dozens or hundreds of files. Because on React project, you’ll have dozens or hundreds of Components in the end and that’s absolutely normal.
Now to organize our source code, here in the source folder in our project, we are adding a ‘components’ folder which will hold all these components’ source files.
We will not move App.js to the components folder because this app component will be a special kind of component. Not regarding its code, that will be the same code as you see it in all the other components, but regarding its role in the application. It will be our so-called, root component which means it’s the main component being rendered here in our starting file in index.js.
And all our components will be either nested inside of App.js or nested inside of our components which then in turn again, are nested somewhere else. Because ultimately with React, you can say we build a component tree.
You have the main app component at the top, and then below that, you could have any other kinds of custom HTML elements. So, other kinds of components, which in the end hold other pieces of the user interface.
And big applications can result in quite big component trees where only the topmost component is rendered directly into the HTML page, with the help of that React DOM render instruction.
ReactDOM.render(<App />, document.getElementById(‘root’));
All the other components will not be rendered with this instruction but instead will be used as regular HTML elements inside of our HTML code, inside of our Components. So inside the Components folder, we are adding a new file ExpenseItem.js,
This file will hold our expense item component. Now, one thing about the file name. Here again, you are generally free to name it however you want, but it’s a common convention in React applications to name it as we have done above. Starting the filename with a capital character, one word where you can combine multiple words in one word.
The name of the file tells us what kind of logic and HTML code will be inside that file. Now, let’s write the concrete component code in that new file. Now we will understand how to write a component in React. Well, we already saw it in App.js. It’s just a function. And that is a key takeaway, that is super important, definitely keep that in mind.
A component in React is just a JavaScript function. A special kind of function, special regarding that returns the JSX code. But other than that, it’s just a Java script function. Therefore, if we want to create an expense item component, we add the function keyword, and give it any name of your choice, though again, the convention is to repeat the file name here without the extension,
function ExpenseItem() {
}
And inside this function, we return the JSX code, which should be brought onto the screen by this component. So, for the moment we are adding a h2 tag here and say expense item in there.
function ExpenseItem (){
return <h2> Expense Item! </h2>
}
Now this’s our first very basic custom-made component. The HTML code you return in a component depends on what the components should render on the screen. Now to use this Component, we need to export it. Otherwise, it’s only usable inside of that file and that’s not helpful to us. So, we add an export statement as,
export default ExpenseItem;
We write this export statement after the function. We export this function as the default for this file. Now we can import it into another file. And as we mentioned, we’re not going to import it in index.js, and we’re not going to render it like this because we only do this once for our root component.
Instead, we will use our custom component here like a regular HTML element, so like the h2 element, inside of the HTML code written in the app Component here. Hence at the top of the App.js file, we should import our custom Component. So, we simply write,
import ExpenseItem from “./components/ExpenseItem”;
This path tells JavaScript that we’re looking for the ExpenseItem file in a components folder that sits next to App.js file in which we have this import statement. Now ExpenseItem is imported. The cool thing is that we can just use this like an HTML element.
We can use ExpenseItem with opening and closing tags as we do with HTML tags. The key difference to the built-in HTML elements just is that it does not start with a lowercase character but with an uppercase character. And indeed, your own custom components must start with an uppercase character when you’re using JSX code like this so that React is able to detect that this is a custom Component. Because the simple rule which React applies is that lowercase elements are built-in HTML elements. So, it will look for them as built-in elements. Whereas elements starting with an uppercase character are elements defined by you or some other developer.
So, this is a custom-made Component. And we have to use the name which we use in the import statement. Because that’s how this connection is established. This tells React that we want to use this component which is imported under this name from the ExpenseItem file. If we now save everything, all the files, and we go back to the browser, we see the text “Expense Items” showing up here,
This is because the H2 tag is rendered by our own custom component and that component is exported and imported in App.js. And it’s always these steps. You create a Component, which is just a function of returning some HTML code, and you then export it. And then ultimately you import it in the file where you want to use it so that they’re in the JSX code, you can use it like an HTML element, just starting with this uppercase character.
Here, in this article, I try to explain How to build our first custom component in the context of the expense tracker. I hope you enjoy this Creating First Custom Component in React article.