如何在 Codepen.IO 中编写 ReactJS 代码？

Codepen.IO 是一个在线代码编辑器和项目展示平台，适合开发者分享和发现 Web 前端代码。本篇文章将会介绍如何在 Codepen.IO 中编写 ReactJS 代码。

1. 创建新项目

首先，我们需要在 Codepen.IO 中创建一个新项目。在 Codepen.IO 上方菜单栏点击 "NEW PEN"，新建项目页面会出现。

在新建项目页面上方菜单栏中找到"Settings"，点击之后进入项目设置。

在项目设置中，我们需要做以下几个步骤：

1.1 添加 React 库

在 "Add External Scripts/Pens" 中找到 "React" 库并添加。

<!-- react -->
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<!-- react-dom -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

1.2 添加 Babel 库

为了使 JSX 语法转化成普通的 JavaScript 代码，我们需要使用 Babel 库。

在 "Add External Scripts/Pens" 中找到 "Babel" 库并添加。

<!-- babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

1.3 编写代码

Codepen.IO 会自动生成 HTML、CSS 和 JavaScript 三个编辑器，我们需要将 ReactJS 代码写在 JavaScript 编辑器中。以下是一个简单的例子，用于渲染一个 "Hello World" 到页面上。

class App extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

在以上代码中，我们定义了一个“App”组件，这个组件在页面上渲染 “Hello World”。

1.4 预览项目

编辑完代码，我们需要在 "Change View" 选项中选择 "Live View" 预览项目。点击 "Run"，页面会新开一个标签页，即可查看页面展示效果。

2. 导入第三方库

在 ReactJS 项目中，我们通常会用到一些第三方库，例如 Bootstrap、Material-UI 等等。在 Codepen.IO 中，我们也可以很方便地导入这些库。以导入 Bootstrap 为例：

2.1 添加 Bootstrap CSS

我们可以找到 Bootstrap 的 CDN 链接，导入 CSS 文件到 Codepen.IO 项目中。

<!-- bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

2.2 添加 Bootstrap JavaScript

为了使用 Bootstrap 的 JavaScript 组件，我们需要将 Bootstrap JavaScript 文件导入到项目中。这里采用的是基于 jQuery 的 Bootstrap。

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<!-- bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

2.3 使用 Bootstrap

这里我们以 "Button" 按钮为例。

在 JavaScript 编辑器中编写如下代码：

class App extends React.Component {
  render() {
    return (
      <div>
        <button className="btn btn-primary">Click me!</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

以上代码中，我们在 "div" 中嵌套了一个 Bootstrap 的样式为 "btn-primary" 的按钮。

可以通过类似的方法导入和使用其他第三方库。

3. 关于导入更复杂的项目

以上是对于简单的 ReactJS 代码的介绍，对于更复杂的项目，更多的内容需要进行了解和掌握，例如如何组织项目结构、如何开启 JSX 转化等等。

参考：

• Codepen.IO 官网
• React 官方文档