10-mal heruntergeladen
![Build
$ npm install
$ npm run build
> @ build /react
> webpack main.js bundle.js --module-bind
'js=babel-loader'
Hash: 154dd060b2495527de56
Version: webpack 1.13.1
Time: 3574ms
Asset Size Chunks Chunk Names
bundle.js 702 kB 0 [emitted] main
+ 169 hidden modules](https://image.slidesharecdn.com/react-160602191847/85/Einfuhrung-in-React-54-320.jpg)
Hochgeladen vonSebastian Springer
Einführung in React
Das Dokument beschreibt die Grundlagen und Funktionen von React, einer JavaScript-Bibliothek für den Aufbau von Benutzeroberflächen. Es erläutert Konzepte wie den Virtual DOM, Komponenten, Props, State, Ereignisse und den Lebenszyklus von Komponenten sowie die Flux-Architektur für React-Anwendungen. Darüber hinaus werden auch Code-Beispiele und Aufbauprozesse für React-Anwendungen behandelt.
Weitere ähnliche Inhalte
![Mtu exportaciones[1]](https://cdn.slidesharecdn.com/ss_thumbnails/mtuexportaciones1-110903173727-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Einführung in React
- 2. Sebastian • Sebastian Springer •aus München • arbeite bei MaibornWolff GmbH • https://github.com/sspringer82 • @basti_springer • JavaScript Entwickler
- 3.
- 4. Und was genauist React? lichtkunst.73 / pixelio.de
- 5. var HelloWorld =React.createClass({ render: function () { return ( <h1>Hello World!</h1> ); } }); ReactDOM.render( <HelloWorld />, document.getElementById('example') );
- 6. A JavaScript libraryfor building user interfaces
- 7. Just the UI- no structure harry256 / pixelio.de
- 8.
- 9. <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8”> </head> <body> <h1>HelloWorld</h1> </body> </html> html "## head $ %## meta %## body %## h1 %## #text
- 10. Das DOM isteine Baumstruktur. Diese kann bei Änderungen recht einfach verarbeitet werden. Das DOM bei umfangreicheren Single Page-Applikationen kann recht umfangreich werden. Die Verarbeitung wird dann sehr langsam.
- 11. Das Virtual DOMist eine Abstraktion des DOM. React führt Berechnungen und Änderungen durch und fasst die Aktionen so zusammen, dass sie vom Browser möglichst performant umgesetzt werden können. React verfügt über zusätzliche Attribute, die nicht im DOM auftauchen.
- 12. React Element Light, stateless,immutable, virtual representation of a DOM Element. var HelloWorld = React.createClass({ render: function () { return ( <h1>Hello World!</h1> ); } });
- 13. React Component Stateful elementsof a react application. Bei Änderungen werden die Components in Elements übersetzt. Im Virtual DOM werden die Änderungen berechnet und für den Browser optimiert auf den tatsächlichen DOM angewendet.
- 14. Datenfluss Rita Gattermann /pixelio.de
- 15. One Way DataBinding Parent ChildDatenfluss Events
- 16. Security S. Hofschlaeger /pixelio.de
- 17. Security React weist eineeingebaute XSS Protection auf. Es ist nur recht aufwändig möglich, HTML-Strings direkt auszugeben. Man muss diese Sicherung also bewusst umgehen.
- 18.
- 19. var HelloWorld =React.createClass({ render: function () { return ( <h1>Hello World!</h1> ); } }); ReactDOM.render( <HelloWorld />, document.getElementById('example') );
- 20. JSX Syntax-Erweiterung für JavaScript,die aussieht wie XML. React transformiert JSX in natives JavaScript. Man kann also React auch ohne JSX schreiben.
- 21. Hello World Thorsten Müller/ pixelio.de
- 22. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React</title> <linkrel="stylesheet" href="css/style.css" /> <script src="js/lib/react.js"></script> <script src=“js/lib/react-dom.js"></script> <script src=“js/lib/browser.js"></script> <script src=“js/lib/jquery.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel" src=“js/app/app.js"></script> </body> </html>
- 23. app.js var HelloWorld =React.createClass({ render: function () { return ( <h1>Hello World</h1> ) } }); ReactDOM.render( <HelloWorld />, document.getElementById('content') );
- 24. ES 6 Klassen classHelloWorld extends React.Component { render() { return ( <h1>Hello World</h1> ) } } ReactDOM.render( <HelloWorld />, document.getElementById('content') ); Alternativ können Components auch in ES6 formuliert werden.
- 25. Components class und forsind reservierte Wörter in JavaScript. Deswegen müssen in Components className und htmlFor verwendet werden.
- 26.
- 27. Props Informationen, die vonaußen in die Komponente hineingereicht werden.
- 28. Props class HelloWorld extendsReact.Component { render() { return ( <h1>Hello {this.props.name}</h1> ) } } ReactDOM.render( <HelloWorld name="Klaus"/>, document.getElementById('content') );
- 29. Props Standardwerte für propswerden über getDefaultProps gesetzt.
- 30.
- 31. State Jede Komponente verwaltetihren eigenen internen State. Bei einer Änderung des States wird die render-Methode erneut ausgeführt. Der State wird über setState gesetzt.
- 32. State class HelloWorld extendsReact.Component { constructor() { super(); this.state = { time: 0 } } componentDidMount() { this.interval = setInterval(() => { this.setState({time: this.state.time + 1}); }, 1000); } render() { return ( <h1>{this.state.time}</h1> ) } }
- 33. State Wenn eine Komponentemit createClass erstellt wird, werden die Startwerte des States mit getInitialState gesetzt.
- 34.
- 35. Events Um Informationen vonder Darstellung in die Komponente fließen zu lassen, werden Events verwendet. Typische Events sind onChange, onClick, onSubmit,… An diese Events werden Callback-Funktionen der Komponente gebunden.
- 36. Datenfluss class HelloWorld extendsReact.Component { constructor() { super(); this.state = { name: 'Hans-Peter' } } handleValueChange(e) { this.setState({name: e.target.value}); } render() { return ( <div> <div>{this.state.name}</div> <input type="text" value={this.state.name} onChange={this.handleValueChange.bind(this)} /> </div> ) } }
- 37.
- 38. Komponenten-Hierarchie detlef menzel /pixelio.de
- 39.
- 41.
- 42.
- 43. var ParentComponent =React.createClass({ render: function() { return ( <div> <div>Parent</div> <ChildComponent /> </div> ) } }); var ChildComponent = React.createClass({ render: function() { return ( <div> <button>push</button> </div> ) } }); ReactDOM.render( <ParentComponent />, document.getElementById('content') );
- 44. var ParentComponent =React.createClass({ getInitialState: function () { return { red: true, yellow: false, green: false } }, handleChange: function() { this.setState({ red: false, green: true }); }, render: function() { return ( <div> <ChildComponent onChangeColor={this.handleChange}/> </div> ) } });
- 45. var ChildComponent =React.createClass({ handleChange: function() { this.props.onChangeColor(); }, render: function() { return ( <div> <button onClick={this.handleChange}>push</button> </div> ) } });
- 46. Lifecycle uschi dreiucker /pixelio.de
- 47. Lifecycle Initialisierung: Die Komponentewird zum ersten Mal eingebunden. State Change: Der State einer Komponente wird verändert. Props Change: Die Props einer Komponente werden geändert.
- 48.
- 49.
- 50.
- 51. Build Rudolpho Duba /pixelio.de
- 52. Build Aktuell besteht dieApplikation noch aus mehreren Dateien. Das Ziel ist, dass nur noch eine Datei ausgeliefert wird. React-Applikationen können mit verschiedenen Build- Systemen wie z.B. webpack gebaut werden.
- 53. Build { "scripts": { "build": "node_modules/.bin/webpackmain.js bundle.js --module- bind 'js=babel-loader'" }, "dependencies": { "babel-core": "^6.9.0", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "react": "^15.0.2", "react-dom": "^15.0.2", "webpack": "^1.13.1" } }
- 54. Build $ npm install $npm run build > @ build /react > webpack main.js bundle.js --module-bind 'js=babel-loader' Hash: 154dd060b2495527de56 Version: webpack 1.13.1 Time: 3574ms Asset Size Chunks Chunk Names bundle.js 702 kB 0 [emitted] main + 169 hidden modules
- 55. Build <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Hello React!</title> </head> <body> <div id="example"></div> <script src="bundle.js"></script> </body> </html>
- 57. Flux Architektur für React-Applikationen.Kein Framework, sondern mehr eine Guideline.
- 58. Flux Action Dispatcher StoreView API
- 59. Flux Actions: reichen Informationenan den Dispatcher weiter Dispatcher: Reicht die Informationen zu den registrierten Stores weiter Stores: Halten den Application State und die Logik Views: React Komponenten, die den State aus den Stores bekommen
- 60. Flux Die Interaktion erfolgtüber die Komponenten, die Actions auslösen. Die Views modifizieren den Application State nicht direkt. Vorteil: Unidirektionaler Datenfluss und Entkopplung
- 61. Flux Es gibt mittlerweilemehrere Flux-Implementierungen: Flux, Fluxxor, RefulxJS, Redux oder fluxible-app.
- 62. Fragen? Rainer Sturm /pixelio.de
- 63. KONTAKT Sebastian Springer sebastian-springer@maibornwolff.de MaibornWolff GmbH Theresienhöhe13 80339 München @basti_springer https://github.com/sspringer82