Realizing Dependency Inversion Principle with Flow in React.

We can make our codes static with Flow.

// @flowtype Props = {
name: string,
age: number
}
export default class Person extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.state = {
name: props.person.name,
age: props.person.age,
};
}
render() { return(
<div>
{this.state.name}
{this.state.age}
</div>
)
}
}
import Person from './Person.js'export default class Person extends React.Component<Props> {
constructor(props: Props) {
super(props);
this.state = {
name: name // getting by API,
age: age // getting by API,
};
}
componentDidMount(){
// Some APIs
}
render() { return(
<div>
<Person name={this.state.name} age={this.state.age}
</div>
)
}
}