Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)
Ähnlich wie Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl) (20)
Mehr von Sunscrapers
Mehr von Sunscrapers (7)
Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)
- 1. We engineer startups. sunscrapers.com ReactJS & Angular2 Robert Piękoś
- 2. We engineer startups. sunscrapers.com Cechy wspólne ● Moduły, komponenty (System.js, Webpack) ● Bardzo dobrze sprawdzają się w Universal Javascript
- 3. We engineer startups. sunscrapers.com ReactJS React - biblioteka JavaScript. Główne cechy: ● Virtual DOM ● JSX, props, states ● Very friendly with Flux architecture ● Używany we frameworku React Native do tworzenia aplikacji mobilnych
- 4. We engineer startups. sunscrapers.com ReactJS - tworzenie komponentu - JSX 1. var HelloWorld = React.createClass({ render: function() { return ( <p> Hello, <input type="text" placeholder="Your name here" />! It is {this.props.date.toTimeString()} </p> ); } }); 2. setInterval(function() { ReactDOM.render( <HelloWorld date={new Date()} />, document.getElementById('example') ); }, 500);
- 5. We engineer startups. sunscrapers.com ReactJS - wyświetlenie komponentu <body> <div id="example"></div> </body>
- 6. We engineer startups. sunscrapers.com Angular2 Angular2 - nowoczesny JavaScript MV* Framework. Główne cechy: ● Dwukierunkowe wiązanie danych (two-way data binding) ● Wiele gotowych rozwiązań dostarczonych bezpośrednio przez framework ● Napisany w TypeScript ● Używany Ionic2 oraz NativeScript przy programowaniu aplikacji mobilnych
- 7. We engineer startups. sunscrapers.com Angular2 - TypeScript 1. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); 2. let button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function() { alert(greeter.greet()); } document.body.appendChild(button);
- 8. We engineer startups. sunscrapers.com Angular2 - tworzenie komponentu import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{ title }}</h1> <h2>My favorite hero is: {{ myHero }}</h2> ` }) export class AppComponent { title = 'Tour of Heroes'; myHero = 'Windstorm'; }
- 9. We engineer startups. sunscrapers.com Angular2 - wyświetlenie komponentu <body> <my-app>Loading...</my-app> </body>
- 10. We engineer startups. sunscrapers.com Obecne trendy Angular.js, ReactJS, Angular2
- 11. We engineer startups. sunscrapers.com Obecne trendy
- 12. We engineer startups. sunscrapers.com Obecne trendy
- 13. We engineer startups. sunscrapers.com Dziękuję za uwagę