21. Volto App Development#

21.1. Editor#

The variety of editors is big. Try VSCode if you do not already use it and don't have a strong alternative preference. VSCode comes with a good support for programming React apps and development in general.

VSCode extensions:

  • "Add jsdoc comments"

    Adds simple jsdoc comments for the parameters of a selected function signature.

  • "Better Comments"

    Improve your code commenting by annotating with alert, informational, TODOs, …

  • "Babel JavaScript"

    Syntax highlighting for Javascript and React

  • "Easy Snippet"

    Turn your selection into a snippet.

21.2. Tools#

21.2.1. Browser Development Tools#

React components can be inspected with React Developer Tools: props, hierarchy, and a lot more.

The Redux store and actions can be inspected with Redux Developer Tools.

21.2.2. Postman#

Postman is an app that lets you execute and save requests. We will request REST API endpoints of the backend later with actions.

Download Postman

21.3. Tips#

A variables value can of course always printed to the developer tools console with console.debug("var_name", var_name). But if you want to see values inside rendered components and the value is an Object, than this is also possible. Just include {JSON.stringify(var_name_object)} in your components html code.