1. Fork, clone and install the Gatsby default starter
2. Install gatsby-plugin-typescript and TypeScript
3. Configure tsconfig.json and type-check script
4. Converting files to TypeScript
5. Setting up ESLint & Prettier
6. Setting up VSC

1. Clone and install the Gatsby default starter

So yes just fork the Gatsby default starter to your own Github account and clone it to your local machine from there.

• Go to https://github.com/gatsbyjs/gatsby-starter-default
• Clone the repository to your local machine with git clone git@github.com:gatsbyjs/gatsby-starter-default.git
• cd into the folder
• Run npm install
• Run npm run develop

2. Install TypeScript & gatsby-plugin-typescript and

TypeScript can be added to the devDependencies whilst Gatsby plugins should be added as a dependency:

npm install gatsby-plugin-typescript & npm install typescript --save-dev

And we need to enable the plugin gatsby-plugin-typescript in the gatsby-config.js file in the root of your project.

3. Add and configure tsconfig.json

Our config file should look something like this:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "noUnusedLocals": false
  },
  "exclude": ["node_modules", "public", ".cache"]
}

4. Converting files to TypeScript

Start renaming *.js files to *.ts and *.tsx (if they contain JSX).

We will need fixing the current type errors that TypeScript is screaming at us. I’m leaving the actual fixing of these errors for the follow-up blog post. For now, please bear with me as we set-up a linter.

5. Setting up ESLint and Prettier

To set up ESLint with TypeScript, Prettier and some React best practices, we’ll need to add a bunch of devDependencies:

npm add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react --save-dev

And after all packages are installed, let’s add a .eslintrc.js file in the root of the project. Example of ESLint configuration:

module.exports = {
  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  settings: {
    react: {
      version: 'detect'
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ['@typescript-eslint', 'react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },
  rules: {
    'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
    '@typescript-eslint/explicit-function-return-type': 'off'
  },
  overrides: [
    // Override some TypeScript rules just for .js files
    {
      files: ['*.js'],
      rules: {
        '@typescript-eslint/no-var-requires': 'off' //
      }
    }
  ]
};

Adding Lint Scripts

To make life easier on ourselves we’ll add two lint scripts to our package.json

"scripts": {
  ...
  "lint": "eslint --ignore-path .gitignore . --ext ts --ext tsx --ext js --ext jsx",
}

Once called it will run on every *.ts,*.js,*.tsx and *.jsx file and shows you the errors.

6. Setting up the editor

Add this

"eslint.validate": [
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],

To your general settings.json

We also need to install type definitions for our packages but I will leave that for you, just google it and you will get the general idea.

I hope that this post gave you a basic idea on how to do the initial setup of GatsbyJS + Typescript + ESLint + Prettier.

And the problem is that I was getting

Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.

The problem is that i was using Hook inside of Initialize function of useReducer Hook

And it took me a while to find where I was getting this from.

As a solution I tried to pass that hook value that Im trying to get inside of Initialize function directly from the functional component where I use the useReducer hook but it turns out that init function only accepts only one argument so that was a bummer 🙃 .

My simple and time saving solution was just to get rid of the init function and set try to determine initial state directly in my functional component and that worked just fine

Before

export const InitState = (initialState: ReviewPanelState) => {
  const hookMeUp = useMyHook(); // <= PROBLEM

  return {
    ...initialState,
    yyy: hookMeUp.yyy,
  };
};

export const FunComp = ()=>{
const initialState = {
    xxx: 1,
    yyy: 2,
  };

const [state, dispatch] = React.useReducer(MyReducerFun, initialState, InitState);

...aaand so onnn...
}

After

export const FunComp = ()=> {

const hookMeUp = useMyHook();

const xxx =  hookMeUp.xxx;
const yyy =  hookMeUp.yyy;

const initialState = {
    xxx,
    yyy
};

const [state, dispatch] = React.useReducer(MyReducerFun, initialState);

...aaand so onnn...
}

links:

• https://reactjs.org/docs/hooks-reference.html

You can only use Hooks in functional components, and you can use lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a class components.

From the React doc:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

So you will need to mimic lifecycle methods from class component in a functional components.

Code inside componentDidMount run once when the component is mounted. useEffect hook equivalent for this behavior is:

useEffect(() => {
  // Your code here
}, []);

Notice the second parameter here is empty array []. This means that it will run only once.

Without the second parameter the useEffect hook will be called on every render of the component which can be dangerous.

useEffect(() => {
  // Your code here
});

componentWillUnmount is use for cleanup (like removing event listeners,.. etc). Say you are adding a event listener in componentDidMount and removing it in componentWillUnmount as below.

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

Hook equivalent of above code will be something like this:

useEffect(() => {
  //listener will be added on component mounted
  window.addEventListener('resize', () => {});

  //return function is called on component unmount 
  return () => {
    window.removeEventListener('resize', () => {})
  }
}, [])

Custom hook that will run a function once before first render.

import { useState, useEffect } from 'react'

export useBeforeFirstRender (f) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    f()
  }
}

Usage:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'

export const MyComponent = () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

UPDATE

I found this good answer from Dan Abramov on his blog: https://overreacted.io/a-complete-guide-to-useeffect/#tldr

🤔 Question: How do I replicate componentDidMount with useEffect?

While you can useEffect(fn, []), it’s not an exact equivalent. Unlike componentDidMount, it will capture props and state. So even inside the callbacks, you’ll see the initial props and state. If you want to see “latest” something, you can write it to a ref. But there’s usually a simpler way to structure the code so that you don’t have to. Keep in mind that the mental model for effects is different from componentDidMount and other lifecycles, and trying to find their exact equivalents may confuse you more than help. To get productive, you need to “think in effects”, and their mental model is closer to implementing synchronization than to responding to lifecycle events.

I like this part a lot, I think it makes sense and instead of trying to replace lifecycles with hooks we need to think in effects:

Keep in mind that the mental model for effects is different from componentDidMount and other lifecycles, and trying to find their exact equivalents may confuse you more than help. To get productive, you need to “think in effects”, and their mental model is closer to implementing synchronization than to responding to lifecycle events

In JavaScript objects are incredibly important, and while developing you are going to spend a lot of time with them. Let’s first get on with name/value pairs.

Name/Value Pair:
A name which maps to a unique value
The name may be defined more than once, but only can have one value in any given context.
The value may be more name/value pairs.

As said the name can be defined more then once, but can have one value in any given context( and here by context we mean execution context see in part 1 of xx) that is a section of code that is running a name can only exist and be defined with one value. However, this value may be more Name/Value pairs.

It’s simple. All I’m trying to say here is that there’s a name, and that name is assigned a value, but that value can be other collection of Name/Values

Example: This is a Name/Value pair.

country = 'Macedonia'

//in this case country is the name and Macedonia is the value

Now, when we’re talking about objects, we will use this Name/Value pair concept to define them.

Object:
A collection of Name Value pairs
This is the simplest possible definition of JavaScript object

For let’s have a name and collection of Name/Value pairs.

So, here we have a name and a value, and the first value is the list of names that have values. The second value has only one name/value.

Another more concrete example:

Address:
{
 Street: `Partizanska`
 Number:  1020
 Apartment: 
 { 
  Floor: 7
  Number: 301
 }
}

Address is a collection of Name/Value pairs. Address is a name but the value is a collection.
Street: 'Partizanska' is a Name/Value pair.
Number: 1020 is a Number/Value pair.
Apartment: is a name and it’s value is another list or of Name/Value pairs.

When we are talking of objects in JavaScript we’re talking about collection of Name/Value pairs, and that value might itself be another object.
At it’s core this is what an object is in JavaScript.

Syntax Parsers, Execution Contexts, and Lexical Environments are concepts and ideas that are fundamental in JavaScript and with time you will build upon them.

They sound complicated but actually aren’t that difficult to understand.

Let’s break this big word:

Syntax Parsers

That’s a program that reads your code and determines what it does and if it’s grammar is valid.
Your code isn’t magic. Someone else wrote a program that can translate it for the computer.

When you write JavaScript it’s isn’t magically directly telling the computer what to do. We are abstracted away from this translation part, we are just writing code and then `something` else some program that was written from other people convert JavaScript into something that computer can understand.

Those programs are called compilers, interpreters. They read your code character by character and determining if the syntax is valid and then implementing that syntax in a way that computer can understand.

Lexical Environments

Where something sits physically in the code you write.
`Lexical` means ‘having to do with words or grammar’. A lexical environment exist in programming languages in which where you write something is important.

Lexical environment exist in programming languages in which where you write something is important — meaning that where you see things written gives you an idea of where it will actually sit in the computer’s memory and how it will interact with other variables and functions and element of the program.

That syntax parses from before cares about where you put things.
So, when you will hear about lexical environment of something in the code it actually means about where it’s written and what surrounds it : )

