Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

React Component

12.02.2021 (👁6170)


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/