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.