TIP SHARE DEVELOP

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)

+ Inline-style: style ngay trên element reactjs

Syntax: style={{color: ‘red’}}

+ Class-style (css stylesheets): Tạo 1 file có đuôi (.css, .scss, ...), style theo tên className của elemen, then import to file tsx to use

Syntax: .className {color: ‘red’}

+ Module-style: Cũng giống như class style, thay vào đó sẽ đặt tên theo name.module.css/.scss

Syntax:

import styles from "./App.module.css";

className={styles.className}

+ Lib-style: Sử dụng thư viện để hỗ trợ, ex: styled-component, nó kết hợp css in js & css module

Syntax:

const Title = styled.h1`

font-size: 1.5em;

text-align: center;

color: palevioletred;

<Title>Hello World!</Title>

{...(selected ? {}: {})}

✅as Type in init function

Eg: const onDragStart = ( e: DragEvent<HTMLLIElement> & { target: HTMLLIElement }, index?: number )

—————————————————————————————————————

***Build App ReactJS❤️

~ Create component: syntax (enter rfc + tab)

~ React hook

+ state, props

~ Đặt vấn đề: Ta có 1 button có event onClick = function a(), khi đó sẽ bị 1 tình trạng là khi props của button bị thay đổi thì button sẽ bị reRender theo app-comp

~> Sử dụng useCallback để tránh trường hợp → ko bị khởi tạo lại sau mỗi làn app reRender

~> useCallback có 2 tham số:

1: My function

2: Là 1 array dependency, tham số lắng nghe, function chỉ được khởi tạo lại khi có sự thay đổi của variable được truyền vào. mục đích để update lại data.

~> Nếu ko phụ thuộc vào variable thì sẽ để []

Callback in reactjs tsx

const toggleHandle = (name: any) => {

console.log('abc', name);

return 12;

}

//Khi ta render nos like ntn::

/**

* function demo(callback){

* callback('name', 1, 2, 3, 4, 5) //nó có thể return về rất nhiều, tuy nhiên thì bên kia có hứng giá trị đó hay ko

* }

* const toggleHandle = (name: any) => {

* console.log('abc', name)

* }

* demo(toggleHandle)

* //Fill:: abc name

~~~

/**

* Khai báo 1 hàm toggle return void

* @param toggle

* @constructor

//Là một function và return void

export function Demo({toggle}: {toggle: (name: string, title: string) => {}}){

console.log(toggle)

return (

<div onClick={(e) => { //Khi user click thì nó sẽ excuse function toggle()

toggle('name', '123'); //Thời điểm click nó sẽ excuse function toggle() -> khi đó ta sẽ hiểu là fn toggle() đã được thực thi

}}>toggle</div>

)

}

/**

* -> Hiểu đơn giản là khi App.tsx render thì nó sẽ chuyển hết về dạng object

* lúc này 2 file như 2 function -> khi đó việc click excuse sẽ giống như đang run function toggle

* Vaf mình truyền vào trong hàm đó là gì ~ là 1 param ok

Remove Duplicate object in array

const uniqueFn = () => {

const uniqueIds = new Set();

return abc.filter((item) => {

const isDuplicate = uniqueIds.has(item.id);

if (isDuplicate) {

return false;

}

uniqueIds.add(item.id);

return true;

});

};

console.log(uniqueFn());

✅useEffect

Một số lưu ý nhỏ:

**Tránh reRender component trong reactjs, → dùng useMemo (Khi click vào 1 component không liên quan, cũng làm cho component reRender)

props: {name, age}

const user = {name, age}

useEffect(() => //do something, [user])

const user = useMemo(() => {name, age}, [name, age]);

useEffect(() => //do something, [user])

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.