what s data-reactid attribute in html

Question

While I was going through the HTML of some pages  I noticed that some of them use this attribute  data-reactid  like       lt a data-reactid           gt  lt  a gt    What is that attribute and what is its function

User · Answer

data attributes are commonly used for a variety of interactions. Typically via javascript. They do not affect anything regarding site behavior and stand as a convenient method to pass data for whatever purpose needed. Here is an article that may clear things up:

http://ejohn.org/blog/html-5-data-attributes/

You can create a data attribute by prefixing data- to any standard attribute safe string (alphanumeric with no spaces or special characters). For example, data-id or in this case data-reactid

User · Answer

That s the HTML data attribute  See this for more detail  http   html5doctor com html5-custom-data-attributes   Basically it s just a container of your custom data while still making the HTML valid  It s data- plus some unique identifier

User · Answer

It s a custom html attribute but probably in this case is used by the Facebook React JS Library   Take a look  http   facebook github io react

User · Answer

Custom Data attribute in HTML5  Would like to quote Ian s comment in my answer      It s just an attribute  a valid one  on the element that you can use   to store data info about it        This code then retrieves it later in the event handler  and uses it to   find the target output element  It effectively stores the class of the   div where its text should be outputted    reactid is just a suffix  you can have any name here eg  data-Ayman   If you want to find the difference check the fiddles in this SO answer and comment

User · Answer

The data-reactid attribute is a custom attribute used so that React can uniquely identify its components within the DOM   This is important because React applications can be rendered at the server as well as the client  Internally React builds up a representation of references to the DOM nodes that make up your application  simplified version is below        id    1oqi7occu80     node  DivRef    children                id    1oqi7occu80 0         node  SpanRef        children                        id    1oqi7occu80 0 0             node  InputRef            children                                     There s no way to share the actual object references between the server and the client and sending a serialized version of the entire component tree is potentially expensive  When the application is rendered at the server and React is loaded at the client  the only data it has are the data-reactid attributes    lt div data-reactid   loqi70ccu80  gt     lt span data-reactid   loqi70ccu80 0  gt       lt input data-reactid   loqi70ccu80 0    gt     lt  span gt   lt  div gt    It needs to be able to convert that back into the data structure above  The way it does that is with the unique data-reactid attributes  This is called inflating the component tree   You might also notice that if React renders at the client-side  it uses the data-reactid attribute  even though it doesn t need to lose its references  In some browsers  it inserts your application into the DOM using  innerHTML then it inflates the component tree straight away  as a performance boost   The other interesting difference is that client-side rendered React ids will have an incremental integer format  like  0 1 4 3   whereas server-rendered ones will be prefixed with a random string  such as  loqi70ccu80 1 4 3   This is because the application might be rendered across multiple servers and it s important that there are no collisions  At the client-side  there is only one rendering process  which means counters can be used to ensure unique ids   React 15 uses document createElement instead  so client rendered markup won t include these attributes anymore

[javascript] what's data-reactid attribute in html?

Examples related to javascript

Examples related to html

Examples related to reactjs