7.2 āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻā§āĻ°āĻŋā§ā§āĻ
āĻ°āĻŋā§ā§āĻā§āĻ + āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻā§āĻŦ āĻĒāĻžāĻā§āĻžāĻ°āĻĢā§āĻ˛ āĻāĻŽā§āĻŦāĻŋāĻ¨ā§āĻļāĻ¨ āĻšāĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤ āĻāĻ¤ā§ āĻāĻ°ā§ āĻāĻŽāĻ°āĻž āĻ¯ā§āĻŽāĻ¨ āĻāĻŽāĻžāĻĻā§āĻ° āĻā§āĻ˛ āĻā§āĻ˛ā§ āĻāĻŽā§āĻĒāĻžāĻāĻ˛ āĻāĻžāĻāĻŽā§āĻ āĻ§āĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋ āĻ¸āĻžāĻĨā§ āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻāĻā§ āĻāĻŽāĻĒā§āĻ˛āĻŋāĻ āĻĄāĻā§āĻŽā§āĻ¨ā§āĻā§āĻļāĻ¨ āĻšāĻŋāĻ¸āĻžāĻŦā§āĻ āĻāĻžāĻ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĨ¤ āĻ°āĻŋā§ā§āĻā§āĻ-āĻ āĻĻā§āĻāĻāĻžāĻŦā§ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻž āĻ¯āĻžā§āĨ¤ āĻāĻŽāĻ°āĻž āĻĻā§āĻāĻāĻžāĻŦā§āĻ āĻāĻ° āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ° āĻĻā§āĻāĻŦāĨ¤
āĻĢāĻžāĻāĻļāĻ¨āĻžāĻ˛ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻāĻ
import React from 'react';
interface Props {
title: string;
subTitle: string;
}
const Title: React.FC<Props> = ({ title, subTitle }) => {
return (
<div>
<h1>{title}!</h1>
<h2>{subTitle}</h2>
</div>
);
};
export default Title;
āĻāĻŽāĻ°āĻž āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻā§ āĻ¯ā§āĻāĻžāĻŦā§ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻŋ āĻ¸ā§āĻāĻžāĻŦā§āĻ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻŦāĨ¤ āĻŽā§āĻ˛ āĻĒāĻžāĻ°ā§āĻĨāĻā§āĻ¯ āĻšāĻ˛ā§ React.FC āĻāĻ¨ā§āĻāĻžāĻ°āĻĢā§āĻ¸āĨ¤ āĻāĻāĻžāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻāĻŽāĻ°āĻž āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻā§ āĻŦāĻ˛āĻŋ āĻ¯ā§ āĻāĻāĻŋ āĻļā§āĻ§ā§ āĻŽāĻžāĻ¤ā§āĻ° āĻ°ā§āĻā§āĻ˛āĻžāĻ° āĻĢāĻžāĻāĻļāĻ¨ āĻ¨āĻž āĻŦāĻ°āĻ āĻāĻāĻŋ āĻ°āĻŋā§ā§āĻā§āĻ āĻĢāĻžāĻāĻļāĻ¨āĻžāĻ˛ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻāĨ¤ āĻāĻāĻ¨ āĻāĻ āĻĢāĻžāĻāĻļāĻ¨ āĻĨā§āĻā§ āĻ¯āĻĻāĻŋ āĻāĻŽāĻ°āĻž JSX āĻ°āĻŋāĻāĻžāĻ°ā§āĻ¨ āĻ¨āĻž āĻāĻ°ā§ āĻā§āĻ¨ āĻ¸ā§āĻā§āĻ°āĻŋāĻ āĻ°āĻŋāĻāĻžāĻ°ā§āĻ¨ āĻāĻ°āĻŋ āĻ¸ā§āĻā§āĻˇā§āĻ¤ā§āĻ°ā§ āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻāĻŽā§āĻĒāĻžāĻāĻ˛ āĻāĻžāĻāĻŽā§ āĻāĻ°āĻ° āĻĻāĻŋāĻŦā§āĨ¤
āĻāĻ° āĻ¸āĻžāĻĨā§ āĻāĻŽāĻ°āĻž Props āĻāĻ¨ā§āĻāĻžāĻ°āĻĢā§āĻ¸ā§āĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻŦāĻ˛ā§ āĻĻāĻŋāĻā§āĻāĻŋ āĻāĻ āĻĢāĻžāĻāĻļāĻ¨āĻžāĻ˛ āĻāĻŽā§āĻĒāĻ¨ā§āĻ¨ā§āĻ āĻāĻŋ āĻāĻŋ āĻĒā§āĻ¯āĻžāĻ°āĻžāĻŽāĻŋāĻāĻžāĻ° āĻ¨āĻŋāĻŦā§āĨ¤ āĻāĻāĻ¨ āĻā§āĻĨāĻžāĻ āĻ¯āĻĻāĻŋ āĻāĻ āĻāĻŽā§āĻĒāĻ¨ā§āĻ¨ā§āĻ āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ° āĻšā§ āĻāĻŦāĻ title āĻāĻŦāĻ subTitle āĻĒā§āĻ°āĻĒāĻ¸ āĻ¨āĻž āĻĻā§āĻā§āĻž āĻšāĻā§āĻž āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻāĻŽā§āĻĒāĻžāĻāĻ˛ā§āĻļāĻ¨ āĻāĻ°āĻ° āĻĻāĻŋāĻŦā§āĨ¤
āĻļā§āĻ§ā§ āĻ¤āĻžāĻ āĻ¨ā§ āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻāĻžāĻāĻĒāĻĄ āĻšāĻā§āĻžāĻ° āĻāĻžāĻ°āĻŖā§ āĻāĻŽāĻ°āĻž āĻāĻāĻ¨ āĻāĻā§āĻāĻŽāĻĒā§āĻ˛āĻŋāĻ āĻĢāĻŋāĻāĻžāĻ° āĻāĻŦāĻ āĻĒā§āĻ°āĻĒāĻ¸ā§āĻ° āĻāĻžāĻāĻĒ āĻ¯ā§āĻŽāĻ¨ title āĻ¸ā§āĻā§āĻ°āĻŋāĻ āĻāĻāĻžāĻ āĻĻā§āĻāĻ¤ āĻĒāĻžāĻ°āĻŦāĨ¤
āĻāĻŽāĻ°āĻž āĻ¯ā§āĻā§āĻ¨ āĻĒā§āĻ°āĻĒāĻ¸ āĻā§ āĻ āĻĒāĻļāĻ¨āĻžāĻ˛ āĻāĻ°ā§ āĻĻāĻŋāĻ¤ā§ āĻĒāĻžāĻ°āĻŋ āĻāĻžāĻāĻĒ āĻĄāĻŋāĻĢāĻžāĻāĻ¨ āĻāĻ°āĻžāĻ° āĻ¸āĻŽā§āĨ¤ āĻāĻĻāĻžāĻšāĻ°āĻŖāĻ
interface Props {
title: string;
subTitle?: string;
}
āĻāĻāĻ¨ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ°ā§āĻ° āĻ¸āĻŽā§ subTitle āĻĒā§āĻ°āĻĒāĻ¸āĻāĻŋ āĻ¨āĻž āĻĻāĻŋāĻ˛ā§ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻž āĻ¨ā§āĻ āĻāĻžāĻāĻĒāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻā§āĻ¨ āĻāĻ°āĻ° āĻĻāĻŋāĻŦā§ āĻ¨āĻžāĨ¤
āĻāĻĒāĻ°ā§āĻ° āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻ āĻ state āĻŦā§āĻ¯āĻžāĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻšāĻ˛ā§ āĻ¨āĻŋāĻŽā§āĻ¨ā§āĻā§āĻ¤ āĻāĻĒāĻžā§ā§ āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĻ
const [name,setName] = useState<string>('John Doe');
āĻāĻāĻāĻžāĻ¨ā§ āĻāĻŽāĻ°āĻž useState āĻāĻ° āĻĒāĻ°ā§ <string> āĻĻāĻŋā§ā§ āĻŦāĻ˛ā§ āĻĻāĻŋā§ā§āĻāĻŋ āĻ¯ā§ āĻāĻ state āĻāĻ° āĻā§āĻ¯āĻžāĻ˛ā§ āĻļā§āĻ§ā§ āĻ¸ā§āĻā§āĻ°āĻŋāĻ āĻšāĻŦā§āĨ¤ āĻāĻŽāĻ°āĻž āĻ¯āĻĻāĻŋ <string> āĻāĻāĻŋ āĻ¨āĻž āĻĻāĻŋā§ā§ āĻāĻ° āĻā§āĻ¯āĻžāĻ˛ā§ āĻ¸ā§āĻā§āĻ°āĻŋāĻ āĻĻāĻŋā§ā§ āĻĻā§āĻ āĻ¤āĻžāĻšāĻ˛ā§āĻ name āĻāĻ° āĻāĻžāĻāĻĒ āĻ¸ā§āĻā§āĻ°āĻŋāĻ āĻšā§ā§ āĻ¯ā§āĻ¤ āĻāĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤āĻ¨ āĻāĻ°āĻž āĻ¯ā§āĻ¤ āĻ¨āĻžāĨ¤ āĻāĻāĻŋāĻā§ āĻŦāĻ˛ā§ āĻāĻžāĻāĻĒ āĻāĻ¨āĻĢāĻžāĻ°ā§āĻ¨ā§āĻ¸āĨ¤
āĻā§āĻ˛āĻžāĻ¸ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻāĻ
import React, { Component } from "react";
interface Props {
title: string;
subTitle: string;
}
interface State {
counter: number;
}
class Title extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
counter: 0,
};
}
render(): React.ReactNode {
const { title, subTitle } = this.props;
return (
<>
<h1>{title}</h1>
<h2>{subTitle}</h2>
</>
);
}
}
export default Title;
Â
āĻāĻāĻžāĻ¨ā§ āĻāĻŽāĻ°āĻž Component āĻā§āĻ˛āĻžāĻ¸ āĻāĻā§āĻ¸āĻā§āĻ¨ā§āĻĄ āĻāĻ°āĻāĻŋ āĻ¯ā§āĻŽāĻ¨āĻāĻž āĻāĻžāĻāĻžāĻ¸ā§āĻā§āĻ°āĻŋāĻĒā§āĻ āĻā§āĻ˛āĻžāĻ¸ āĻāĻŽā§āĻĒā§āĻ¨ā§āĻ¨ā§āĻā§ āĻāĻžāĻāĻāĻŋ āĻāĻ°āĻ¤āĻžāĻŽāĨ¤ āĻāĻ āĻā§āĻ˛āĻžāĻ¸ āĻāĻŽā§āĻĒāĻ¨ā§āĻ¨ā§āĻ āĻāĻŦāĻžāĻ° generic āĻ¤āĻžāĻ āĻāĻŽāĻ°āĻž āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻāĻ¨ā§āĻāĻžāĻ°āĻĢā§āĻ¸ āĻĒāĻžāĻ¸ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋ āĻ¯ā§āĻāĻž āĻāĻŽāĻžāĻĻā§āĻ° props āĻāĻŦāĻ state āĻāĻ° āĻāĻžāĻāĻĒ āĻĄā§āĻĢāĻŋāĻ¨ā§āĻļāĻ¨ āĻšā§āĻ˛ā§āĻĄ āĻāĻ°ā§āĨ¤ āĻ¯ā§āĻŽāĻ¨ <Props, State>
