Part 12: ES6 Refactor createClass to JavaScript Classes and propTypes
- classes in ES6 extend the main component and use the keyword “class”
- Adding propTypes as a property to the class itself
NotesList.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React from 'react'; class NotesList extends React.Component{ render () { var notes = this.props.notes.map((note, index) => { return <li className="list-group-item" key={index}>{note}</li> }); return ( <ul className="list-group"> {notes} </ul> ) } }; /*var NotesList = React.createClass({ render: function () { var notes = this.props.notes.map(function (note, index) { return <li className="list-group-item" key={index}>{note}</li> }); return ( <ul className="list-group"> {notes} </ul> ) } });*/ export default NodesList; //module.exports = NotesList; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react'; class AddNote extends React.Component { HandleSubmit () { var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note" this.refs.note.getDOMNode().value = ''; this.props.addNote(newNote); } // Don't have to put commas - technically not in an object render () { return ( <div className="input-group"> <input type="text" className="form-control" ref="note" placeholder="Add New Note" /> <span className="input-group-btn"> <button type="submit" className="btn btn-default" onClick={this.handleSubmit.bind(this)}>Add Note</button> </span> </div> ) } }; AddNote.propTypes = { username: React.PropTypes.string.isRequired, addNote: React.PropTypes.func.isRequired }; export defalt AddNote; /*var AddNote = React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, addNote: React.PropTypes.func.isRequired }, handleSubmit: function () { var newNote = this.refs.note.getDOMNode().value; // This is getting the value from the input below with a ref="note" this.refs.note.getDOMNode().value = ''; this.props.addNote(newNote); }, render: function () { return ( <div className="input-group"> <input type="text" className="form-control" ref="note" placeholder="Add New Note" /> <span className="input-group-btn"> <button type="submit" className="btn btn-default" onClick={this.handleSubmit}>Add Note</button> </span> </div> ) } }); module.exports = AddNote;*/ |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import React from 'react'; import NotesList from './NotesList'; import AddNote from './AddNote'; class Notes extends React.Component { render () { return ( <div> <h3>Notes for {this.props.username}</h3> <AddNote username={this.props.username} addNote={this.props.addNote} /> <NotesList notes={this.props.notes} /> </div> ) } }; Notes.propTypes = { username: React.PropTypes.string.isRequired, notes: React.PropTypes.array.isRequired, addNote: React.PropTypes.func.isRequired } export default Notes; /*var Notes = React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, notes: React.PropTypes.array.isRequired, addNote: React.PropTypes.func.isRequired }, render: function () { return ( <div> <h3>Notes for {this.props.username}</h3> <AddNote username={this.props.username} addNote={this.props.addNote} /> <NotesList notes={this.props.notes} /> </div> ) } }); module.exports = Notes;*/ |
