Menu
I'm trying to get an ascii art to be properly rendered by my React application.
After jsx-transformer is executed my art looses the format and renders pretty strange in the browser
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
render: function() {
return (
<pre>
<code>
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
Output:
If I remove react and add the pre code block directly to the html everything works fine.
Am I doing anything wrong here? Any help appreciated...
UPDATE 1: I cannot edit the ascii art.
UPDATE 2: I receive the art as a markdown file:
+--------+ +-------+ +-------+
| | --+ ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
After the markdown transformation to HTML this is the string I have:
<pre><code>+--------+ +-------+ +-------+
| | --+ ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
</code></pre>
I'm still using a JSX-loader to convert the HTML to JSX. The flow is markdown -> html -> jsx
420
Why use JSX? It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript. Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both. We will learn components in a further section.
By using JSX syntax, we can write concise and similar to the HTML & XML structures in the same file as we write native JavaScript code along with all the desired expressions, then the Babel will transform those expressions into actual native JavaScript codebase.
The ${} is template literals.
React doesn't require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. With that out of the way, let's get started!
So I ended up creating an issue in Github and Ben recommended to switch to Babel.
Here is the updated code that works just fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var App = React.createClass({
render: function() {
return (
<pre>
<code>{`
+--------+ +-------+ +-------+
| | + ditaa + | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| | | | | |
+---+----+ +-------+ +-------+
`}</code>
</pre>
);
}
});
var element = document.getElementById('content');
React.render(React.createElement(App), element);
</script>
</body>
</html>
Actually adding the {` ... `} works with jsx-transformer. But I'm not sure why it works.
UPDATE: It works because of template literals. Their recommendation is to use babel regardless because JSXTransformer has been deprecated.
124
If you're stuck with inseparable tags and ASCII you can use dangerouslySetInnerHTML:
var App = React.createClass({
render: function() {
// My representation of your input ASCII you get from elsewhere
var inputASCII = [
"<pre><code>+--------+ +-------+ +-------+",
"| | + ditaa + | |",
"| Text | +-------+ |diagram|",
"|Document| |!magic!| | |",
"| | | | | |",
"+---+----+ +-------+ +-------+",
"</code></pre>",
].join('\n');
// dangerouslySetInnerHTML expects an object like this:
var wrappedASCII = {__html: inputASCII };
return <span dangerouslySetInnerHTML={wrappedASCII}></span>;
}
});
https://jsfiddle.net/yy31xqa3/5/
This functionality is mainly provided for cooperation with DOM string manipulation libraries
Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. https://facebook.github.io/react/tips/dangerously-set-inner-html.html
Only use this solution if you trust the source of the ASCII not to inject <script> tags or other malicious HTML.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
