Header Ads

ad728

React js example




Reaction components implement

a render () method that takes input data and returns what it appears.
The input data that is transferred to the component can be accessed by sending render ().
JSX is optional and does not need to use a response.
Try Babel REPL to see the raw JavaScript code generated by the JSX compilation step.

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);



In addition to taking input data (accessing it through it), one component can maintain internal state data (obtained through this state).
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);
  }


When a component's status data changes, the render markup will be updated again via the invoice render ().
Using props and state, we can submit a small application.

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 
  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) {
      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')
);

In this example the state is used in the current list of items as well as in the text that the user has entered Although the event handlers are
apparently provided online, they will be submitted and processed by the event's delegation.

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }
 
  handleChange(e) {
    this.setState({ value: e.target.value });
  }
 
  getRawMarkup() {
    const md = new Remarkable();
    return { __html: 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')
);



No comments

Post Bottom Ad

ad728