[React] Remove React PropTypes by using Flow Annotations (in CRA)

Posted 2020-10-05 Answer1215

Starting from v15.5 if we wanted to use React‘s PropTypes we had to change our code to use a separate node module, now we can go one step further and get rid of that extra dependency just by using flow type annotations in our create-react-app project!

 

Install:

yarn add flow-bin

 

Scripts:

"flow": "flow"

 

Run:

npm run flow init
npm run flow

 

Add flow annotations:

// @flow

import {createStore} from ‘redux‘;
import reducer from ‘./reducers/todo‘;

export type TodoType = {
    id: number,
    name: string,
    isComplete: boolean
};

export type StateType = {
    todos: Array<TodoType>,
    currentTodo: string
};

const initState: StateType = {
    todos: [
        {id: 1, name: ‘Render static UI‘, isComplete: true},
        {id: 2, name: ‘Create initial state‘, isComplete: false},
        {id: 3, name: ‘Render based on state‘, isComplete: true}
    ],
    currentTodo: ‘Temp‘
};

const store = createStore(reducer, initState);

export default store;

 

Import a flow type:

// @flow
import React from ‘react‘
import {connect} from ‘react-redux‘;
import type {TodoType} from ‘../store‘;


const TodoItem = ({id, name, isComplete}: TodoType) => (
    <li>
        <input type="checkbox" defaultChecked={isComplete} />
        {name}
    </li>
)

const TodoList =  (props: {todos: Array<TodoType>}) => (
    <div className="Todo-List">
        <ul>
            {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
        </ul>
    </div>
);

export default connect(
    (state) => ({todos: state.todos})
)(TodoList);