<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CodePen</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>
class TweetBox extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      text: '',
    };
  }
  
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };

  render() {
    return (
      <div className="card bg-light">
        <div className="card-body text-right">
          <textarea className="form-control" onChange={this.handleChange}></textarea>
          <br/>
          <button className="btn btn-primary" disabled={this.state.text.length === 0}>Tweet</button>
        </div>
      </div>
    );
  }
};

ReactDOM.render(
  <TweetBox />,
  document.getElementById("container")
);
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js