Robur

Я мало что понял, но в таких ситуациях основная идея обычно такая:
- то что покажет страница, зависит от каких-то параметров.
- когда вы кликаете, вы меняете эти параметры, и соответственно параметрам меняется отображение страницы
- эти параметры где-то сохраняются, варианты разные, можно прямо в url можно в localStorage
- при загрузке страницы вы читаете эти параметры и смотрите, как надо поменять отображение страницы

например у вас есть кнопка "показать данные", если на нее кликнуть то загружается json и показывается.
при клике вы делаете это все и при этом сохраняете в localStorage "showJson=true"
при загрузке страницы вы смотрите, если showJson=true, то тут же делаете все то что делаете по клику, не дожидаясь пока польователь нажмет кнопку. Как будто он ее сразу же нажал.

при желании можно данные тоже сохранять, чтобы при загрузке их показать сразу же, а не делать запрос на сервер.

1. да, это файл для vscode помогающий редактору лучше понять где у вас что.
https://code.visualstudio.com/docs/languages/jsconfig
2. так как vscode крайне популярен, его поддержку добавили в create-react-app, чтобы брать оттуда какие-то параметры и облегчить настройку-конфигурацию сборки.
https://github.com/facebook/create-react-app/searc...

так сделано апи функциональных компонентов. В функцию передается объект в котором пропсы. Это устройство мироздания в данной локальной точке, смиритесь и делайте так как описано в документации.

Если вас фигурные скобочки смущают, можете писать

export const Notes = (props) => { // дальше props.arrList

Считайте что это одно и то же.
Последняя версия стандарта: https://www.ecma-international.org/publications/st...
там же есть ссылка на драфты разных фич.

Но, что из этого уже реализовано а что нет - сильно зависит от используемого js движка/препроцессора.
В разных версиях будет реализован разный набор из описанного в стандарте/драфте.

что где поддерживается можно в каком-то приближении посмотреть тут: https://kangax.github.io/compat-table/es6/

по простому:
this в стрелочной функции будет равен тому же чему равен был this в том месте где ее определили.

const x= this
setTimeout(() => console.log(this === x))  //true


class X {
  f() {
    const x=this
    setTimeout(() => console.log(x===this)) //true
   }
}

x=this
const obj = {
    y: ()=> console.log(x===this) //true
}

Ну и так далее.
Если вам не понятно что будет в x в таких примерах - читайте что такое this и как он работает, безотносительно к стрелочным функциям