Episode 3- Stateless Functional Components

In our previous episode, we discuss a bit about what is stateless functional components. Now, we will do deep into that topic. Without further delay let's jump into our topic.

Stateless functional components are the javaScript functions that optionally receive arbitrary functions called props i.e properties and returns HTML that describes UI. HTML in this case is JSX. If you remember we talk about JSX in our previous videos. Let's called it HTML as I assume most of us are complete beginners.

So, now let's go back to VS code and create our very first functional component. The component is simply a javaScript file. First, I am going to create a folder called components inside src folder. And, within the folder called components, I am going to create a file called Welcome.js. For the naming convention of components, we will use the Pascal Case.

So the first step here is to import React i.e

   import React from "react"  

Then let's create a function named Welcome and that function returns h1 tag.

  function Welcome ( ){  

  return <h1>Welcome, this is a functional component </h1>   

  }  

Now, you created a functional component. But, this is not going render in our browser for that we need to export the Welcome function from Welcome.js  then import it in our App.js and include in App component.

The final result looks like this

Welcome.js

App.js

That is pretty much in.

But we prefer ES6 we will be using the arrow function. Let's refactor code using ES6 arrow function i.e

  const Welcome ( ) => <h1> Welcome, this is functional component </h1>  

Now, let's have a look at our export default Welcome. This simply allows us to import the component with any name. 

Another way of defining export is named export. We can prepend with function Welcome i.e 

 export  const Welcome ( ) => <h1> Welcome, this is functional component </h1>  

But in this case, we need to use the same name as the function name i.e Welcome and include in it our App.js and import in it using pair of curly braces 

 import {Welcome} from "Welcome" 

The final code looks this:

You will see this in many other tutorials, I just want to make you clear about this. 

So, in our upcoming video, we will go through Stateful Class components. Till then Happy coding!!😃 

 

)