Как реализовать шаблонизатор на ReactJS?

Question

[Username]

Добрый день, есть вёрстка, где в правой колонке расположено меню, справа контент.

1. Как можно реализовать шаблонизатор, по типу есть layout, в котором находится каркас вёрстки, происходит клик по левому меню, срабатывает react-router происходит смена контента и в меню подсвечивается активная ссылка?
   
2. React будет накатан на yii2, я создал asset с реактом, но как мне можно сделать import React from 'react' если библиотека находится в папке vendor?
   

Comments

[Никита Гущин]

Вы хотите использовать react в качестве рендера на бэкенде?

[Username]

Никита Гущин: Я просто хочу view отображать с помощью реакта

[Никита Гущин]

Username: если я все правильно понял - это плохая идея. реакт разработан, чтобы создавать standalone-приложения. Т.е. на yii2 вы делаете АПИ, и отдельно делаете фронтенд-приложение, которое будет к нему обращаться

Answer 1

[Максим]

На первый вопрос:

Оборачиваете все роуты в layoutWithSidebar компонент, в котором есть меню левое и в зоне контента this.props.children
Активная ссылка (гугл).
Пример, для роутера 3й версии:

//компонент NavLink для удобства
export default class NavLink extends Component {
  render() {
    return <Link {...this.props} activeClassName='active'/>
  }
}
...
<NavLink to='/url'>NAME</NavLink>

Comments

[Username]

А как вообще работает import React from 'react'
Это синтаксис es6, в большинстве проектов я не видел рядом лежащих react.js, откуда импорт происходит?

[Максим]

Username: документация . Там же сразу пример: если нет файла в директории, то потом поиск просходит там-то... в каком-то из видео скринкаста объясняется (в первых... нет возможности проверить, так как инет убогий в данный момент)