From the course: React: Components, Context, and Accessibility

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Working with fragments

Working with fragments - React.js Tutorial

From the course: React: Components, Context, and Accessibility

Start my 1-month free trial

Working with fragments

“

- [Instructor] When we're working on a React project, it's really common to use a component to return multiple elements. Maybe you're returning a collection of list items, or maybe some rows for a table, but with some of the rendering rules surrounding React, this may mean adding a ton of additional nodes to the DOM. We have some CSS set up for you here in the style tag. And next let's go ahead and create an app component. So we'll make a function component to make this happen here on line 22. We'll say const App, this should return a header. Within the header we want to return a nav. And then the nav element should have four links, so, a href, a slash, and this is our Home route, and we'll just copy and paste these so that we have four nice links. So this one would be called About, Services, and Contact. Okay, so now that this is created, we will add this to the DOM by using ReactDOM.render. This should render the App component right there to the root. So document.getElementById…

Contents