Здравствуйте, недавно начал осваивать реакт, так что заранее прошу прощения за глупость этого вопроса.
Как подключить локальный файл libraries.json
с названием библиотек, вот сам код:
var MenuExample = React.createClass({
getInitialState: function(){
return { focused: 0 };
},
clicked: function(index){
this.setState({focused: index});
},
render: function() {
var self = this;
return (
<div>
<ul>{ this.props.items.map(function(m, index){
var style = '';
if(self.state.focused == index){
style = 'focused';
}
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
);
).
/** @jsx React.DOM */
var SearchExample = React.createClass({
getInitialState: function(){
return { searchString: '' };
},
handleChange: function(e){
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/'},
];
React.renderComponent(
<SearchExample items={ libraries } />,
document.body
);
Т.е. подгружать в переменную libraries
json-файл с названиями этих библиотек