React
Component
Parmeter feste
Werte: this.props.
This.props.local_constant
Lokale Variablen werden mit this.props.Varible
übergeben.
Im Beispiel wird im ReactDOM.render
eine Komponente: HelloMessage eingebunden.
Die Komponente verwendet dann zur Laufzeit Werte aus der
Anwendung über this.prop.constant
|
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
|
Varibalen this.state.
Variable Werte werden über this.state übergeben Und über this.setState(..) verändert
|
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);
|
Anwendung mit Component und Events
Input events
Events werden im Constructor zwischen Frontend und Code gebunden
|
constructor(props) {
super(props);
this.state = { items: [], text: '' }; //*variablen
this.handleChange = this.handleChange.bind(this); //event1
this.handleSubmit = this.handleSubmit.bind(this); //event2
}
|
Im Ausgabe-Code wird die Funktion mit html_input_event={this.eventfunction}
zugewiesen
|
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
|
Die eigentliche Funktion wird direkt in der
Component{..} eingefügt.
|
handleChange(e) {
this.setState({ text: e.target.value
});
}
|
Final wird die Componente der AppComponente zugefügt und
die App per render angezeigt
|
ReactDOM.render(
<TodoApp />,
document.getElementById('todos-example')
);
|
|
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' }; //*variablen
this.handleChange = this.handleChange.bind(this); //event1
this.handleSubmit = this.handleSubmit.bind(this); //event2
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be
done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value
});
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('todos-example')
);
|
|
//
|
Einbinden externen Libraries
Exteren Komponenten von ThirdParty Anbietern können sehr
einfach eingebunden werden
|
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.md = new Remarkable();
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Hello, **world**!' };
}
handleChange(e) {
this.setState({ value: e.target.value
});
}
getRawMarkup() {
return {
__html: this.md.render(this.state.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">
Enter some markdown
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
ReactDOM.render(
<MarkdownEditor />,
document.getElementById('markdown-example')
);
|
Quelle: https://reactjs.org/