Здравствуйте, недавно начал осваивать реакт, так что заранее прошу прощения за глупость этого вопроса.
Как подключить локальный файл libraries.json с названием библиотек, вот сам код:
/** @jsx React.DOM */
var MenuExample = React.createClass({
getInitialState: function(){
return { focused: 0 };
},
clicked: function(index){
// Обработчик клика обновит состояние
// изменив индекс на сфокусированный элемент меню
this.setState({focused: index});
},
render: function() {
// Здесь мы читаем свойство items, которое было передано
// атрибутом, при создании компонента
var self = this;
// Метод map пройдется по массиву элементов меню,
// и возвратит массив с <li> элементами.
return (
<div>
<ul>{ this.props.items.map(function(m, index){
var style = '';
if(self.state.focused == index){
style = 'focused';
}
// Обратите внимание на использование метода bind(). Он делает
// index доступным в функции clicked:
return <li className={style} onClick={self.clicked.bind(self, index)}>{m}</li>;
}) }
</ul>
<p>Selected: {this.props.items[this.state.focused]}</p>
</div>
);
}
});
// Отображаем компонент меню на странице, передав ему массив с элементами
React.renderComponent(
<MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
document.body
);
полный пример JSFiddle
Вы, вероятно, заметили в коде данного примера, что мы используем атрибуты, как className, которых, на самом деле не существует в HTML. Это из-за того, что когда мы возвращаем элемент , мы на самом деле не возвращаем HTML, а только объект компонента React.DOM.p. Вы можете узнать об этом больше по этой ссылке.
3. Мгновенный поиск
Мы уже неоднократно убеждались в том, что пользователи не любят ожидание. Вот как вы можете использовать React для построения мгновенного поиска. (Для сравнения, смотрите нашу версию с AngularJS).
/** @jsx React.DOM */
// Давайте создадим компонент мгновенного поиска
var SearchExample = React.createClass({
getInitialState: function(){
return { searchString: '' };
},
handleChange: function(e){
// Если вы закомментируете данную строку, поле ввода не изменит свое значение.
// Это потому, что в React'е, поле не может измениться независимо от свойства
// которое было ему присвоено. В нашем случае, это this.state.searchString.
this.setState({searchString:e.target.value});
},
render: function() {
var libraries = this.props.items,
searchString = this.state.searchString.trim().toLowerCase();
if(searchString.length > 0){
// Ищем. Фильтрируем резальтаты.
libraries = libraries.filter(function(l){
return l.name.toLowerCase().match( searchString );
});
}
return <div>
<input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
<ul>
{ libraries.map(function(l){
return <li>{l.name} <a href={l.url}>{l.url}</a></li>
}) }
</ul>
</div>;
}
});
var libraries = [
{ name: 'Backbone.js', url: 'http://documentcloud.github.io/backbone/'},
{ name: 'AngularJS', url: 'https://angularjs.org/'},
{ name: 'jQuery', url: 'http://jquery.com/'},
{ name: 'Prototype', url: 'http://www.prototypejs.org/'},
{ name: 'React', url: 'http://facebook.github.io/react/'},
{ name: 'Ember', url: 'http://emberjs.com/'},
{ name: 'Knockout.js', url: 'http://knockoutjs.com/'},
{ name: 'Dojo', url: 'http://dojotoolkit.org/'},
{ name: 'Mootools', url: 'http://mootools.net/'},
{ name: 'Underscore', url: 'http://documentcloud.github.io/underscore/'},
{ name: 'Lodash', url: 'http://lodash.com/'},
{ name: 'Moment', url: 'http://momentjs.com/'},
{ name: 'Express', url: 'http://expressjs.com/'},
{ name: 'Koa', url: 'http://koajs.com/'},
];
// Отображаем компонент SearchExample на странице
React.renderComponent(
<SearchExample items={ libraries } />,
document.body
);
Т.е. подгружать в переменную 'libraries' json-файл с названиями этих библиотек.
