diff --git a/src/App.ts b/src/App.ts index 8167ee7..55b3416 100644 --- a/src/App.ts +++ b/src/App.ts @@ -1,23 +1,5 @@ -import { createElement } from "react"; +import React from "react"; import ReactDOM from "react-dom"; import { Main } from "./Main"; -export class App -{ - constructor() - { - this.render(); - } - - public static addTwoNumbers(num1: number, num2: number): number - { - return num1 + num2; - } - - private render(): void - { - ReactDOM.render(createElement(Main, { app: this }), document.getElementById("app") || document.createElement("div")); - } -} - -new App(); \ No newline at end of file +ReactDOM.render(React.createElement(Main), document.getElementById("app")); \ No newline at end of file diff --git a/src/Main.tsx b/src/Main.tsx index be81e4c..d9d18fd 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -1,32 +1,15 @@ -import React, { Component } from "react"; -import { App } from "./App"; +import React, { FC } from "react"; import { Hello } from "./components/Hello"; -export interface MainProps +export const Main: FC = () => { - app: App; -} - -export class Main extends Component<MainProps, {}> -{ - constructor(props: MainProps) - { - super(props); - } - - public render(): JSX.Element - { - return ( - <> - <Hello message="React TypeScript Webpack Starter"> - <div className="features"> - <div>Webpack 5 + HMR</div> - <div>TypeScript + React</div> - <div>SCSS + Autoprefixing</div> - <div>Jest</div> - </div> - </Hello> - </> - ); - } + return ( + <Hello message="React TypeScript Webpack Starter"> + <div className="features"> + <div>Webpack 5 + HMR</div> + <div>TypeScript + React</div> + <div>SCSS + Autoprefixing</div> + </div> + </Hello> + ); } \ No newline at end of file diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx index 7d468b8..4c4422e 100644 --- a/src/components/Hello.tsx +++ b/src/components/Hello.tsx @@ -1,20 +1,18 @@ -import React, { Component } from "react"; +import React, { FC } from "react"; export interface HelloProps { message: string; } -export class Hello extends Component<HelloProps, {}> + +export const Hello: FC<HelloProps> = (props) => { - public render(): JSX.Element - { - return ( - <div className="hello"> - <h1>{this.props.message}</h1> - <div> - {this.props.children} - </div> + return ( + <div className="hello"> + <h1>{props.message}</h1> + <div> + {props.children} </div> - ); - } + </div> + ); } \ No newline at end of file