With the advancement of the web, we now also have the web components.
Google has created and maintains a framework with Polymer name, although it does not have much compatibility with several browsers.
At the other end we have Facebook's ReactJS, which also creates these "components".
What is the difference between the two technologies? Or do they have the same purpose?
Well, the two have different goals, and at some point they may even cross.
Polymer aims to encapsulate html, js, and css using spec of .html , shadow DOM and web components.
Importing html file (html import)
ex: Adding an html menu to a website without html import:
<link rel="stylesheet" href="menu.css">
<script type="text/javascript" src="menu.js"></script>
<div class="menu">...</div>
ex: Adding the same menu with html import
<link rel="import" href="menu.html">
In fact it's very simple, importing the html file can create a page (like in the menu.html ex) and make it import the html, css and js from Manu.
With this, just import the page to use the component (html element) and it imports the other files.
Shadow DOM
The shadow DOM creates a new context for the component separating it from the context of the page, so you do not have to worry about eg id collisions or css out of context.
So when creating an element with 'item' ID, do not worry about having another element with that same ID inside the page where the component will be rendered.
HTML component (web component)
The html component in a summarized way is a way to encapsulate the creation of the component through html tags. Instead of having to create the html and then run the javascript:
<div id="menu"></div>
$("#menu").criaMenu({});
Just register the component and then call the tag.
<meuMenu />
React does not have the slightest concern (at least for now) of organizing your files using html import or creating web components. The purpose of the react is to create html / javascript components and render it performatively in the browser using the virtual DOM.
Virtual DOM is a diff mechanism, which makes all html manipulation happen in memory before it is rendered in the DOM, so you can check what has already been created and change only what has changed.
As I have never used either library, I respond with what I understand to be the basic difference between them: while Polymer is an attempt to immediately support the new W3C specifications that are collectively called Web Components , ReactJS is a completely independent framework of these specifications.
The purpose of the two is similar (creating encapsulated and reusable components for use in web applications), but the way each library works seems to be completely different.