Month: 九月 2022

use Antd for React

選了 Antd 來當做 React 的腳手架、仍在學習熟悉。

安裝：

npm install antd

在官網教學是輸入 npm install antd –save 。後綴的 –save 作用是為了要寫入 package.json 中的 dependencies ；但其實在 npm 5.0 之後就會預設自動加入了、所以我在這裡就去掉不輸入了。

簡易使用：

import { DatePicker } from 'antd';
import 'antd/dist/antd.min.css';

<DatePicker />

在官網教學中、引入樣式是：import ‘antd/dist/antd.css’; 、但這樣會出現如下的錯誤：

經查詢後、需將引入樣式改成 import ‘antd/dist/antd.min.css’; 才不會有錯誤。

React App 101

先依這個連結確認在電腦裡已裝好 node & npm 。

打開終端機、輸入：

npx create-react-app myapp

待安裝完成後、打開 Visual Studio Code 並開啟剛建好的資料夾。

public 資料夾中刪除沒用(自認為)的檔案：

src 資料夾中只留 index.js & App.js：

刪除檔案說明：
在 public 資料夾中，create-react-app 生成了一些預設的檔案，像是 logo 圖片和 manifest.json 等，這些檔案通常是用來作為示例或者基本的應用程式設定。對於一個新的應用程式來說，這些檔案可能是不必要的，因此我們可以安全地將它們刪除，以保持專案的簡潔性。

打開 index.html 、將內容精簡如下(自認為)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.html 的修改說明：
在 index.html 中，我們對一些標籤和屬性進行了修改和刪除。首先，我們刪除了一些不必要的 meta 標籤和連結，以保持頁面的簡潔性。另外，我們將

放置在頁面的最頂部，這是因為 React 應用程式將會被渲染到這個元素中。而 %PUBLIC_URL%/favicon.ico 是一個指向 favicon 圖標的路徑，這樣瀏覽器就可以正確地載入圖標。

index.js 也精簡如下 ：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.js 的說明：
在 index.js 中，我們引入了 React 和 ReactDOM，這兩個庫是用來建構和渲染 React 應用程式的關鍵庫。我們使用 createRoot 函式將我們的應用程式渲染到了 HTML 文件中的

元素中。值得注意的是，我們使用了 <React.StrictMode>，這是一個用來啟用嚴格模式的元件，可以幫助我們在開發過程中偵測潛在的問題和錯誤。

至於 App.js 我習慣全刪、後續再自己寫碼。

101 大概就這樣囉～

Spring Boot 101 with GitHub

配合 GitHub 創建一個 Spring Boot Project。

  • 先進入到 GitHub 的網頁。點擊 New 按扭去新增一個 Repository。

  • 輸入名稱、並點擊下方按鈕創建。

  • 如果沒有特別去設定 SSH key 的話、就必需得是 https開頭。將此網址複製。

  • 開啟 IntelliJ 、點擊右上角的 Get from VCS 。

  • 貼上剛剛複製的連結並點擊右下角的 Clone 。

  • 先關掉 IntelliJ、進到剛剛 Clone 的資料夾、刪掉 .idea 的隱藏資料夾。

  • 回到 IntelliJ 、選擇 New Project 創建和剛剛相同名稱的 Project 、此時會出現警告視窗、直接 Yes 即可。

  • 在 Dependencies 這裡、依個人所需選擇。(Spring Web, JDBC API, MS SQL Server DRiver)

  • 建立完成後可點擊右下角的 Always Add 、讓 IntelliJ 自動將檔案加到 Git 版本控制下、加好後可看到左邊檔案會變成綠色的狀態。

  • 將以下多餘的檔案刪掉。

  • 設定 pom.xml 

<!--SQL2008 https://mvnrepository.com/artifact/com.microsoft.sqlserver/mssql-jdbc -->
        <dependency>
            <groupId>com.microsoft.sqlserver</groupId>
            <artifactId>mssql-jdbc</artifactId>
            <version>7.2.2.jre11</version>
        </dependency>

<exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
</exclusions>
  • 點選左邊的 Commit 、填入說明、點擊 Commit and Push 進行第一次上傳。

  • 回到 GitHub 上檢查、收工。