Reactjs 将代码笔嵌入React框架站点

我一直在构建一个基本的React Web应用程序，今天我想把一个页面放在一起展示我所承担的#30daycodechallenge项目会很有趣（第二天的挑战是让第一天的挑战加载到我的网站上）

以下是相关页面的代码：

import React, {Component} from 'react'

class Coding extends Component {
    render() {
        return (
            <div>
                <p
                    class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="isaac-tait" data-slug-hash="BaywrNQ" 
                    style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" 
                    data-pen-title="Ying Yang">
                    <span>
                        See the Pen <a href="https://codepen.io/isaac-tait/pen/BaywrNQ">Ying Yang</a> by Isaac Tait (<a href="https://codepen.io/isaac-tait">@isaac-tait</a>) on <a href="https://codepen.io">CodePen</a>.
                    </span>
                </p>
                    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
            </div>
        )
    }
}

export default Coding

import React，{Component}来自“React”
类编码扩展了组件{
render（）{
返回(

参见上的Isaac Tait（）笔。

)
}
}
导出默认编码

基本上是一个样板代码的HTML嵌入复制和粘贴。然而，我遇到的问题是页面正在显示，而代码笔没有显示。是相关页面的链接（仅供参考-目前还处于起步阶段）

---

任何帮助或指点都将不胜感激。干杯

我发现两件事有助于解决我遇到的问题

1） 我已经定义了我的新组件（我在上面展示代码笔的页面），但我没有在NavBar组件中使用它。我在运行

npm start

2） 我正在阅读教程，在我将代码笔嵌入到jsx中时，遇到了VS代码插件html到jsx，它出现在我现在运行的组件的浏览器窗口中

故事的寓意：永远测试你的环境：D