Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Einführung in React

1.018 Aufrufe

Veröffentlicht am

Aufbau einer React Applikation. Datenfluss und Eventhandling.

Veröffentlicht in: Software
  • Login to see the comments

Einführung in React

  1. 1. Sebastian • Sebastian Springer • aus München • arbeite bei MaibornWolff GmbH • https://github.com/sspringer82 • @basti_springer • JavaScript Entwickler
  2. 2. IT-Beratung & Software Engineering
  3. 3. Und was genau ist React? lichtkunst.73 / pixelio.de
  4. 4. var HelloWorld = React.createClass({
 render: function () {
 return (
 <h1>Hello World!</h1>
 );
 }
 });
 
 ReactDOM.render(
 <HelloWorld />,
 document.getElementById('example')
 );
  5. 5. A JavaScript library for building user interfaces
  6. 6. Just the UI - no structure harry256 / pixelio.de
  7. 7. Virtual DOM
  8. 8. <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8”> </head> <body> <h1>Hello World</h1> </body> </html> html "## head $   %## meta %## body %## h1 %## #text
  9. 9. Das DOM ist eine 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.
  10. 10. Das Virtual DOM ist 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.
  11. 11. React Element Light, stateless, immutable, virtual representation of a DOM Element. var HelloWorld = React.createClass({
 render: function () {
 return (
 <h1>Hello World!</h1>
 );
 }
 });
  12. 12. React Component Stateful elements of 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.
  13. 13. Datenfluss Rita Gattermann / pixelio.de
  14. 14. One Way Data Binding Parent ChildDatenfluss Events
  15. 15. Security S. Hofschlaeger / pixelio.de
  16. 16. Security React weist eine eingebaute XSS Protection auf. Es ist nur recht aufwändig möglich, HTML-Strings direkt auszugeben. Man muss diese Sicherung also bewusst umgehen.
  17. 17. JSX
  18. 18. var HelloWorld = React.createClass({
 render: function () {
 return (
 <h1>Hello World!</h1>
 );
 }
 });
 
 ReactDOM.render(
 <HelloWorld />,
 document.getElementById('example')
 );
  19. 19. JSX Syntax-Erweiterung für JavaScript, die aussieht wie XML. React transformiert JSX in natives JavaScript. Man kann also React auch ohne JSX schreiben.
  20. 20. Hello World Thorsten Müller / pixelio.de
  21. 21. index.html <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>React</title>
 <link rel="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>
  22. 22. app.js var HelloWorld = React.createClass({
 render: function () {
 return (
 <h1>Hello World</h1>
 )
 }
 });
 
 ReactDOM.render(
 <HelloWorld />,
 document.getElementById('content')
 );
  23. 23. ES 6 Klassen class HelloWorld extends React.Component {
 render() {
 return (
 <h1>Hello World</h1>
 )
 }
 }
 
 ReactDOM.render(
 <HelloWorld />,
 document.getElementById('content')
 ); Alternativ können Components auch in ES6 formuliert werden.
  24. 24. Components class und for sind reservierte Wörter in JavaScript. Deswegen müssen in Components className und htmlFor verwendet werden.
  25. 25. Props
  26. 26. Props Informationen, die von außen in die Komponente hineingereicht werden.
  27. 27. Props class HelloWorld extends React.Component {
 render() {
 return (
 <h1>Hello {this.props.name}</h1>
 )
 }
 }
 
 ReactDOM.render(
 <HelloWorld name="Klaus"/>,
 document.getElementById('content')
 );
  28. 28. Props Standardwerte für props werden über getDefaultProps gesetzt.
  29. 29. State
  30. 30. State Jede Komponente verwaltet ihren eigenen internen State. Bei einer Änderung des States wird die render-Methode erneut ausgeführt. Der State wird über setState gesetzt.
  31. 31. State class HelloWorld extends React.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>
 )
 }
 }
  32. 32. State Wenn eine Komponente mit createClass erstellt wird, werden die Startwerte des States mit getInitialState gesetzt.
  33. 33. Events PeterFranz / pixelio.de
  34. 34. Events Um Informationen von der 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.
  35. 35. Datenfluss class HelloWorld extends React.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>
 )
 }
 }
  36. 36. Datenfluss
  37. 37. Komponenten-Hierarchie detlef menzel / pixelio.de
  38. 38. Komponenten-Hierarchie Elternkomponente Kindkomponente
  39. 39. ParentComponent ChildComponent
  40. 40. ParentComponent ChildComponent changeColor
  41. 41. 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')
 );
  42. 42. 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>
 )
 }
 });
  43. 43. var ChildComponent = React.createClass({
 handleChange: function() {
 this.props.onChangeColor();
 },
 render: function() {
 return (
 <div>
 <button onClick={this.handleChange}>push</button>
 </div>
 )
 }
 });
  44. 44. Lifecycle uschi dreiucker / pixelio.de
  45. 45. Lifecycle Initialisierung: Die Komponente wird zum ersten Mal eingebunden. State Change: Der State einer Komponente wird verändert. Props Change: Die Props einer Komponente werden geändert.
  46. 46. Initialisierung GetDefaultProps GetInitialState ComponentWillMount Render ComponentDidMount
  47. 47. State Change ShouldComponentUpdate ComponentWillUpdate Render ComponentDidUpdate
  48. 48. Props Change ComponentWillReceiveProps ComponentShouldUpdate ComponentWillUpdate Render ComponentDidUpdate
  49. 49. Build Rudolpho Duba / pixelio.de
  50. 50. Build Aktuell besteht die Applikation 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.
  51. 51. Build {
 "scripts": {
 "build": "node_modules/.bin/webpack main.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"
 }
 }
  52. 52. 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
  53. 53. 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>
  54. 54. Flux Architektur für React-Applikationen. Kein Framework, sondern mehr eine Guideline.
  55. 55. Flux Action Dispatcher Store View API
  56. 56. Flux Actions: reichen Informationen an 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
  57. 57. Flux Die Interaktion erfolgt über die Komponenten, die Actions auslösen. Die Views modifizieren den Application State nicht direkt. Vorteil: Unidirektionaler Datenfluss und Entkopplung
  58. 58. Flux Es gibt mittlerweile mehrere Flux-Implementierungen: Flux, Fluxxor, RefulxJS, Redux oder fluxible-app.
  59. 59. Fragen? Rainer Sturm / pixelio.de
  60. 60. KONTAKT Sebastian Springer sebastian-springer@maibornwolff.de MaibornWolff GmbH Theresienhöhe 13 80339 München @basti_springer https://github.com/sspringer82

×