昨天快速介紹過react，今天直接進入實作

大綱

1. 建立專案並安裝React
2. 安裝開發用到的套件

1.建立專案並安裝React

在要新增專案的地方輸入以下指令

npx create-react-app blog-frontend

Create React App 是官方支援的建立單頁 React 應用程式的方法。它提供了無需配置的現代構建設置。我們不需要安裝或設定 webpack 或 Babel 等工具。它們是預先配置和隱藏的，以便我們可以專注於程式碼開發。

當前專案資料夾結構

blog-frontend/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

確認專案是否正常運行

npm start

如果運行正常會出現以下畫面

2.安裝開發會用到的套件

• react-router-dom : 用於在 React 中實現路由和導航功能的library
• react-quill: react文字編輯器元件(用來發布文章用)，基於Quill實現，可用於富文字格式(rich text)編輯功能。
• axios: 用於發送 HTTP 請求的 JavaScript library，通常用於與後端 API 進行資料交流。
• react-tag-input-component: 一個 React 元件，用於實現標籤輸入和顯示功能
• react-icon: icon套件

npm i react-router-dom react-quill axios react-tag-input-component

結語

今天把專案建立和初始化完成了，明天再來介紹TailwindCSS和安裝的方式

參考資料

• create-react-app