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
npm install --global yarn
2. Install the Git CLI & 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
- Debugger for Chrome
- Eslint
- Prettier - Code formatter
- vscode-icons
- Auto Import
- Auto Close Tag
- Auto Rename Tag
- Import Cost
- TODO Highlight
- 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.