1
\$\begingroup\$

I'm new to React.js and I've written a simple notes application as my first React program. I would like to know if it is idiomatic React code.

List.js

var React = require('react');

class List extends React.Component {
  render() {
    var items = this.props.items.map(function(item) {
      return <li key={item.id}>{item.author}: {item.data}</li>;
    });
    return <ul className="list">{items}</ul>;
  }
};

module.exports = List;

App.js

var React = require('react');
var List = require('./List');
var InsertNote = require('./InsertNote');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        {
          id: 1,
          author: 'John',
          data: 'Welcome!'
        },
        {
          id: 2,
          author: 'Cory',
          data: 'Yeah!'
        },
        {
          id: 3,
          author: 'Mike',
          data: 'Hello!'
        }
      ]
    };

    this.addItem = this.addItem.bind(this);
  }

  componentDidUpdate() {
    $('.lines').css('height', $('.list').css('height'));
  }

  addItem(item) {
    this.setState((state) => ({items: this.state.items.concat(item)}));
  }

  render() {
    return (
      <div>
        <h1>Welcome to my notes!</h1>
        <div className="lines"></div>
        <List items={this.state.items} />
        <InsertNote addItem={this.addItem} />
      </div>
    );
  }

};

module.exports = App;

InsertNote.js

var React = require('react');

class InsertNote extends React.Component {
  constructor(props) {
    super(props);

    this.state = {name:'', data:''};

    this.onClick = this.onClick.bind(this);
    this.onNameChange = this.onNameChange.bind(this);
    this.onDataChange = this.onDataChange.bind(this);
  }

  onNameChange(e) {
    this.setState({name:e.target.value});
  }

  onDataChange(e) {
    this.setState({data:e.target.value});
  }

  onClick(e) {
    var name = this.state.name;
    var data = this.state.data;
    if (name != '' && data != '') {
      this.props.addItem({
        id: Math.floor(Math.random() * 1000),
        author: name,
        data: data
      });
    }
  }

  render() {
    return (
      <div>
        <div className="col-xs-4">
          <input type="text" className="form-control" placeholder="name" onChange={this.onNameChange} value={this.state.name}/>
          <input type="text" className="form-control" placeholder="data" onChange={this.onDataChange} value={this.state.data}/>
        </div>
        <button id="submit" className="btn btn-success" onClick={this.onClick}>Send!</button>
      </div>
    );
  }
};

module.exports = InsertNote;

index.js

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');


ReactDOM.render(<App />, document.getElementById('app'));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Notes</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  body {
    background-color: #f5f5f5;
    width: 600px;
    margin: 0 auto;
    padding: 0;
  }
  h4 {
    color: #cd0000;
    font-size: 42px;
    letter-spacing: -2px;
    text-align: left;
  }
  .list {
    color: #555;
    font-size: 22px;
    padding: 0 !important;
    width: 500px;
    font-family: courier, monospace;
    border: 1px solid #dedede;
  }
  .list li {
    list-style: none;
    border-bottom: 1px dotted #ccc;
    text-indent: 25px;
    height: auto;
    padding: 10px;
    text-transform: capitalize;
  }
  .list li:hover {
    background-color: #f0f0f0;
    -webkit-transition: all 0.2s;
    -moz-transition:    all 0.2s;
    -ms-transition:     all 0.2s;
    -o-transition:      all 0.2s;
  }
  .lines {
    border-left: 1px solid #ffaa9f;
    border-right: 1px solid #ffaa9f;
    width: 2px;
    float: left;
    height: 150px;
    margin-left: 40px;
  }
  </style>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.