React

React, Emmet, ESLint, Babel Packages

First make sure you have the following packages added to your project:

npm install --save-dev babel-eslint eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import mocha

On a fresh instal of Sublime text install the following with package control.

  • Babel
  • Emmet
  • SublimeLinter
  • SublimeLinter-contrib-eslint

After installation restart Sublime.  Now your files will have linting on them so you can see how nasty your code is. 😉

Sample .eslintrc for refference

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
 "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "forOf": true,
      "jsx": true,
      "es6": true,
      "experimentalObjectRestSpread" : true
    }
  },
  "rules": {
    "comma-dangle": 0,
    "indent": 0,
    "react/prop-types": 0,
    "react/jsx-indent-props" : 0,
    "linebreak-style": 0,
    "react/jsx-closing-bracket-location" : 0,
    "object-curly-spacing" : 0,
    "arrow-body-style": 0,
    "no-console": 0,
    "max-len": 0,
    "prefer-template": 0,
    "import/no-unresolved": 0,
    "global-require": 0,
    "no-underscore-dangle": 0
  },
  "plugins": [
    "react"
  ],
  "globals": {
    "__DEVSERVER__": true,
    "__DEVCLIENT__": true
  }
}

 

ReactGo – Steps to add a new data set to the store.

I’m documenting this because I want to make sure I catch everything for the eventual yeoman generator I intend to build….

Using my Material-UI modded version of ReactGo boilerplate (commit d5f71395f8eca8a0d9a1be162bbd20674d7cdcdd, Feb 16, 2017)

In order to support multiple datasets being loaded into one page from the router I’ve modded the current base to suit my needs summary of changes are on my version of the repo.  These changes were based on the work of @k1tzu & @StefanWerW

Right now I’ve got it down to a 12 step process… (whew!) lets get into it…

Continue reading…