react: Show javascript inside render as plain text

Question

I want to show javascript code as plain text inside the render function. Whats the best way, to prevent that the code will be executed? In HTML i can use code and pre.

render() {
    return  <code>
                var path = require('path');
                var config = {
                    entry: path.resolve(__dirname, 'app/main.js'),
                    output: {
                        path: path.resolve(__dirname, 'build'),
                        filename: 'bundle.js'
                    },
                module: {
                    loaders: [{enter code here
                        test: /\.jsx?$/,
                        loader: "babel-loader",
                        query: {
                            presets: ["es2015", "react"]
                        }
                    }, {
                        test: /\.css$/,
                        loader: 'style!css'
                    }, {
                        test: /\.(png|jpg)$/,
                        loader: 'url'
                    }, {
                        test: /\.(eot|woff|ttf|svg)$/,
                        loader: 'url?limit=100000'
                    }]
                 }
              };

             module.exports = config;

            </code>
}

madox2 · Accepted Answer · 2016-01-18 12:38:44Z

In ES6 you can use template strings and you don't need to escape your code:

render() {
    return  <code> {`
                var path = require('path');
                var config = {
                    entry: path.resolve(__dirname, 'app/main.js'),
                    output: {
                        path: path.resolve(__dirname, 'build'),
                        filename: 'bundle.js'
                    },
                module: {
                    loaders: [{enter code here
                        test: /\.jsx?$/,
                        loader: "babel-loader",
                        query: {
                            presets: ["es2015", "react"]
                        }
                    }, {
                        test: /\.css$/,
                        loader: 'style!css'
                    }, {
                        test: /\.(png|jpg)$/,
                        loader: 'url'
                    }, {
                        test: /\.(eot|woff|ttf|svg)$/,
                        loader: 'url?limit=100000'
                    }]
                 }
              };

             module.exports = config;
            `}
            </code>
}

Arie Xiao · Accepted Answer · 2016-01-18 12:49:29Z

1

I would wrap the code into a custom script tag and load the code when needed. This prevents possible expression interpolation in the template string approach.

<script type="raw_js" id="raw-js">
    // your js code here, which needs to display
</script>

load:

render: function() {
    var code = document.getElementById('raw-js').innerHTML;
    return <code><pre>{code}</pre></code>;
}

See the sample at jsFiddle.

answered Jan 18, 2016 at 12:49

Arie Xiao

14.1k3 gold badges35 silver badges31 bronze badges

Comments

Willem van Oort · Accepted Answer · 2016-01-18 12:36:19Z

You can return it as a string by putting quotes around it like this:

render() {
    return  "
                var path = require('path');
                var config = {
                    entry: path.resolve(__dirname, 'app/main.js'),
                    output: {
                        path: path.resolve(__dirname, 'build'),
                        filename: 'bundle.js'
                    },
                module: {
                    loaders: [{enter code here
                        test: /\.jsx?$/,
                        loader: \"babel-loader\",
                        query: {
                            presets: [\"es2015\", \"react\"]
                        }
                    }, {
                        test: /\.css$/,
                        loader: 'style!css'
                    }, {
                        test: /\.(png|jpg)$/,
                        loader: 'url'
                    }, {
                        test: /\.(eot|woff|ttf|svg)$/,
                        loader: 'url?limit=100000'
                    }]
                 }
              };

             module.exports = config;

            ";
}

Make sure you escape all quotes used in the code with a . (I did it for you in my example)

Collectives™ on Stack Overflow

react: Show javascript inside render as plain text

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related