Gallery

TIP SHARE DEVELOP

TIP - TEST

TIP - HTML/CSS ❤️✅

TIP - ANGULAR { Structure + Custom }❤️✅

TIP - THE COMPONENT DEV KIT ( CDK )❤️✅

TIP - CODE :: SYNTAX ❤️✅

TIP - REACTJS ❤️✅

TIP - REACTJS: SYNTAX ❤️✅

TIP - PACKAGE::ANGULAR

TIP -PACKAGE::REACTJS ❤️✅

Explore

TIP - REACTJS: SYNTAX ❤️✅

TIP REACTJS: SYNTAX ❤️✅

~~~~~~

✅TIP REACRTJS: SYNTAX

~ Khi viết JSX chỉ reaturn về 1 react node:

+ Khi đó ta sẽ phải đóng tất cả div về một div duy nhất or use JSX fragment (<></>)

✅Sử dụng className từ thằng cha nó

*Use: MUI, reactjs

*Khai báo className ở sx::

<Box

height="100%"

sx={{

'& .abc': {

color: 'red',

}}

</Box>

✅Truyền content children từ parent & cách show children

~ Ta sẽ truyền trực tiếp thông qua bên trong của tab thẻ đóng mở của parent

Syntax::

<Comp>

<p>Children</p>

</Comp>

function Comp(props: {childrent: any}){

return (

<>{props.childrent}</>

)

}

Note: cách khác tôi có thể truyền 1 element thông qua 1 property props

✅Có thể lồng component này được component khác use

fn Content(props){

return (<div className={"abc-" + props.color}>{props.children}</div>

)

}

fn Dialog(props){

return (<Content color="orange"><h1>{props.title}</h1></Content>)

}

fn WrapperDialog(){

return (<Dialog title="abc" />)

}

✅Differnce between state & props

~ Method setState() sẽ update cho object state của 1 component. when state change, component response by re-rendering

~ props (viết tắt là properties) & state đều là object javascript

~ Cả 2 đều giữ thông tin a/hưởng tới output

~ Difference:

~ Props thì truyền tới component như 1 tham số,

+ Một component ko thể thay đổi props của nó.

~ State thì bên trong component, tương tự như các biến khai báo

+ Có giá trị khởi tạo

+ Một component quản lý state của chính nó nội bộ → có thể nói rằng state is private

*setState giving me the wrong value?

~ Cả props và state đều đại diện cho hiện thị giá trị

~ Call setState là bất đồng bộ → Vì vậy ko tham chiếu giá trị của state ngay sau khi gọi giá trị

~ Solution: Truyền function update thay vì object, nếu muốn tính toán giá trị dựa trên curent state

✅Style use sx (mui) & style (reactjs)

sx/style: {{

'& div': {

backgroundColor: theme.color.main44,

}}

~ Cách mở rộng style component cho @Mui/material-ui

+ props nhận của WComp thì dùng destructuring {sx, ...props}

+ Nếu WComp có nhiều div lồng nhau thì defined variable: containerProps, innerProps

Usage::

fn App({

sx,

containerProps,

innerProps,

...props

}: {conteinerProps?: typeProps, innerProps?: typeProps}){

// Vì prop sx đã được xác định và tách ra

// Nên là trong props ko có sx -> ko bị override prop sx

return <tag sx={{width: '', ...sx}} {...props}/> //Đây chính là cách mở rộng của code style

// sx - style for tag

// props - tất cả những gì mình ko biết về property type

}

~~~

//Khi style cho comp bên trong WComp thì thêm các prop để style riêng

{containerProps, innerProps} -> vì comp tag có prop sx -> nên phải tách ra để tránh override.

//override:: nghĩa là nó sẽ ko giữ sx hiện tại mà thay vào đó là sx mới in containerProps/innerProps

Tách use destructuring: const {sx: innerSx, ...innerProp} = innerProps || {}

fn WComp({

containerProps,

innnerProps

}){

return (<Tag sx={{width: '100%'}} {...inneProp}>) //Đoạn này sẽ mất sx vì sx trong innerProps sẽ replace sx default

//Cách fix:: <Tag sx={{width: '100%', ...innerSx}} {...innerProp}>

}

✅Trong khi binding function ra file JSX

const a () = {} or function a(){}

(a là tên biến - vì thế khi call excuse và defined sẽ khác nhau)

~ Defined: {a} ex: <Tag onClick={a}>

~ excuse: {a()} ex: <Tag onClick={() => a()}>

✅Chú ý vòng lặp của useState & useEffect

~ Gây ra loop

✅Style in Reactjs

~ Có 4 cách để style for react (inline-style, class-style, lib-style, module-style)

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.