React.createClass({ displayName: 'Child', contextTypes: { name: React.PropTypes.string }, // callMeAnythingYYY: function(){}, // componentWillReceiveProps: function() {}, render: function() { return React.DOM.div(null, this.context.name); } })
GL.createComponent( ({ children, quality }) => <Blur1D pixelRatio={1} width={1} height={1} resolution={[ 1, 1 ]} direction={[ 0, 0.1 ]}> <Blur1D pixelRatio={1} width={1} height={quality} resolution={[ 1, quality ]} direction={[ 0.1, 0 ]}> {children} </Blur1D> </Blur1D>, { displayName: "AveragePixels", propTypes: { children: React.PropTypes.any.isRequired, quality: React.PropTypes.number.isRequired } })
React.createClass({ propTypes:{ article : React.PropTypes.object }, render: function() { return ( <li className="list_item"> <a href={this.props.articles.link}> <ArticleThumbs production={this.props.article} /> </a> </li> ); } })
React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, notes: React.PropTypes.string.isRequired , addNote: React.PropTypes.func.isRequired }, render: function(){ console.log('Notes: ', this.props.notes) return ( <div> <h3> Notes for {this.props.username} </h3> <AddNote username={this.props.username} addNote={this.props.addNote} /> <NotesList notes={this.props.notes} /> </div> ) } })
React.createClass({ contextTypes: { router: React.PropTypes.func.isRequired, }, render: function() { return ( <div className="padding"> <h1> Home Page </h1> <p> </p> </div> ); } })
React.createClass({ propTypes: { username: React.PropTypes.string.isRequired, notes: React.PropTypes.array.isRequired, addNote: React.PropTypes.func.isRequired }, render: function() { return ( <div> <h3> Note for {this.props.username} </h3> <AddNote username={this.props.username} addNote={this.props.addNote} /> <NotesList notes={this.props.notes} /> </div> ) } })
React.createClass({ propTypes: { isLoading: React.PropTypes.bool, categories: React.PropTypes.array, // Better to specify the type too }, render: function() { return ( <div className="categories-screen"> <h1 className="categories-screen__title">Categories</h1> <div>Put a way to create categories here.</div> </div> ); } })
React.createClass({ // we declare we want to read the .text property of the context contextTypes: { text: React.PropTypes.string }, render: function() { // this component has access to the current context exposed by any of its parent return <span>{this.context.text}</span>; } })
React.createClass({ displayName: 'Header.jsx', propTypes: { title: React.PropTypes.string.isRequired }, render: function () { return ( <div className='Header u-background--primary'> {this.props.title} </div> ) } })
React.createClass({ displayName: 'Parent', childContextTypes: { name: React.PropTypes.string }, getChildContext: function() { return { name: this.constructor.displayName, }; }, // callMeWhateverZZZ: function() {}, // componentDidMount: function() {}, render: function() { return React.createElement(Child); } })
React.createClass({ propTypes:{ article : React.PropTypes.object }, render: function() { return (); } })
React.createClass({ getChildContext: function() { // it exposes one property "text", any of the components that are rendered inside it will be able to access it return { text: 'Where is my son?' }; }, // we declare text is a string childContextTypes: { text: React.PropTypes.string }, render: function() { // no props to pass down return <Level2 />; } })