ReactJS Tutorial - 5 - Functional Components

in this video let's take a closer look at 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 now 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 the UI let's go back to vs code and create a very first functional component to keep things simple in the app component I am going to remove all the HTML except the outer div tag and now let's create our component and the component is simply going to output a message hello which was a component is nothing but a JavaScript file let's start with that first I'm going to create a new folder called components and within the folder I'm going to create a new file called greet dot J's four-component file naming convention we will use Pascal case now within the file the first step is to import react so import react from react any component you create always make sure to import it next let's create a new function function greet and return and each one tag that says hello vishwas and that is pretty much it you have created your first functional component but as it stands now the HTML hello vishwas is not going to be rendered in the browser the grid component is in no way connected with the rest of our application so what we have to do is export the grid function from grid gs import it in AB dot J's and then include it in the app component so in grid gas export default grid in AB Dodgers import grid from components folder greet dot J's file we can omit the dot J's extension next to include grid component in app component we simply specify the component as a custom HTML tag and 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 vishwas your first functional component is up and running now 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 greet function with the es6 arrow function syntax const grete is equal to mt parentheses the fat arrow syntax and then the h1 tag that says hello vishwas the syntax looks more concise than the previous approach syntax wise it also has additional advantages which we will discover as we proceed with the course if you are new to arrow functions please get a basic understanding of how they work as we will be using them a lot throughout the series all right before we proceed to the next video I quickly want to highlight one thing about exporting and importing components please note here that we are exporting greet component as a default export from great chairs this is what allows us to import the component with any name I can change greet to my component and change the tag to my component and you can see that it still works as expected but in certain articles or videos you might also find named exports let me comment the 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 straightaway see that we have an error attempted import error components slash greet does not contain a default export and we are importing it as my component so you have to change the import statement to import the greet function so import within curly braces the greet 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 which was 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 it can be of some help in the future let me revert back to default exports and in the next video let's take a look at class components in react thank you guys for watching feel free to subscribe I'll see you guys in the next one

Channel: Codevolution

Views: 501,275

Rating: 4.9390774 out of 5

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, Functional Components, Components, React Components, React Functional Components

Id: Cla1WwguArA

Length: 6min 33sec (393 seconds)

Published: Mon Oct 29 2018