Using https://github.com/conorhastings/react-syntax-highlighter

Author: zoltantothcom

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-syntax-highlighter": "^10.1.2",
     "styled-components": "^4.1.3"
   },
   "scripts": {

src/index.js

@@ -2,19 +2,74 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import js from 'react-syntax-highlighter/dist/languages/hljs/javascript';
+import railscasts from 'react-syntax-highlighter/dist/styles/hljs/railscasts';
+
+SyntaxHighlighter.registerLanguage('javascript', js);
+
 const Title = styled.h1`
   font-family: sans-serif;
   padding: 2em;
   background: papayawhip;
-  font-size: 4em;
+  font-size: 2em;
   text-align: center;
   color: palevioletred;
   margin: 0;
 `;
 
+const codeString = `
+module.exports = {
+  devtool: 'inline-source-map',
+  entry: './src/index.js',
+  output: {
+    path: path.join(__dirname, '/build'),
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    }
+  },
+  devServer: {
+    contentBase: './build'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', 'eslint-loader']
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve('./index.html')
+    }),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'disabled',
+      generateStatsFile: true,
+      statsOptions: { source: false },
+      statsFilename: path.join(__dirname, 'stats/stats.json')
+    })
+  ],
+  performance: { hints: false }
+};
+
+`;
+
 class Welcome extends React.Component {
   render() {
-    return <Title>Hello World</Title>;
+    return (
+      <React.Fragment>
+        <Title>JavaScript</Title>
+        <SyntaxHighlighter language="javascript" style={railscasts} customStyle={{ fontSize: '1.25rem' }}>
+          {codeString}
+        </SyntaxHighlighter>
+      </React.Fragment>
+    );
   }
 }