ReactJS Static Type Checking
In react, there are two ways to implement the Static Type Checking
There are different advantages of using Static Type Checking as follows :
- Identifying type errors before runtime
- Improved workflow because of auto-complete
- Detection of errors in the early stage
- Easy to read Code
We prefer to use the flow because it is lightweight and it is developed by Facebook.
Let’s create a react application to check Static Type Checking :
Creating React Application
Step 1: Create a React application using the following command:
npx create-react-app example
Step 2: After creating your project folder i.e. example, move to it using the following command:
Step 3: Now from the root directory of your project in the terminal, run the following command
npm install --save-dev flow-bin
This will add flow to our react app.
Package.json: After the installation, add Flow in the scripts section of the package.json file. The file will be like this:
Step 4: Then run this command from a terminal
npm run flow init
Project Structure: It will create a config file as shown in the folder structure below
Step 5: Replace the content of .flowconfig file with below
[ignore] .*/node_modules/.* .*/src/registerServiceWorker\.js .*/src/index\.js .*\.test\.js [include] [libs] [lints] [options] all=true [strict]
Now make App.js like below with an example for static type check.
Step to run: Now from the terminal run
npm run flow
Output: This way we do static type checking in react.