Benutzer:MovGP0/React

React

Framework für UI

// Bootstrapping
const mountNode = document.getElementById('example');
const element = <HelloMessage />;
ReactDom.render(element, mountNode); // short: ReactDom.render(<HelloMessage />, document.getElementById('example'));

// Komponente
class HelloMessage extends React.Component {
  render(){
    return React.createElement('h1', null, 'Hello World!');
  }
}

// Komponente als Funktion ohne JSX
function HelloMessage(){
  return React.createElement('h1', null, 'Hello World!');
}

// Komponente als Funktion mit JSX
function HelloMessage(){
  return <h1><Message name='World' /></h1>;
}

// Komponente mit Properties als Funktion
function Message(props) {
  return <span>{'Hello, ' + props.name}</span>;
}

// Komponente mit Properties als Klasse
class Message extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: props.name};
  }

  render() {
    return (
      <div>
        Hello {this.state.name}!
      </div>
    );
  }
}

Properties

Object-Deconstructor

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 
}

Object-Spread-Operator

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

Property Types

Property Types
React.PropTypes.	Typ
bool, number, string	Basistyp
func	Funktion/Lambda-Austruck
node	Wert der von React geändert werden kann (number, number[], string, string[], ReactElement, ReactElement[])
element	ReactElement
instanceOf(type)	Interface/Klasse
array, arrayOf(type)
oneOf(typearray)	Wert, welcher ALLE im array angegebenen Typen darstellt
oneOfType(typearray)	Wert, welcher EINE im Array angegebenen Typen darstellt
object
objectOf(type)	Wert, welche die im Typ angegebenen Properties implementiert (auch ohne von diesem zu erben)
shape	Objekt in beschreibender Form
any	alles

Shape

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

State

this.state ist per default undefined und kann erst verwendet werden, wenn dieser gesetzt wurde
- im Konstrukor mit this.state = {...}
- in Funktionen mit this.setState(...)
this.setState(...) darf nicht im Konstruktor aufgerufen werden
Aufruf von this.setState(...) erfolgt asynchron und rendert den DOM neu
wenn this.state direkt gesetzt wird, wird der DOM nicht neu gerendert

Beispiele

// setting state directly
this.setState({ 
    title: 'Hello World', 
    underline: false 
});

// setting state with lambda method 
this.setState((currentState, currentProperties)) => ...);

// callback when state got changed
this.setState(..., () => OnStateChangedCompleted()); // may use lifecycle method 'componentDidUpdate' instead

Weblinks

React. In: GitHub. Facebook, 9. Juni 2015, abgerufen am 17. März 2017 (englisch).
Jack Hsu: React Contexts and Dependency Injection. 9. Juni 2015, abgerufen am 17. März 2017 (englisch).
Nil Schartmann: Simple React example for the React Buch. In: GitHub. Abgerufen am 17. März 2017 (englisch).

|}