Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)

We engineer startups.sunscrapers.com

ReactJS & Angular2Robert Piękoś


Cechy wspólne

● Moduły, komponenty (System.js, Webpack)● Bardzo dobrze sprawdzają się w Universal Javascript


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


ReactJS - tworzenie komponentu - JSX1.

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);


ReactJS - wyświetlenie komponentu<body>

<div id="example"></div>

</body>


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


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);


Angular2 - tworzenie komponentuimport { 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';}


Angular2 - wyświetlenie komponentu

<body>

<my-app>Loading...</my-app>

</body>


Obecne trendyAngular.js, ReactJS, Angular2


Obecne trendy


Dziękuję za uwagę

Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)

Internet

Transcript of Introduction to ReactJS - Comparison to AngularJS 2 - Robert Piękoś (pl)