Magnús Dæhlen
Henrik Glasø Skifjeld
UI bygget opp av komponenter
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1> Hello World! </h1>
</div>
);
}
});
JSX
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1> Hello World! </h1>
<p> Dette er et eksempel </p>
</div>
);
}
});
Uten JSX
var HelloWorld = React.createClass({
render: function() {
return (
React.createElement("div", null,
React.createElement("h1", null, "HelloWorld"),
React.createElement("p", null, "Dette er et eksempel")
)
);
}
});
Nøstede komponenter
var InnerComponent = React.createClass({
render: function() {
return (
<p>
Dette er et eksempel
</p>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1> Hello World! </h1>
<InnerComponent />
</div>
);
}
});
Mutable
(med this.setState)
Immutable
var InnerComponent = React.createClass({
render: function() {
return (
<p>
{this.props.innertext}
</p>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1> Hello World! </h1>
<InnerComponent innertext="Dette er et eksempel" />
</div>
);
}
});
var CounterComponent = React.createClass({
getInitialState: function(){
return {
counter: 1
};
},
_onClick: function (event) {
this.setState({
counter: this.state.counter + 1
});
},
render: function() {
return (
<div>
<p>
Counter: {this.state.counter}
</p>
<button onClick={this._onClick}> 1 up </button>
</div>
);
}
});
var MessagesComponent = React.createClass({
getInitialState: function(){
return {
messages: [
{text: "Lorem ipsum dolor sit amet"},
{text: "Cras convallis congue"},
{text: "Donec cursus leo malesuada"}
]
};
},
render: function() {
var messages = this.state.messages.map(function (message) {
return (
<p>{message.text}</p>
);
});
return (
<div>
{messages}
</div>
);
}
});
...men den mest populære er ->