React

by Bryan Weaver

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
      <div>hjklhjk
      'hjklh'
      bhjlhj
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

export class PeopleList extends React.Component {
   constructor(props) {
      super(props);
      const arr = this.props.data;

      this.state = {
         listItems: arr.map((val, index) => <li key={index}>{val}</li>  );
      } 
   }    

   render() {
      return <ul>{this.state.listItems}</ul>;
   } 
} 

export class AddPersonForm extends React.Component {
   state = {
      person: "" 
   } 
   
   handleChange = (e) => this.setState({person: e.target.value});

   handleSubmit = (e) => {
      if(this.state.person != '') {
         this.props.parentMethod(this.state.person);
         this.setState({person: ""});
      } 
      e.preventDefault();
  } 

   render() {
      return (
         <form onSubmit={this.handleSubmit}>
            <input type="text" placeholder="Add new contact" onChange={this.handleChange} value={this.state.person} />
            <button type="submit">Add</button>
         </form>
     );
  }