When working on a React project, it's very common to use a component to return multiple elements. In this video, we look at how to render multiple elements using 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, root.…
Okay, so now that this is created,…
- What's new in React 16
- Rendering arrays
- Controlled, uncontrolled, and compound components
- Using keyed fragments
- Working with new lifecycle methods
- React patterns
- Using the context API
- Checking for accessibility issues in your React code
Skill Level Advanced
1. What’s New in React
2. Advanced Components
3. Enhanced Components
4. React Patterns
5. React Accessibility
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.