From the course: React Foundations by Pearson
Unlock this course with a free trial
Join today to access over 25,500 courses taught by industry experts.
Defining simple functional components - React.js Tutorial
From the course: React Foundations by Pearson
Defining simple functional components
Right, okay, so I think it's time to actually see how to define functional components. It's very easy. To define a functional component, you just define a function. React is quite fussy that the name of the function must start with a capital letter. That's a rule, believe it or not. And basically in your function you just create the elements that you want, like a h1 or whatever, or paragraph, and then just return it. So there you go. Much easier than writing a class. You just write a function, you return some stuff, that's what's going to be rendered by your functional component. So I've got a very simple example. Example 1.html. It shows how to create a simple user interface via functional components. So I'm going to have a function that returns this content and a function that returns this content. If you want to have a look at it in a browser for yourself, it's example 1. Okay, so let's see. So So React Dev Demos, Lesson 3, example1.html. If we open that in a browser, here it is…
Contents
-
-
-
-
-
(Locked)
Learning objectives1m 26s
-
(Locked)
Introduction to functional components4m 53s
-
(Locked)
Defining simple functional components6m 59s
-
(Locked)
Creating a more ambitious user interface3m 27s
-
(Locked)
Passing properties to a functional component8m 30s
-
(Locked)
Destructuring properties10m 3s
-
(Locked)
Lab: creating functional components7m 49s
-
(Locked)
Lab solution: Creating functional components7m 39s
-
(Locked)
-
-
-
-
-
-
-
-
-
-