How to run eslint in Terminal / Shell

npm install && npm i -g eslint && npx eslint --ext .tsx --ext .ts ./

Please heed that npm install is used here to start my React application, which uses it as a build tool. IMportant

npm i -g eslint will install eslint, if it does not exist yet (for example a CI with Jenkins).

The npx eventually executes eslint for all files with ending .tsx or .ts recursively in the current directory. Please adapt the endings according to your needs – when you do not use TypeScript but JavaScript change it to .js

How to check Typescript Code with ESLint in IntelliJ or Webstorm

In your package.json add this example config:

 "eslintConfig": {
    "parserOptions": {
      "parser": "babel-eslint",
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {
      "Vue": true
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ],
    "extends": [
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "quotes": [
        "error",
        "double",
        {
          "avoidEscape": true
        }
      ],
      "comma-dangle": [
        "error",
        {
          "arrays": "ignore",
          "objects": "always-multiline",
          "imports": "never",
          "exports": "never",
          "functions": "ignore"
        }
      ],
      "arrow-parens": 0,
      "no-tabs": 0,
      "indent": [
        "error",
        "tab",
        {
          "SwitchCase": 1
        }
      ],
      "no-console": 1,
      "generator-star-spacing": 0
    }
  }

In your IDE terminal, execute:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

In IntelliJ settings, add:

From now on, when you open your .ts or .tsx files, the ESLint will detect the errors.

You can open the context menu then, by clicking the right mouse tab and click on „Fix ESlint Problems“.

IntelliJ will then automatically fix the problems.

How to create an NPM Package

You want reusable components, elements? Flexible structure?
Separation of concerns, decoupling in your JS Code?

A good strategy is to create an NPM Package.

  • Identify the code you would like to decouple.
  • create a new project
  • create an src folder
  • paste the JS or TS files in that folder
  • install the missing dependencies like Typescript, TSlint, Material UI
  • Write UNIT Tests to test your code before publishing it

I use JEST and to include the relevant Code, add this to your tsconfig.json:

    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/__tests__/*"] 

Before the package is published, you can test it locally:

  • In your terminal, run npm link
  • This will compile and create a symbolic link, pointing to another directory/files on your development machine.
  • Now include the new package as a dependency. In your terminal, run npm link <module_name>
  • If everything can be imported and used, the test work and you are satisfied, perform npm unlink --nosave <module_name> on your main projects directory. This will remove the symbolic link.
  • Then run npm unlink to also remove the global link.

Now you have extracted and published Code as NPM package.

React Hook Component Conditional Rendering

The HTML is rerendered after click and displays the chosen content.

We use a stateful variable.

The stateful variable (here, a boolean) is called ‚condition‘ 😉 :

const [condition, setCondition] = useState(false);

The #useEffect method to react on variable state change:

useEffect(() => {
    ...
},[condition]);

The methods for the buttons:

const handleClickSomething01 = () => setCondition(true);
const handleClickSomething02 = () => setCondition(false);

The returned HTML:

if (condition === true) {
    return (
        <div>
            <Button variant="contained" 
                    color="primary" 
                    onClick={handleClickSomething02}>
                Primary
            </Button>
            <Button variant="contained" 
                    color="secondary" 
                    onClick={handleClickSomething01}>
                Secondary
            </Button>CONDITION fullfilled
        </div>
    );
} else {
    return (
        <div>
            <Button variant="contained" 
                    color="primary" 
                    onClick={handleClickSomething02}>
                Primary
            </Button>
            <Button variant="contained" 
                    color="secondary" 
                    onClick={handleClickSomething01}>
                Secondary
            </Button>CONDITION not fulfilled
        </div>
    );
}

You will notice that this example uses duplicated code (sort of, a few details differ).
Why did I do this?
I have debugged so many unmaintainable Frontends during the last two decades and nearly always the obstacles where too many detailed conditions in the HTML.

Instead, by using IF/ELSE and clearly depict the HTML without conditional renderings within, the Code will be easier to maintain in the long run.

Of course, this is my personal experience and also a matter of Clean Code paradigms.
In some cases, am using inline conditions, inside the HTML lines, too. But as we Architects like to say: IT DEPENDS 😉




React – use CSS depending on states (change class according to a variable’s state)

For this example I use React Hooks and a Component with a stateful variable.
When the variable is changed, the CSS class is changed accordingly.
The part in the component is automatically re-rendered on the fly.

//The variable is called 'active'. 
//This is an example. Choose any name.
const [active, setActive] = useState(0);

We use the constant #getStyle to return a CSS class name based on the variable.

    const getStyle = (input) => {
        if (input === active){
            // This example is freely chosen. 
            //button-active is the CSS class' name
            return "button-active";
        } else {
            return "button-inactive";
        }
    };

The return statement returns rendered HTML.

//The hard coded value 0 can be any dynamic 
//variable from JS or React, like one from the 
//props (Properties) object
return (
  <div className={getStyle(0)}>
  </div>
);
  • Stateful variable called ‚active‘
  • Const named #getStyle with an input parameter
  • render method returning HTML with a css class name
  • Input is provided to the #getStyle const
  • If the variable ‚active‘ is changed by the application somewhere, the HTML is re-rendered
  • The input is compared to the variable and the name of the CSS class returned

CSS Grid Layout Example – Visible Structure – Easy Tutorial

4 Items, stretched with different sizes across a Matrix 4×4 grid.

You can see the Grid structure in the CSS in this example.

Picture:

CSS:

.item-a {
    grid-area: itemA;
    border: 1px solid violet;
}
.item-b {
    grid-area: itemB;
    border: solid 1px cyan;
}
.item-c {
    grid-area: itemC;
    border: solid 1px yellow;
}
.item-d {
    grid-area: itemD;
    border: solid 1px red;
}

.container {
    height: 100%;
    border: solid 1px green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
            "itemA itemA itemC itemC"
            "itemA itemA itemC itemC"
            "itemA itemA itemD itemD"
            "itemA itemA itemD itemD";

HTML (in this example a React JS Grid):

return (
        <Grid className={"container"}>
            <Grid item className={"item-a"}></Grid>
            <Grid item className={"item-b"}></Grid>
            <Grid item className={"item-c"}></Grid>
            <Grid item className={"item-d"}></Grid>
        </Grid>
    );

React – stateful variables and objects (State) & Hooks & Components

Imagine you want to re-render a Component when a variable changes its state.

Your Component:

function MyComponent(props) {

Your variable, a name:

const [name, setName] = useState("OLD NAME");

A #useEffect method to react to changes of that specific variable:

useEffect(()=>{
    alert('new name!');//a small alert to show you the effect immediately
    setName('NEW NAME');
}, [name]);

…and a return with that name being rendered:

return (
    <div className={"someFancyCssClass"}>{name}</div>            
);

Note that, in this example, the initial OLD NAME is immediately replaced.
Reason for it: we set the name during initialization in the const.

React – Howto redirect to other component

Sometimes, for example on a login, you want to redirect the User to another page in your application.

We assume that your Application has the default address of http://localhost:3000.

In this example, the application has the path localhost:3000 and you can navigate to the news with /news.

import {Redirect} from "react-router-dom";
//... your program code goes here...

return(
   <Redirect to='news'/>
);

The return statement will redirect to localhost:3000/news