I'm trying to make sure I understand the concept that is transclusion. Wikipedia defines it as the following: " In computer science, transclusion is the inclusion of part or all of an electronic document into one or more other documents by hypertext reference."
Would the following (simplified) React code qualify as that?
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App1} from './App1/App1';
import {App2} from './App2/App2';
ReactDOM.render(<App1 />, document.getElementById('app1'));
ReactDOM.render(<App2 />, document.getElementById('app2'));
//index.html
<html>
<body>
<div id="app1"></div>
<div id="app2"></div>
</body>
</html>
I think 'transclusion' in the sense of hypertext would be when you are reading a document seamlessly as one document, but the content is stored in more than one file.
Let's say for example that we had one file called
story.txt:This is a story about some transclusion.And we also had a file called
author.txtthat contained the author's name:Written by TommyIf we were to construct a hypertext representation of the contents of those two files, imagine writing a source document like this:
And when viewing that document, you saw this hypertext:
This is a story about some transclusion. Written by TommyAs I understand it that's what transclusion means. You can do this with HTML, you can use PHP, and many other languages to import, include, or grab text from files and include and display them inside other files.
I think in the case of your HTML - are you importing HTML from those files where it's written like this?
<div id="app1"></div>If you're not pulling HTML from those files and displaying it in
index.htmlit's probably not transclusion, but templating…but in your JavaScript, those modules you're importing might be! Where you say:import React from 'react';You're importing a part of that
reactfile (or maybe the entire file) into your module. Though you don't ever see the 'hypertext' version of this file, somewhere deep inside the JS engine it's able to 'read' your file along with the contents ofreactandreact-dom, plus if you have other modules that load them, there's only ever one copy of thereactfile that gets referenced…as far as the JS engine is concerned it's kind of like the text of your imported modules is 'transcluded' into the modules where they're used, though I'm not sure if there's ever a 'hypertextual' representation of that written or recorded anywhere.