Create and use components in a React+Typescript project environment

React+Typescript cleans up the project environment above . We cleaned up the project environment we created.
Let's look at the creation of components. Componentization is definitely very important in this kind of data-responsive development.

We now create a folder called components under src

and use it to handle component business

Then we create a hello.tsx below,
pay attention to tsx, don’t get used to jsx,
and then write code in hello.tsx as follows

import * as React from "react";

export default class hello extends React.Component {
    
    
    public render() {
    
    
        return (
            <div>hello</div>
        )
    }
}

Here we declare a scope for the render function through public. Of course, this can also be omitted.

Then we find App.tsx under src and rewrite it like this

import Hello from "./components/hello";

function App() {
    
    
  return (
    <div className="App">
        hello React Typescript
        <Hello/>
    </div>
  );
}

export default App;

Here we simply introduce the component hello
and put the component in the div.
We run the project
and we can see that there are indeed no problem components.

Then here we will make some small adjustments to the constructor.

First, we use public to modify the scope of the constructor public. Then
we need to declare the type of the parameter here because we don't know what props is and directly go to any

More grammar, we will talk about it later,
the grammar of the overall component is still the same as before