In this article, we will take a closer look at functional components. How to create functional components in Reactjs and also how to import and export functional components in Reactjs.

In this article, we are going to discuss functional components in reactjs. It covers the following topics:

Contents

  • What are functional components?
  • How to import and export components?
  • What is named exports?
functional components in reactjs


Alright, let's get started.

What are functional components?

Functional components are just JavaScript functions, they can optionally receive an object of properties which is referred to as props, and return HTML which describes the UI.

The HTML is actually something known as JSX, but for the sake of understanding from a beginner's point of view let's just call it HTML.


So a functional component is a JavaScript function that accepts an input of properties and returns HTML that describes in the UI.

Let see the below screenshot, I have created the very first functional component, to keep things simple in the app component I have removed all the HTML except the outer div tag.


Let's create our component and the component is simply going to output a message hello world, a component is nothing but a JavaScript file.

First I'm going to create a new folder called components and within the folder, I'm going to create a new file called Welcome.js, for component file naming convention we will use the Pascal case.

Now, within the file, the first step is to import react so, Any component you create always make sure to import react.  Next, let's create a new function, function Welcome and return h1 tag that says hello world and that is pretty much it. You have created your first functional component. Below is the screenshot for your reference


But as it stands, the HTML hello world is not going to be rendered in the browser because the Welcome component is in no way connected with the rest of our application.

How to import and export components?

So what we have to do is export the Welcome function from Welcome.js,  import it in App.js, and then include it in the app component.




So in Welcome.js export default Welcome, in App.js import Welcome from components folder Welcome.js file, we can omit the dot J's extension. Then to include the Welcome component in the app component, we simply specify the component as a custom HTML tag, if there is no content between the tags you can simply change it into a self-closing tag. Now if you save both the files and take a look at the browser you should be able to see hello world. your first functional component is up and running


Although our functional component works perfectly, find the convention or reference I would say is to use arrow functions to define them. So let's rewrite the Welcome function with the es6 arrow function syntax.


The syntax looks more concise than the previous approach, syntax wise it also has additional advantages which we will discover more about this in upcoming articles.

If you are new to arrow functions, please get a basic understanding of how arrow functions work as we will be using them a lot in upcoming articles.

All right, before we proceed to the next article, I quickly want to highlight one thing about exporting and importing components.

Please note here that we are exporting the Welcome component as a default export from Welcome.js, this is what allows us to import the component with any name.  I can change Welcome to my component and change the tag to my component and you can see that it still works as expected.


What is named exports?

But in certain articles or videos, you might also find named exports, let me comment on the code line default export and prepend the constant with the export keyword,  this is what is termed as a named export.



In this situation, you have to import the component with the exact same name. if I save the file you can see that we have an error. so you have to change the import statement to import the Welcome function so import within curly braces the Welcome constant and then use that as the custom HTML tag. if I save this and go back to the browser you should be able to see hello world.


Now, for most of the cases, we will be using default exports but I just wanted to bring named exports to your attention so that they can be of some help in the future.

Thank you for reading this article.  I'll see you guys in the next one.