Execution Contexts

A wrapper to help manage the code that is running.

There are lots of lexical environments areas of the code that you are looking at physically. But which one is currently actually running? Is managed by execution context. And an execution context contains your code and It can contain things beyond what you’ve written in your code

What do you mean things beyond my code!?
Because remember our code is being translated by whole other set of programs that someone else wrote. And so, it’s executing our code and it can do other things as well and that’s what’s happening inside JavaScript.

Just remember, It’s important for you to understand these terms if you want to understand fundamentals of JavaScript. They will give us a basis to understand what’s happening under the hood in JavaScript.

For creating awesome new stuff (and maintaining old ones of course) every day I use Visual Studio Code.
Everything is well organized and I use it as my main tool for development.

I guess you already know how great this editor is so I won’t shoot you here with other things about VSC.

Anyway as I was using it everyday some projects would become pretty deep nested in directories, and paths to them would become long as hell.

I hate seeing that long path every time I write some command, there is no need for that.
In best interested is to keep things simple and focus on what is important, I already have a lot of code in front of me why bothering with long paths

After seeing this “long path thing” as a problem and searching for some sort of solution to shorten windows powershell path I found pretty good easy and simple solution.
It did not worked at first (of course) a lot of “how tos” are out of date and not all steps are correct(in my case file was missing wtf?! — it was not even mentioned as possible case).

Here is the solution:
1) open powershell (in VSC would be nisser) ctrl + `
2) $profile

And you will get your path on where that profile file is or should be located.
In my case it wasnt there so just follow that location, so create file in that location
With the same name as displayed in console — from the screenshot above “Microsoft.PowerShell_profile.ps1”

Once create open it in VSC or any other editor (tip: if you click console link when holding ctrl it will open in VSC ; ) )

Add this code into this file:

And the result:

You can edit last line however you want just keep that $p variable there
Test case for that: