-
React Component files ->
.tsx -
All other files such as interface, utility, constant files ->
.ts -
React Component’s naming convention ->
SampleComponent.tsx -
Normal typescript file naming convention ->
sampleFile.ts
-
Inside a react component --->
define variables -> define states -> define methods/functions -> hooks (useMemo() -> useEffect())Example:
export const SampleComponent = () => {
// variables
const totalPages = 2;
//states
const [count, setCount] = useState<number>(0)
const [result, setResult] = useState(0)
const [height, setHeight] = useState(0)
const [width, setWidth] = useState(0)
// methods
const handleCountIncrease = () => setCount(pre => pre + 1)
const handleCountDecrease = () => setCount(pre => pre - 1)
const area = (height: number, width: number) => {
setResult(2 * height * width)
}
//hooks
const renderData = useMemo(() => <div>Area : {result}</div>, [result])
useEffect(() => {
area(height, width)
}, [height, width])
return renderData
}