Setup environment for react development

This is a quick post to show how to setup environment for react development. The main content is about using React in Visual Studio Code.

1. Install Node.js and yarn

• Install Node.js. When installing nodejs, it installs the included npm.
• Install yarn

npm install --global yarn

2. Install the Git CLI & VS Code

• Download Git CLI
• Download Vs Code

3. Using React in Visual Studio Code

VS Code comes with built-in support for JavaScript, TypeScript and Node.js.

3.1. Recommended Extensions

1. Debugger for Chrome
2. Eslint
3. Prettier - Code formatter
4. vscode-icons
5. Auto Import
6. Auto Close Tag
7. Auto Rename Tag
8. Import Cost
9. TODO Highlight
10. GitLens

3.2. Setting auto format code on save

Open settings.json and edit as below

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true,
   "source.organizeImports": true
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
"editor.formatOnSave": true

4. Commonly Tools used during development

• JSON blob: JSON Blob was created to help parallelize client/server development. Mock JSON responses can be defined using the online editor and then clients can use the JSON Blob API to retrieve and update the mock responses.
• Chrome Inspect Devices: Remote debug Android devices. You can install Inspect Devices extension to open it faster.
• JSON Utilities: JSON Utils is a site for generating Javascript, Typescript... classes from JSON. It will also clean up your JSON and show a data viewer to assist you while you are developing.