< 关於 React: 开始打地基| 如何创立一个新专案>

09-02-2021

如何开始使用React

本章内容

• 将React加到网页中
  • 只需部分使用时
  • 建立全新React应用介面
  • 使用CDN加入
• 建立全新React Next.js

一、将React加到网页中

在网页中部分使用

步骤一：

打开新建立的 HTML 网页，在需要使用到React 的位置展现，我们需要在此处加上一个<div></div>

同时，我们在<div></div>中需要给它一个独一无二的id属性名称，这样的话我们就可以在後续的JacaScript中找到它，并且在里面展示React Component。

写法就会像：

// 范例 - New_Content 当作id 名称
<!-- ... HTML内 ... -->

<div id="New_Content"></div>

<!-- ... HTML内 ... -->

• 通常<div></div>内会是空白的，React 会替换DOM container 里所编辑的内容

步骤二：

加上<script></script>标签

 <!-- ...  HTML内容们 ... -->

  <!-- 载入 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 component。-->
  <script src="share_button.js"></script>

</body>

React使用上会运用到大量的ES6新语法，若不熟悉可以来此网页补补脑，也可以来此网页看看==Babel是如何编译ES6的语法==。

完成以上步骤就可以在我们新建立的==share_button.js==底下增加内容了

const domContainer = document.querySelector('#New_Content');
ReactDOM.render(e(ShareButton), domContainer);

如何开始使用React-next.js

新增一个next-app

1. 创建next.js 应用，指令cd 到需建立的资料夹内
   输入：npx create-next-app
2. 再次cd 到刚刚创建好的资料夹内，运行命令开启server
   输入：npm run dev

之後会用到的css样式套件，在此时先一并安装起来

引入Chakra

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

引入Component styled

npm install --save styled-components

重启开发服务器
按Ctrl + c停止服务器并再次运行：npm run dev