1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> class Item extends React.Component { render() { return <li>{this.props.name}</li>; } } class ItemsList extends React.Component { render() { return( <div> <h2>{this.props.title}</h2> <ul> <Item name="iPhone 7" /> <Item name="HTC U Ultra" /> <Item name="Google Pixel" /> </ul> </div>); } } ReactDOM.render( <ItemsList title="Список смартфонов" />, document.getElementById("app") ) </script> </body> </html> |
2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> const propsValues = { title: "Список смартфонов", items: [ "HTC U Ultra", "iPhone 7", "Google Pixel", "Hawei P9", "Meizu Pro 6", "Asus Zenfone 3" ] }; class Item extends React.Component { render() { return <li>{this.props.name}</li>; } } class ItemsList extends React.Component { render() { return( <div> <h2>{this.props.data.title}</h2> <ul> { this.props.data.items.map(function(item){ return <Item key={item} name={item} /> }) } </ul> </div>); } } ReactDOM.render( <ItemsList data={propsValues} />, document.getElementById("app") ) </script> </body> </html> |
3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> const propsValues = { title: "Список смартфонов", items: [ "HTC U Ultra", "iPhone 7", "Google Pixel", "Huawei P9", "Meizu Pro 6", "Asus Zenfone 3" ] }; class Item extends React.Component { render() { return <li>{this.props.name}</li>; } } class ItemsList extends React.Component { constructor(props){ super(props); this.state = { items: this.props.data.items}; this.filterList = this.filterList.bind(this); } // фильтрация списка filterList(e){ var filteredList = this.props.data.items.filter(function(item){ return item.toLowerCase().search(e.target.value.toLowerCase())!== -1; }); // обновление состояния this.setState({items: filteredList}); } render() { return( <div> <h2>{this.props.data.title}</h2> <input placeholder="Поиск" onChange={this.filterList} /> <ul> { this.state.items.map(function(item){ return <Item key={item} name={item} /> }) } </ul> </div>); } } ReactDOM.render( <ItemsList data={propsValues} />, document.getElementById("app") ) </script> </body> </html> |
4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> <div id="app"> </div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> <script type="text/babel"> const propsValues = { title: "Список смартфонов", items: [ "HTC U Ultra", "iPhone 7", "Google Pixel", "Huawei P9", "Meizu Pro 6", "Asus Zenfone 3" ] }; class Item extends React.Component { render() { return <li>{this.props.name}</li>; } } class SearchPlugin extends React.Component{ constructor(props){ super(props); this.onTextChanged = this.onTextChanged.bind(this); } onTextChanged(e){ var text = e.target.value.trim(); // удаляем пробелы this.props.filter(text); // передаем введенный текст в родительский компонент } render() { return <input placeholder="Поиск" onChange={this.onTextChanged} />; } } class ItemsList extends React.Component { constructor(props){ super(props); this.state = { items: this.props.data.items}; this.filterList = this.filterList.bind(this); } filterList(text){ var filteredList = this.props.data.items.filter(function(item){ return item.toLowerCase().search(text.toLowerCase())!== -1; }); this.setState({items: filteredList}); } render() { return( <div> <h2>{this.props.data.title}</h2> <SearchPlugin filter={this.filterList} /> <ul> { this.state.items.map(function(item){ return <Item key={item} name={item} /> }) } </ul> </div>); } } ReactDOM.render( <ItemsList data={propsValues} />, document.getElementById("app") ) </script> </body> </html> |
