JSX not Working in NodeJS - node.js

Question

Here is my code i am facing issue in my get function where i write my code in forEach loop it gave an error of quotation(Unterminated String Literal).
var express = require('express');
var app = express();
var dataFile = require('./data/friend.json');
app.set('port', process.env.PORT || 5000);
app.get("/" , function(req , res ){
var data = '';
dataFile.friends.forEach(function(item){
data +='
<div>
<li>
<h1>${item.name}</h1>
<h2>${item.Class}</h2>
</li>
</div>';
});
res.send("Welcome");
});
app.listen(app.get('port') , function (err){
console.log("Server is running at "+ app.get('port'));
});

Answer 1

You can not have line breaks in JavaScript strings without concatenating or "escaping" them, unless using template literals (using the back-tick).
There are three ways to go about doing this.
Concatenation:
dataFile.friends.forEach(function(item){
data +='<div>'+
'<li>' +
'<h1>${item.name}</h1>' +
'<h2>${item.Class}</h2>' +
'</li>' +
'</div>';
});
Escaping Line Breaks:
dataFile.friends.forEach(function(item){
data +='<div>\
<li>\
<h1>${item.name}</h1>\
<h2>${item.Class}</h2>\
</li>\
</div>';
});
Template Literals:
dataFile.friends.forEach(function(item){
data +=`<div>
<li>
<h1>${item.name}</h1>
<h2>${item.Class}</h2>
</li>
</div>`;
});
Reference: SyntaxError: unterminated string literal
** It is also important to note that creating a string of elements may not instantiate them in to the DOM correctly. This will cause JavaScript to be unable to interact with these elements. DigitalOcean has a tutorial on this.
Alternatively, you can make use of template literals as mentioned above and available in the above reference link, this will instantiate elements inside the DOM.