Which tools you need to develop web applications in ReactJS?

Tools:

• Visual studio code
• Chrome

Visual studio code extensions:

• Auto Import

This extension will propose to import the related type you add in your file. It works for scripts developed in TypeScript and TSX.

• Auto Import — ES6, TX, JSX, TSX

This extension not only works for scripts developed in TypesScript, TSX, but also for scripts developed in JSX.

• Bracket Pair Colorizer

This extension will colorise your code and make it more readable.

• ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

ESLint supports Javascript code and TypeScript code, whereas TSLint only supports TypeScript code.

ESLint uses Espree for JavaScript parsing. ESLint uses an AST to evaluate patterns in code. ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

You can check the rules proposed by ESLint.

• Reactjs code snippets

ReactJs code snippets will facilitate your development by providing a lot of shortcuts to create sample codes.

An example:

Some snippets:

You can find the full snippets list: here.

Chrome extensions:

• React Developer Tools

With React Dev Tools you can visualize components and profile your application.

• Redux DevTools

You can check the redux workflow in React applications developed with Redux.

And you can verify the state changes in each step of the redux workflow.