ReactJS #6: The Essential Tools for ReactJS Developer

This is a list of essential tools, libraries, and services from my own experiences that are required for every developer need to write reactjs apps. Whether your building simple apps or complex web, mobile or desktop application, these tools should make your life easier and will also increase productivity

we know that ReactJs is a simple javascript library for building the user interface. but it’s not a framework. so, in order to build, debug and deploy our apps, we need the following tools.

Development Tools

  1. visual Studio code : this is easy to write and debug your app code.
  2. Node.JS : Latest node.js version required to develop reactjs apps.
  3. TypeScript : This is also an open source superset of JavaScript that compiles to plain JavaScript.
  4. npm : npm is a package manager for node.js apps. it also provides CLI to manage packages easily.
  5. create-react-app : is used to create new React apps with no build configuration.
  6. TSLint  : TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors .

Debugging tools

  1. React Developer Tool for chrome: This is react debugging chrome devtool extension to debug and watch react component hierarchy in dom
  2. Debugger for Chrome : A VS Code extension to debug your JavaScript code in the Google Chrome browser.
  3. fiddler : Fiddler captures HTTP and HTTPS traffic and logs it for the user to review
  4. : This is a very useful tool to debug and identify whether dependency DLLs are loaded or not. This tool is very useful to debug when your app depends on native APIs or c++ add-ons.

Testing Tools

To test your app code , you can use one of the following Testing Tools.

  1. Jest : is JavaScript Testing Framework . its simple to use and don’t require any configuration. it’s fast and safe and very easy for mocking.
  2. React Testing Library: is a lightweight testing library for react components. it’s written on top of react-dom and react-dom/test-utils.
  3. Enzyme : is a JavaScript Testing utility for React that makes it easier to test your React Components’ output.

Build Tools

  1. create-react-app : Create React apps with no build configuration. when you create your react app with create-react-app , you don’t need to configure any other tools to build your apps. it provides an infrastructure for building, transforming, and live updating modules as well.
  2. Webpack : is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. (copied as it’s from web pack site  ) .  it also provides an infrastructure for building, transforming, and live updating modules.
  3. Babel  : is a tool that mainly used to convert ECMAScript 2015+ code into a backwards compatible of javascript code that any latest and old browsers can understand.

Deployment Tools

  1. Azure App Service Extension for VS Code: The Azure App Service extension is used to create, manage, and deploy Windows / Linux Web Apps on the Azure PaaS.
  2. FileZilla : This is an open source FTP tool and commonly used for deployment
  3. : you can use this tool to create a self-signed certificate for the express web server. for windows you can download here