sessionStorage - одно из свойств объекта window (т.е. целого вэб-документа).

Оно позволяет устанавливать пары ключ-значение, сохраняя их на компьютере пользователя в течении установленного срока (сессии). Как правило, свойство sessionStorage используется для сохранения данных пользователя на время текущей сессии. Для работы со свойством существует 4 javascript функции (метода), позволяющих соотвественно задавать, считывать, удалять пару или очищать полностью все элементы.

// установить пару ключ - значение
sessionStorage.setItem("key", "value");
// считать значение по ключу
var lastname = sessionStorage.getItem("key");
// удалить значение по ключу
sessionStorage.removeItem("key");
// удалить все сохраненные данные 
sessionStorage.clear();

    Существует также localStorage, имеющее те же свойства, но без ограничения времени хранения.

Значения sessionStorage и localStorage имеют тип строка, но есть возможность записывать в них и объекты, используя при этом JS-функцию JSON.stringify()

var myJSON = JSON.stringify(obj);

React Developer Tools - это дополнение к браузеру Google Chrome от компании Фэйсбук, которое служит очень полезным инструментом при работе с React. Дополнение создает еще одну вкладку (React) в Инструментах разработчика (Ctrl+Shift+I), позволяющую произвести инспекцию всего реакт-приложения, включая компоненты, а также их свойства и состояния (state, props).

Современная версия языка JavaScript, носящая название ES2015, он же ES6,  получила ряд дополнительных возможностей, которые хотелось бы рассмотреть отдельно.

1. Деструктуризация (destructuring assignment)

Деструктуризация это выражение, позволяющее преобразовать объект или массив в список переменных, выражение слева содержит список переменных, выражение справа - объект или массив, который нужно преобразовать.

let {a, b, ...rest} = {a: 100, b: 200, c: 300, d: 400}
a; // 100
b; // 200 
rest; // { c: 300, d: 400 }

Если число переменных меньше, чем в объекте, то оператор спред "..." после переменных позволяет добавить все остальные элементы массива или объекта в переменную после "...". 

продолжение следует...

Так как будем рассматривать только работу роутера в вэб-приложении, то нам потребуется только react-router-dom, устанавливаем.

npm install --save react-router-dom

Импортируем в приложение три компонента

import { Route, BrowserRouter, Switch} from 'react-router-dom';

Общая структура приложения с шаблоном.

class App extends Component {
  render() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" component={ LayoutComponent } />
            </Switch>
        </BrowserRouter>
    );
  }
}

export default App;

Компонент шаблона будет подключаться при любом path, содержащем "/".

Настраиваем маршруты в шаблоне.

class LayoutComponent extends Component {
    render() {
        return (
            <div>
                <NavComponent/>
                <HeaderComponent/>
                <Switch>
                    <Route exact path="/" component={ MainComponent } />
                    <Route path="/index.html" component={ MainComponent }/>
                    <Route path="/company.html" component={ AboutComponent } />
                </Switch>
                <FooterComponent/>
            </div>
        );
    }
}

export default LayoutComponent;

Параметр exact означает точное совпадение пути.