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.

--

--

--

Senior .NET engineer, passionate about new technologies. www.sunjiangong.com

Love podcasts or audiobooks? Learn on the go with our new app.

Calculator build with JS [1]

Android: Detect when app is in foreground or background

//platform.twitter.com/widgets.js from Twitter https://twitter.com/thepoolsideceo

How to Build a React Native Application on Your Apple IOS Device

TypeScript + GCP Secret Manager + Firebase + App Engine + Multiple Environment— Better Credential…

The problem of a React application without Redux

Electron multiple window — React Redux Saga

How To Protect Next.js Apps with Jscrambler

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jiangong Sun

Jiangong Sun

Senior .NET engineer, passionate about new technologies. www.sunjiangong.com

More from Medium

3 React Libraries Every Project Should Use

Deploy a react app to a subdirectory

How to Convert Figma Designs to React Code

How to Build a Basic CRUD App with NextJS, React, Redux, Observable and MUI5 Components