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