Create React App来搭建react项目

在听风吟

已于 2022-05-18 17:08:32 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： javascript react

于 2022-04-24 16:59:15 首次发布

本文链接：https://blog.csdn.net/weixin_41346012/article/details/124360704

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

版本过旧请参考此网址更新：Getting Started | Create React App

npx create-react-app my-app

备注：react使用比较自由，不限制多或者少，愿意的话可以只添加一句话，或者使用react搭建完整的前端项目。

1. 将react应用到已有网页中：

1）添加一个 DOM 容器到 HTML

<div id="like_button_container"></div>

2）添加Script标签

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- 加载我们的 React 组件。-->
  <script src="like_button.js"></script>

3）在 HTML 页面文件的同级目录下创建一个名为 like_button.js 的文件。

粘贴如下代码：https://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.jshttps://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js

4）在 like_button.js 的底部，在模板代码之后，加入以下两行代码。

// ... 此前粘贴的代码 ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

以上。