[筆記] React 隨手記 （環境建置、常用功能說明）

環境建置：yarn create react-app my-app

常用指令

yarn create react-app my-app
npx create-react-app my-app --template redux
yarn add styled-components
yarn add react-router-dom
yarn add react-router-dom@6.0.0-beta.0
yarn build
yarn add gh-pages
package.json
git add. git commit
git remote git push
npm run deploy

github 新增 repositories

在 term 下指令
cd <想要新增資料夾的位置>
git clone <github repositories 的網址>

• 環境建置
  • React 輸入指令

在 term 下指令
$ cd 上面新增的英文資料夾名
$ yarn create react-app 上面新增的英文資料夾名

在 finder
把 react 新建資料夾裡面的 src、public、package.json 這幾個檔案移出到（從 github 上 clone 下來的 資料夾(ex: pokemon_lottery)
最後再刪除react 新建資料夾(ex:lottery)

在 term 下指令
$ yarn //根據 package.json 把套件裝起來
$ yarn start//確認 dev server 運作順利
$ 在瀏覽器上啟動 react 後，要先 control+C 關閉後再下指令

$ yarn add styled-components
$ git add .
$ git commit -am "feat: create react app"
將建置好的環境推到 github 上面

建置環境完成後
開始開發前
新增一條 branch
git checkout -b <名稱命名>

git add .
git commit -am "命名"
命名規則：
切版新增功能
git commit -am "feat: add login page UI"

修登入功能錯誤訊息顯示錯誤的 bug
git commit -am "fix: login error message UI"

docs 撰寫專案說明文件，沒有改動程式碼

refactor 改變程式架構，不改變程式邏輯

• 在 App.js 引入以下程式:

import React from "react";
import styled from "styled-components";

• react 關於路徑
  src 資料夾底下 用相對路徑 ./
  src 資料夾底外 用絕對路徑 /

• React 常用操作

• 畫面重複可利用的 component 獨立出來變成一個 function component

//畫面重複可利用的 component 獨立出來變成一個 function component，可以設定參數接收父層傳進來的資料
//function component 用解構語法接收參數
//放到 App.js 畫面呼叫要用 <FilterButton/>
function FilterButton({
  className,
  dataFilter,
  children,
  handleChangeFilter,
  handleDeleteIsDone,
}) {
  return (
    //
 );
}

function App() {
//程式
  return (
//畫面
<FilterButton
   className={"btn btn-outline-dark"}
   dataFilter={"delete-complete-item"}
   children={"complete"}
   handleChangeFilter={handleChangeFilter}
/>
<FilterButton
   className={"btn btn-danger"}
   dataFilter={"delete-complete-item"}
   handleDeleteIsDone={handleDeleteIsDone}
/>
{/* <button
   onClick={() => handleChangeFilter("all")}
   type='button'
   className='btn btn-outline-warning'
   data-filter='all-item'
>
  全部
</button>*/}
  );
}

• const[拿到的資料,資料更新的方法] = usestate()

  const [filter, setFilter] = useState("all");
  //const[拿到的資料,資料更新的方法] = usestate()
  const [value, setValue] = useState("");
  const [todos, setTodos] = useState([
  {
    id: 1,
    content: "new todo",
    isDone: false,
  },
  ]);
  

• 監聽事件
  <input onChange={}/>
<button onClick={}/>
  通常{}裡面放箭頭函式或呼叫一個箭頭函式的function

function App() {
//程式
  return (
//畫面
<input
  value={value}
  onChange={handleChangeValue}
  type='text'
  className='form-control create-input'
  placeholder='請輸入待辦事項'
/>
<button
  className='btn btn-outline-secondary'
  type='button'
  onClick={() => handleDelete(id)}
>
  );
}

＊ 計數器
用 filter 把未完成的數量篩選出來

function App() {
//程式
  return (
//畫面
  <button type='button' className='btn badge-light count-item'>未完成項目
    <span className='badge badge-light uncomplete-count'>
    {todos.filter((todo) => !todo.isDone).length}
    {
      todos.filter((todo) => {
          if (todo.isDone === true) return false;
          if (todo.isDone === false) return true;
      }).length
    }
    //用 filter 把未完成的長度篩選出來
    </span>
  </button>
 );
}

• .filter 用於篩選或刪除
  • 刪除：自己設計 function => true 要留 || false 要刪
• .map 有兩種用法
  • 更新：用法如圖上半
  • 條列式渲染： 用法如圖下半
    （父的方法給兒子使用） 或 （子 12min變數 = 父 {12鍋的值資料}）

function App() {
//程式
const handleChangeStatus = (id, status) => {
  setTodos(
    todos.map((todo) => {
    //更新
      if (todo.id !== id) {
        return todo;
      }
      return ({
      //展開舊的物件 加入新的內容
        ...todo,
        isDone: status,
      });
    })
  );
};
  return (
//畫面
  <ul className='p-0'>
    {todos
    .filter((todo) => {
      if (filter === "all") return todo;
      if (filter === "active") return !todo.isDone;
      if (filter === "complete") return todo.isDone;
    })
   .map((todo) => {
   // .map 條列式渲染
      return (
        <TodoItem
          id={todo.id}
          key={todo.id}
          content={todo.content}
          isDone={todo.isDone}
          handleChangeStatus={handleChangeStatus} 
          //父的方法給兒子使用
          handleDelete={handleDelete}
        />
   ); 
   // <子 12min變數 = 父 {12鍋的值資料}
   })}
   </ul>
  );
}