ReactJS Tutorial - 25 - Fragments

alright guys now that we have the basics of react behind us it's time to focus on some of the topics mentioned under the Advanced section in the official react documentation let's start with one of the more easier topics to understand in this video let's learn about react fragments fragments basically lets you group a list of children elements without adding extra nodes to the Dom let us understand what that means with an example vs code and we'll start off by creating a new file fragment demo dot jeaious within the file I'm going to use the reactor snippet RFC II to create a functional component in the JSX I will simply specify the text fragment demo in the app component I will include the fragment demo component if you save the files and take a look at the browser you should be able to see the text fragment demo now let's go back to the fragment demo component and add a few more elements in the JSX now I want to convert the text fragment demo into a heading so I will replace the div tag with an h1 tag right after the heading I want to add a simple description using a paragraph tag this describes the fragment demo component but when I do this we get a red squiggly line at the closing parenthesis of the return statement and when I hover on that you can see that it says JSX expressions must have one parent element if you save the file and take a look at the browser you can see that the application is broken as well and the error message points to the same thing adjacent JSX elements must be wrapped in an enclosing tag so anytime your component has to return multiple elements you have to enclose them in a single parent element so let's add that in closing div tag when I format it you can see that we have an enclosing dip tag and the each one and the paragraph elements are contained within this enclosing div tag if you now save the file and take a look at the browser everything works fine but if we inspect the element you can notice that we have the enclosing div tag included in the Dom tree so between the div tag from app component and the h1 tag in fragment demo component we have an additional div tag this is well react fragments come into picture we can replace the enclosing div tag with react fragment and that will prevent the extra node from being added to the Dom so all you have to do is in fragment demo component replace this existing div tag with react dot fragment make sure to change the closing tag as well now if you save the file and go back to the browser inspect the element you can see that we no longer have the div tag between the app component div tag and the h1 tag and if you go back to vs code you can see that we are still returning multiple elements in the JSX all right now let's take a look at another example where react fragments seems much more appropriate I am going to create two new files so within the components folder table dot j s and columns dot j s within the table file i'm going to use the react snippet r f c/e to create a functional component for the GS x i'm going to replace the div tag with a table tag and within the table I'm going to add a tee body tag and then a TR tag to create a row of data within the row I want to render columns and the columns will be maintained in a separate component which is our columns component so let's go to column Jes and using the reacts Tibet our FCE create another functional component within the JSX I'm going to add two columns so TD name and another TD which was because we are returning multiple elements we need the enclosing div tag now back in the table component I will include the columns component and back in app component I will include the table component if you know save all the files and take a look at the browser you should be able to see the two columns name and vishwas if you take a look at the console though we have warnings and the warning is validate Dom nesting TD cannot appear as a child of the dev had basically it is telling us that it is wrong to have a TD element as a child of a div tag if I inspect the element you can pretty much see that in the dom tree pd within the div tag and this dip tag was necessary because we were returning multiple elements in the JSX of columns component but hey now we have the better alternative we can replace this div tag with react dot fragment so I'm going to go back to vs code and in columns component I'm going to replace the div tag with react dot fragment if you now go back to the browser you can see that all console warnings have disappeared if we inspect the element you can see that we have the table tag tbody TR and then TD there is no div tag in between the final point on fragments is that it can accept the key attribute when rendering lists of items for example let's assume we have an array of items stored in a variable called items then we could have items dot map and then we have an arrow function the parameter is item and the function can return a react fragment because items in the list need the key prop though we can specify the key attribute on react fragment key is equal to let's say item dot ID and within the JSX we can have multiple elements being returned let's say a heading that says title and then a paragraph tag that renders item dot title this is completely possible as of this recording key attribute is the only attribute that can be passed to a reactive fragment the reactive hopes to add additional attributes in the future but for now keep in mind to pass in only the key attribute now there is also a shorthand syntax that you can use for react fragments instead of react dot fragment you can use an empty opening tag and an empty closing tag I will get rid of this items rendering and now I can replace react dot fragment with an empty opening tag and an empty closing tag this basically represents the idea that it won't add an actual element to the Dom if you do use this shorthand syntax though there is one limitation you cannot pass in the key attribute so let's save this and take a look at the browser and you should still see name and which was the two columns we have specified so that is about react fragments fragments let you group a list of children elements without adding extra nodes to the Dom thank you guys for watching don't forget subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 148,805

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

Id: bHdh1T0-US4

Length: 9min 42sec (582 seconds)

Published: Wed Jan 02 2019