React Code Templates

react-form-template.jsx

import React, { Component } from 'react'

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      name: '',
      description: '',
      active: false
    };
    
    this.onChange = this.onChange.bind(this);
    this.onCheck = this.onCheck.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  
  onCheck(e) {
    this.setState({ [e.target.name]: !this.state[e.target.name] });
  }
  
  onSubmit(e) {
    e.preventDefault();
    
    // Do something...
  }

  render() {
    const { title } = this.props;
    const { name, description, active } = this.state;
    return (
      <form className="MyComponent" onSubmit={this.onSubmit}>
        <h1>{title}</h1>
        <input type="text" name="name" value={name} onChange={this.onChange} />
        <input type="text" name="description" value={description} onChange={this.onChange} />
        <input type="checkbox" name="active" value={true} checked={active} onClick={this.onCheck} />
      </form>
    );
  }
}

export default MyComponent;

react-template.jsx

import React, { Component } from 'react'

class MyComponent extends Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    const { name, message } = this.props;
    return (
      <div className="MyComponent">
        My component? {name} component.
        {message}
      </div>
    );
  }
}

export default MyComponent;