Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

React JavaEE környezetben

No description
by

Krisztián Karóczkai

on 27 March 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of React JavaEE környezetben

React Java EE környezetben
React + Babel + BootStrap
https://github.com/react-bootstrap/react-bootstrap
const buttonsInstance = (
<ButtonToolbar>
<Button bsStyle="success">Success</Button>
<Button bsStyle="info">Info</Button>
</ButtonToolbar>
);

ReactDOM.render(buttonsInstance, mountNode);
Mire van szükségünk fontEnd oldalon?
W3C Web Components !
Küldés (post), fogadás (get) XHR (JSON)
Tapasztalataim alapján
UI létrehozás
Események
A Hype-on túl :
Mi ez, és mire lehet jó nekünk?
React
Karóczkai (K)risztián
Ulyssys, Óbudai Egyetem

"A JavaScript library for building user interfaces "
"Declarative views"
"Component-Based"
"Learn Once, Write Anywhere"
Egyszerű UI elemek
Adatváltozások kezelése
Encapsulated komponensek
Állapotkezelés komponensekben
JavaScript sablonok
Ez "csak" egy UI library
Framework[x] vs React helyett Framework[x]+React
Nem kell teljesen újraírni semmit sem

(https://www.w3.org/TR/shadow-dom/
)
<button>Hello, world!</button>
<script>
var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>
(https://www.w3.org/TR/custom-elements/)
(https://www.w3.org/TR/html-imports/)
<head>
<link rel="import" href="/imports/heart.html">
</head>
class XProduct extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode: 'open'});
....
}
}
customElements.define('x-product', XProduct);

<x-product ...> </x-product>
(https ://www.w3.org/TR/html5/scripting-1.html#the-template-element)
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
platform.js
Polymer (Google)
X-Tag (Mozilla)
Bosonic
AngularJS
React
Állapot kezels :DOM alapú vagy Saját model
React + Babel
(ECMAScript 6->5 converter)
Egységbe zártság
Újrahasznosítható
kódrészletek
Egyedi elemek
Könnyen hordozható megoldások
Csak hogy nézzen már ki valahogy
JavaScipt vagy HTML
https://github.com/facebook/react/blob/master/examples/webcomponents/index.html
webcomponents.js
var proto = Object.create(HTMLElement.prototype
, {
attachedCallback: {
value: function() {
var mountPoint = document.createElement('span');
this.createShadowRoot().appendChild(mountPoint);
var name = this.getAttribute('name');
ReactDOM.render(<button>{name}</button>, mountPoint);
}}});
document.registerElement('x-button', {prototype: proto});
class HelloMessage extends React.Component {
render() {
return <div>Hello <x-button name={this.props.name} />!</div>;
}
}
var container = document.getElementById('container');
ReactDOM.render(<HelloMessage name="Jim Sproch" />, container);
<x-button name="OK" />
<x-button name="OK" > .....</x-button>
Komponensen belüli HTML tartalmak
ReactDOM.render(<button>{name}</button>, mountPoint);
ELVESZLIK
var proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function() {
var mountPoint = document.createElement('div');
this.createShadowRoot().appendChild(mountPoint);

var content = this.innerHTML
;
const model = this.getAttribute('model');
const header = this.getAttribute('header');

ReactDOM.render(<P0 model={model} header={header} > <div dangerouslySetInnerHTML={{__html:content}}></div> </P0>, mountPoint);
}
}
});
document.registerElement('uly-panel', {prototype: proto});

Belső HTML elemek React alapú Webkomponensek esetében
Kapcsolódás JavaEE környezetekhez
Köszönöm a figyelmet
class P0 extends ReactBootstrap.Panel{
constructor(props) {super(props);
this.state = {rows:[]};
}
click(event){
this.setState({ rows: newRows });
}
componentDidMount() {}
render() {
return <div data-value={this.props.model}>
</div>
}
}
<script src=..."
type="text/babel"
></script>
https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js
render() {
return <div className="panel panel-default" >
<div className="panel-heading">
{this.props.header}
<div className="floatright" >

<ReactBootstrap.Button ref="addButton">+</ReactBootstrap.Button>
</div>
</div>
<div className="panel-body">
{this.state.rows}
</div>
</div>
}
const formInstance = (
<form>
<FormGroup>
<InputGroup>
<InputGroup.Addon>@</InputGroup.Addon>
<FormControl type="text" />
</InputGroup>
</FormGroup>
</form>
);

ReactDOM.render(formInstance, mountNode);
function handleSelect(selectedKey) {
alert('selected ' + selectedKey);
}

const navInstance = (
<Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
<NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
<NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
<NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>
);

ReactDOM.render(navInstance, mountNode);
function handleSelect(selectedKey) {
alert('selected ' + selectedKey);
}
React.render(
<Nav bsStyle="pills" activeKey={1}
onSelect={handleSelect
}>)
class P0 extends ReactBootstrap.Panel{

click(event){ }

componentDidMount(){ ReactDOM.findDOMNode(this.refs.addButton).addEventListener("click",this.click);
}

render() {
return <ReactBootstrap.Button ref="addButton">+</ReactBootstrap.Button>

}
}
class P0 extends ReactBootstrap.Panel{
click(event){
}
render() {
return <ReactBootstrap.Button onClick={this.click}>+</ReactBootstrap.Button>
}
}
@Path("/sport")
public class QuestionAPI {
@POST
@Path("/askquestion")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public SportPOJO askquestion(SportPOJO tqaRequest,) {
return tqaRequest;
}
}
<dependency>
<groupId>org.glassfish.jersey.containers</groupId>
<artifactId>jersey-container-servlet</artifactId>
<version>${version.jersey}</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.media</groupId>
<artifactId>jersey-media-json-jackson</artifactId>
<version>${version.jersey}</version>
</dependency>
<dependency>
<groupId>org.glassfish.jersey.media</groupId>
<artifactId>jersey-media-json-processing</artifactId>
<version>${version.jersey}</version>
</dependency>
</dependency>
import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;

@ApplicationPath("rest")
public class RESTConfiguration extends Application{

}
$.ajax({
url: "...,"
type: 'POST',
dataType: 'json',
data: JSON.stringify(jsonData),
contentType: 'application/json',
succes: function (response) {}
});
public class SportPOJO {
String name;
String desciption;

public SportType() {}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}


public String getDesciption() {
return desciption;
}

public void setDesciption(String desciption) {
this.desciption = desciption;
}
ECMAScript 6 ->JavaScript 5 konverter
Generált "JavaScript" UI
Majdnem minden szép és jó
JS Library HELL
Majdnem SPA
Vékony UI ami valóban csak UI
Full transcript