https://github.com/janjao937/react-todo
https://github.com/janjao937/react-todo
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/janjao937/react-todo
- Owner: janjao937
- Created: 2023-08-29T07:07:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-01T10:03:33.000Z (over 1 year ago)
- Last Synced: 2025-01-28T03:17:27.337Z (4 months ago)
- Language: JavaScript
- Size: 770 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 0:setup
-npm create-react-app
-cd
-npm start or npm run start or npx react-scripts start
-auto open browser localhost:3000
# 1 : About Project
-Other code /Dependencies(โค้ดคนอื่น) อยู่ใน node_modules
=ลบทิ้งได้
=ติดตั้งใหม่ด้วย npm install จะทำการติดตั้ง dependencies ที่อยู่ใน package.json ให้อัตโนมัติ
=code เราจะอยู่ src
# 2 :build
-npm run build
-file จะอยู่ใน build/static
====================================================================================================
# 3 : CSS setup
#### 3.1 : ติดตั้ง scss
ติดตั้ง sass เพื่อช่วยให้การเขียน CSS แบบ BEM สะดวกมากขึ้น
รันคำสั่ง npm install sass ลงใน terminal (อย่าลืม check path ว่าอยู่ที่ root project แล้ว : ตำแหน่งที่มี file package.json)
ตรวจสอบ dependencies ในไฟล์ package.json ว่ามี sass แล้ว
#### 3.2 : setup index.scss
ไฟล์ index.css : ให้แปลงนามสกุลไฟล์ เป็น index.scss
ไฟล์ index.js : เปลี่ยนการ import จาก index.css เป็น index.scss
#### 3.3 : CSS Global Reset
ไฟล์ index.scss : เขียน css rule เพื่อลบ default padding,margin ต่างๆ รวมถึงวิธีการวัดขนาดของ Box-model
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%; /*equal font-size : 10px*/
}
body {
box-sizing: border-box;
}
#### 3.4 : Typography
ไฟล์ index.scss : ให้ทำการ import google font
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&family=Source+Sans+Pro:wght@400;600;700&display=swap');
ไฟล์ index.scss : ทำการเพิ่ม font หลักของ application (Nunito) ลงใน tag body
body {
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#### 3.5 : Color
knowledge : scss มีความสามารถในการสร้างตัวแปรไว้ใช้ได้
ไฟล์ index.scss : สร้างตัวแปรสำหรับเก็บสีหลักๆของ web-application
# scss-variable
$primary: #db4c3f;
$grey-light: #eaeaea;
$grey-dark: #808080;
$white: #fff;
4 : App Layout (or Page layout)
วาง layout ของหน้าหลัก (ในที่นี้เรามี 1 หน้า)
ในไฟล์ App.js วาง markup สำหรับทำ layout
Header
SideBar
TodoContent
สร้างไฟล์ App.scss
ไฟล์ App.scss : เขียน css สำหรับจัด layout
$header-height: 44px;
$sidebar-width: 300px;
.todo {
display: grid;
grid-template-rows: $header-height calc(100vh - $header-height);
grid-template-columns: $sidebar-width calc(100vw - $sidebar-width);
&__header {
grid-column: 1/3;
grid-row: 1/2;
}
&__sidebar {
grid-row: 2/3;
grid-column: 1/2; /*or grid-colum:1/span 1*/
// position: sticky;
}
&__content {
grid-row: 2/3;
grid-column: 2/3;
// other css
overflow-y: scroll;
padding: 20px 30px;
padding-top: 0;
}
}
ไฟล์ App.scss : ปรับนามสกุลไฟล์ เป็น App.module.scss
หากมี error จากการหา variable ไม่เจอ : ให้ import global css เข้ามาใช้งาน
ไฟล์ App.jsx : implement styles ลงไฟล์ App.jsx
import styles from 'App.module.scss';
Header
SideBar
TodoContent
;