Sashita Ghimire Blog

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 ...

   Components represent the part of the user interface. Components are independent and reusable bits of code. They are as same as javascript functions, but work in isolation and returns HTML. Remember that Components must always start with Uppercase letters. The above figure shows the components i.e Header, Sidebar, Main Content, and Footer. These components are reusable and can be used in any part of our code. Components are of two types: 1. Stateless Functional Components  2. Stateful Class Components Before going into these components, let's  have a quick overview of stateless and stateful. The main difference between stateless and stateful is one has state and the other does not i.e stateful has state and stateless doesn't. In other words, Stateful components are keeping the track of changing data while stateless components print out what is given to them via props. Now let's talk about Stateless Functional Components  Stateless Functional Components: Statel...