ReactJS: Свет в конце тоннеля
-
Upload
rinat-abdullin -
Category
Software
-
view
390 -
download
0
Transcript of ReactJS: Свет в конце тоннеля
![Page 1: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/1.jpg)
ReactJSСвет в конце тоннеля
![Page 2: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/2.jpg)
Web UI РазработкаMVC Приложения
![Page 3: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/3.jpg)
Web UI Frameworks
![Page 4: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/4.jpg)
![Page 5: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/5.jpg)
![Page 6: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/6.jpg)
![Page 7: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/7.jpg)
![Page 8: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/8.jpg)
Проблемы Масштаба
• Чем больше фич, тем сложнее работать
• Чем больше людей, тем сложнее работать
• Код становится непредсказуем, а разработка - дорогой
![Page 9: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/9.jpg)
FacebookAds Org
![Page 10: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/10.jpg)
![Page 11: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/11.jpg)
(data) => ViewBuddy List
![Page 12: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/12.jpg)
![Page 13: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/13.jpg)
ReactJS
![Page 14: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/14.jpg)
ReactJSCompose UI from components written in declarative
imperative code
![Page 15: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/15.jpg)
(data) => ViewDeclarative imperative code
![Page 16: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/16.jpg)
Простой Компонентvar TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; }});
// ul + li - components, too
![Page 17: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/17.jpg)
–ReactJS
“Рендерить все, и никаких гвоздей”
![Page 18: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/18.jpg)
![Page 19: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/19.jpg)
ReactJS• Собираем UI из компонентов, которые рендерятся в виртуальный DOM.
• ReactJS синхронизирует VDOM с DOM в браузере.
• JSX - опциональный, но очень удобный формат.
• ReactJS компоненты содержат код и шаблон в одном файле.
• Может рендериться на клиенте и сервере.
• Работает ОЧЕНЬ быстро.
![Page 20: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/20.jpg)
Statevar TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ''}; }, onChange: function(e) { this.setState({text: e.target.value}); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.text]); var nextText = ''; this.setState({items: nextItems, text: nextText}); }, render: function() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange} value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div> ); }});
![Page 21: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/21.jpg)
![Page 22: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/22.jpg)
Вопросы?Re: ReactJS and UI composition
![Page 23: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/23.jpg)
Смотрим демку и код
![Page 26: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/26.jpg)
А что, если?
![Page 27: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/27.jpg)
![Page 28: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/28.jpg)
![Page 29: ReactJS: Свет в конце тоннеля](https://reader034.fdocuments.net/reader034/viewer/2022042602/55a5225f1a28abb4348b4817/html5/thumbnails/29.jpg)