蛤?

1. Set up react environment

npx create-react-app "app name"

npm start

來回好多次的過程了，看到轉圈圈icon就表示ok

/src 清乾淨，只留index.js

把index.js裡面不重要的東西也刪掉，不過教學跟我的版本好像不一樣

因為跑不起來，所以根據新版本原本的code調整了一下

----

2. Create and Style a List of Data with React

呃，看起來是一個檔案放裝有columns, tasks, column order的object

然後根據這個object去導入components, 因此也要設計column跟task的component

component的snippet是啥來著

- use rafce for “React Arrow Function Export Component”

React JS Crash Course

抓出了當初看的Crash course

跟這個教學不一樣的是，當初的教學 Components 都是 .js 而非 .jsx，components 檔名也都是首字大寫

這個dnd教學是直接在 index 內寫 App component 然後直接抓進去，我還是按照原來架構把 App 獨立成一個主 Component

-

在這個教學老師裝了
1. @'atlaskit/css-reset (npm i @'atlaskit/css-reset)
2. styled-components (npm install --save styled-components)

test

網址後面空一格打括號，括號裡面放要顯示的字

styled components
atlaskit/css-reset

這個dnd是Atlassian的相關產品，所以他們是用自己家的css-reset

關於 --save
根據 這篇文章 的說法，是讓該安裝模組 added as a dependency 的一個指令
不過 npm5 之後應該都預設是 added as a dependency，所以這個選項就不需要了
至於 added as a dependency 是啥意思我就不知道了

每次重新打開程式都很難回去上一次在幹嘛耶

做完第三步了！（總共14步）
這一步是把設定好顯示出資料的Component跟加入style。
目前跟基本react一樣。

不知道是不是因為從16轉換到18，很多東西跟 我之前上的crash course 不一樣，需要轉換

add react-beautiful-dnd

import {DragDropContext} from 'react-beartiful-dnd'

onDragEnd is required and need to update the state

column >> import Droppable
required droppableId

child need to be a fuction

whaaaaat

task >> import Draggable
required draggableId, index