Ad

React: Show Javascript Inside Render As Plain Text

- 1 answer

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>
}
Ad

Answer

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>
}
Ad
source: stackoverflow.com
Ad