Create React app configuration

create-react-app-config.md

Starting a new project

npx create-react-app projname

Some standard config

Tips on setting up prettier and eslint: https://www.youtube.com/watch?v=bfyI9yl3qfE. Also here

eslint

Install the eslint extension into vscode

Add a .eslintrc.json file with the following contents

{
  "extends": [
    "airbnb",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "prettier/react"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "prettier/prettier": [
      "error", {
        "singleQuote": true,
        "jsxBracketSameLine": true,
        "bracketSpacing": false
      }
    ]
  }
}

prettier

Now make sure Prettier code formatter is installed in vscode. The approach is to let eslint run prettier for js.

npm i eslint eslint-plugin-import eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-jsx-a11y --save-dev

Now update your vscode settings:

{
  "editor.tabSize": 2,
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.jsxBracketSameLine": true,
  "prettier.tabWidth": 2,
  "prettier.singleQuote": true,
  "prettier.disableLanguages": ["js"]
}

Add our standard dependencies

Bootstrap

First, some bootstrap 4. I prefer to use the raw libs, rather than using the canned react-bootstrap lib.

This requires a little more setup work, but I like the control options it gives me. Dan A has a gist for this here

npm i jquery bootstrap popper.js

Now, inside the index.js file, add some imports as follows

import $ from "jquery";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
window.jQuery = $;
require("bootstrap");