MANTAS KAVECKAS / @kaveckas
2007 2009 2011 2013 2015
Inbox View
Title
Task List
Item One
Item Two
Item Three
var items = this.props.itemsData.map((item) => {
return <Item name={item.name} />;
}
<InboxView>
<Title/>
<TaskList>
{items}
</TaskList>
</InboxView>
var HelloComponent = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
class HelloComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
var helloMessage = (
<div>
<h1>Hello {this.props.name}</h1>
<button>Click me!</button>
{this.props.children}
</div>
);
class HelloComponent extends React.Component {
render() {
return (
<div>
<h1>Hello {this.props.name.toUpperCase()}</h1>
{this.props.children}
</div>
);
}
}
React.render(<HelloComponent name="John" />, document.body);
class HelloComponent extends React.Component {
propTypes: {
children: React.PropTypes.element.isRequired
},
render() {
return (
<div>
<h1>Hello {this.props.name.toUpperCase()}</h1>
{this.props.children}
</div>
);
}
}
React.render(<HelloComponent name="John" />, document.body);
class HelloComponent extends React.Component {
render() {
return (
<div>
<h1
className="Epic__Class--is-epic"
style={{"color": "#chucknorris", "position": "absolute"}}
>
Hello {this.props.name.toUpperCase()}
</h1>
</div>
);
}
}
React.render(<HelloComponent name="John" />, document.body);
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onTouchCancel onTouchEnd onTouchMove onTouchStart onScroll onWheel onChange onInput onSubmit onFocus onBlur onKeyDown onKeyPress onKeyUp onCopy onCut onPaste...
class ButtonComponent extends React.Component {
handleClickEvent(message) {
alert(message);
},
render() {
return (
<button onClick={this.handleClickEvent.bind(this, this.props.buttonMessage)}>
{this.props.buttonMessage}
</button>
);
}
}
React.render(<ButtonComponent buttonMessage="Click me!" />, document.body);
class ButtonComponent extends React.Component {
getInitialState() {
return {
buttonClicked: false
};
},
handleClickEvent() {
this.setState({ buttonClicked: !buttonClicked });
},
render() {
if (this.state.buttonClicked)
return null;
return (
<button>
{this.props.buttonMessage}
</div>
);
}
}
React.render(<ButtonComponent buttonMessage="Click me!" />, document.body);
React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement
React.createElement
React.createFactory
React.DOM
React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement
React.createElement
React.createFactory
React.DOM
React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode React.renderToString React.renderToStaticMarkup React.initializeTouchEvents React.isValidElementReact.createElement React.createFactory React.DOM
class HelloComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
class HelloComponent extends React.Component {
mixins: [],
propTypes: {
name: React.PropTypes.string.isRequired
},
getDefaultProps() {
return {
name: "John"
};
},
getInitialState() {
return null;
},
render() {
return <div>Hello {this.props.name}</div>;
}
}
class HelloComponent extends React.Component {
componentWillMount() {},
componentDidMount() {},
componentWillReceiveProps(object nextProps) {},
shouldComponentUpdate(nextProps, nextState) {},
componentWillUpdate(nextProps, nextState) {},
componentDidUpdate(prevProps, prevState) {},
componentWillUnmount() {},
render() {
return <div>Hello {this.props.name}</div>;
}
}
React.render(<App />, document.body);
MANTAS KAVECKAS / @kaveckas