Benutzer:MovGP0/React

// Bootstrappingconst mountNode = document.getElementById('example');const element = <HelloMessage />;ReactDom.render(element, mountNode); // short: ReactDom.render(<HelloMessage />, document.getElementById('example'));// Komponenteclass HelloMessage extends React.Component {  render(){    return React.createElement('h1', null, 'Hello World!');  }}// Komponente als Funktion ohne JSXfunction HelloMessage(){  return React.createElement('h1', null, 'Hello World!');}// Komponente als Funktion mit JSXfunction HelloMessage(){  return <h1><Message name='World' /></h1>;}// Komponente mit Properties als Funktionfunction Message(props) {  return <span>{'Hello, ' + props.name}</span>;}// Komponente mit Properties als Klasseclass Message extends React.Component {  constructor(props){    super(props);    this.state = {name: props.name};  }  render() {    return (      <div>        Hello {this.state.name}!      </div>    );  }}

export default function ChoiceBar({ title, count, percent}) { // deconstructor of ChoiceBar(props)    // ... } ChoiceBar.propTypes = {     title: React.PropTypes.string.isRequired,     count: React.PropTypes.number.isRequired,     percent: React.PropTypes.number.isRequired }

const myProps = {     title: 'React introduction',     underline: true,     size: 24 } return <TitleComponent size={28} {... myProps} />; // size-property wird überschrieben

Title.propTypes = {     title: React.PropTypes.string.isRequired,     font: React.PropTypes.shape({         size: React.PropTypes.number.isRequired,         name: React.PropTypes.string     }).isRequired }

// setting state directlythis.setState({     title: 'Hello World',     underline: false });// setting state with lambda method this.setState((currentState, currentProperties)) => ...);// callback when state got changedthis.setState(..., () => OnStateChangedCompleted()); // may use lifecycle method 'componentDidUpdate' instead