Material UI + React JS как запустить хоть один пример?

Question

[Carry]

Подскажите как запустить вот такую панельку material-ui.com/#/components/left-nav у себя на странице?
что-то ничего не пойму..... т.к. примеров нигде не нашел
P.S. все компоненты подключил. Но что писать в Html документе не пойму

Answer 1

[Pavel Shvedov]

Если все подключили, то надо отрендерить компонент на странице. Как это делается - ищите в доках реакта. Пытаться использовать библиотеку и расширения для нее, не зная основ работы с самой библиотекой - занятие бесполезное. Учите сначала принципы самого реакта, а потом уже смотрите в сторону всевозможных расширений

Answer 2

[Александр]

Возьмите готовый код что бы разобраться https://github.com/lern/react-material-webpack-boi...

git clone https://github.com/lern/react-material-webpack-boilerplate.git m
cd m
npm install
npm run hot-dev-server
# ждем пока запустится сервер и открываем ещё один терминал в этой же папке.
npm run start-dev
# и переходим 
http://localhost:8080/

Answer 3

[Андрей Антропов]

// в хэндлере кнопки, которая будет переключать состояние панельки 
this.refs.leftNav.toggle();

// В render методе
<LeftNav ref="leftNav" menuItems={menuItems} />

Answer 4

[pomeo]

ну так есть же эта текущая страница с примером, загляните в её исходник, всё там есть
https://github.com/callemall/material-ui/blob/mast...

Comments

[Carry]

если бы было все так просто, я ни одного примера не нашел во всем интернете!
я вставил JS код и пытался вызвать
React.render(, document.getElementById('example'));
на элемент, но не работает как и следовало ожидать)
сообщения console
You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - facebook.github.io/react/docs/tooling-integration....
Inline JSX script:2 Uncaught SyntaxError: Unexpected identifier

let React = require('react'); // первая же строка дает ошибку

[pomeo]

Carry: вы же понимаете, что вам надо пропустить этот код через babel и что-нибудь, что понимает require?

[Carry]

т.к. я с таким не работал
у меня были только догадки, что нужно насколько я понял - "роутер"
спасибо - буду дальше копать

[pomeo]

Carry: роутер тут не причём. Большинство примеров react, если не все, это es6. Который поддерживается браузерами малыми частями. А require вообще в браузерах не работает.