Please enable JavaScript.
Coggle requires JavaScript to display documents.
:red_flag: Display:flex, justify-content sắp xếp trục chính, CSS Selectors…
:red_flag: Display:
flex
justify-content
sắp xếp trục chính
flex-start
Sap xep theo truc chinh
flex-end
sap xep cuoi truc chinh
center
sap xep o giua
space-between
tràn đều trên trục chính, khoảng cách giữa các div đều nhau
space-around
cộng thêm đầu và cuối, chia đều 100% witdth
space-evenly
khoảng cách giữa các elements và đầu cuối sẽ đều nhau
eg:display:flex;
flex-direction:row-reverse;
justify-content:flex-end;
CSS Selectors
.class
tất cả class
.class1.class2
chấm liền
.class .class2
selector phải là con của trái
*
all
h2
tất cả các thẻ
h2.title
thẻ H2 có class là title
.class, .class2
chọn selector có cùng class
align-items
sắp xếp trục phụ
flex-start
Sap xep theo truc chinh
flex-end
sap xep cuoi truc chinh
center
stretch
nếu không có height thì nó sẽ căng full box main
baseline
display:flex;
align-items:center
Js Overview
let ten-bien;
let name = 'xuanbui' ;
chuỗi trong dấu ngoặc đơn ''
let age =25;
kiểu number
let hasGirlfriend - false;
true false kiểu boolen
BEM
Block :khối
.block
Element: thành phần trong khối
__element
Modifier : bổ sung ý nghĩa
block--modifyer
Btn
heading
desc
Success
error
item
icon
title
thành công
depcription
so sánh
==
bằng
===
bằng giá trị và cùng kiểu dữ liệu
!=
phủ định bằng
!==
không bằng giá trị và không cùng kiểu dữ liệu
input : nhập
prompt : nội dung dữ liệu nhập
nhập sẽ là kiểu string
để lồng số dùng hàm Number (prompt ...)
React
cd {react-app-test} Name folder
npm install -D tailwindcss
npx tailwindcss init
content: [
"./src/
*/
.{js,jsx,ts,tsx}",
],
tailwind
base;
tailwind
components;
tailwind
utilities;
npm run start
ES7+ React/Redux/React-Native snippets
v4.4.3
https://mindxschool.notion.site/Textbook-bf2bd0b4162b4e2b8618a1166adcbc6a?p=59aad5ca77de48d3a9e4f552197b4318&pm=s
https://docs.google.com/document/d/1KTZKrHJkSMTTyZ-rkg9zBVCC0NkXha5UAy63Qhq9uZI/edit
https://docs.google.com/document/d/1KTZKrHJkSMTTyZ-rkg9zBVCC0NkXha5UAy63Qhq9uZI/edit
npm install -g create-react-app
npx create-react-app {react-app-test} Name folder
flex-wrap
vượt quá kích thước
nowrap
không cho phép xuống dòng
wrap
Cho phép xuống dòng khi cần thiết
wrap-reverse
xuống dòng khi cần thiết nhưng theo chiều ngược lại
tên biến bắt đầu bằng chữ cái, -,$
undefined : lỗi chưa gán giá trị cho biến
logic
&&
và
||
hoặc
!
phủ định
RSC
Components
todolist.js
rsc
return
app.js
<TodoList />
index.css
body:
column
flex-direction
:(Dọc ngang)
column-reverse
row
row-reverse
Reponsive
media queris
breakpoints
media
only screen and (max-width1024px)
null
kiểu dữ liệu
number
let x = 10;
console.log(typeof x)
string
let x = 'anh yeu em';
console.log(typeof x)
boolean
let x = true;
console.log(typeof x)
underfined
let x = undefined;
console.log(typeof x)
phép toán
+
cộng
-
trừ
*
nhân
/
chia
%
chia lấy dư
++
tăng 1 đơn vị
--
giảm một đơn vị
let x = null;
console.log(typeof x)
:red_flag:
cursor: pointer;
list-style:none
mặc định ẩn
400 thì hiện lên
toán tử gán
let X = 0;
x += 2 ;
console.log(x) kết quả: 2
if ( x>=2){ console.log ("điều kiện đầu t iên đúng")
else if ( x=0 ) console.log ("x bằng không")
else console.log ("điều kiện thứ 3" )
for
for (<trước khi diễn ra>; <kết thúc lặp>; <chạy sau mỗi vòng lặp>)
Note JS
text
thương mại điện tử địa phương
dicho.vn
Javascript
cnd fontawesome.com
:warning:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css
giữ phím ALT để select được nhiều
ầ
if else
HTMl storage
absolute
relative
