Frontend

Все, что касается клиентской части вэб-разработки, помимо самой верстки.

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

Так как будем рассматривать только работу роутера в вэб-приложении, то нам потребуется только 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 означает точное совпадение пути.

Паттерн, позволяющий обходить правило одного корневого эелемента в компонентах React.

Подробнее

Как подключить и использовать компонент react-fontawesome библиотеки Font Awesome.

Подробнее

Инлайн стили в React передаются в компонент как обычные свойства (props). При этом, так как значение свойства передается в фигурных скобках, а стили передаются в виде объекта, то получается двойная фигурная скобка.

<header className="masthead" style={{ background: "url('img/home-bg.jpg')" }}/>

Страница 2 из 3

Frontend

Инструмент разработчика React Developer Tools

Быстрый старт React Router

React Fragments

Использование иконок Font Awesome в React

Инлайн стили в React