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.

Creating a more ambitious user interface

Creating a more ambitious user interface - React.js Tutorial

From the course: React Foundations by Pearson

Start my 1-month free trial Buy for my team

Creating a more ambitious user interface

“

Okay, so in this topic, we're going to create a more ambitious user interface using functional components. Here's the example you can see, example2.html, similar user interface to before, but this time using functional components. So let's have a look at that in a browser just to make sure that it works as advertised here. So it's react-dev-demos-lesson-3-example-2, if you open that in the browser. And here it is. So that looks good. Let's see how to create this user interface using functional components. Okay, well, here's the product list component. It's a functional component. Like I said earlier, whenever you see a function in React capitalized, it's a component, which which means it returns a subset of the virtual DOM. So as you can see here, this will create, well, I'll just draw the picture again. It'll create a UL element object. And the children of the UL will be six list items. So the six list items, you can imagine being like that. And that is the user interface that is…

Contents