Menu
After doing the React tutorial this is my index.html file:
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> </head> <body> <div id="content"></div> <script src="lib/main.js"></script> </body> </html> And this is my src/main.jsx file:
var CommentBox = React.createClass({ getInitialState: function() { return {data: []}; }, loadCommentsFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, handleCommentSubmit: function(comment) { var comments = this.state.data; var newComments = comments.concat([comment]); this.setState({data: newComments}); $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: comment, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, render: function() { return ( <div className="commentBox"> <h1>Comments Yo</h1> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> <CommentList data={this.state.data} /> </div> ); } }); var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } // send request to the server this.props.onCommentSubmit({author: author, text: text}); React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; return; }, render: function() { return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" ref="author" /> <input type="text" placeholder="Say something..." ref="text" /> <input type="submit" value="Post" /> </form> ); } }); var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); commentNodes.reverse(); return ( <div className="commentList"> {commentNodes} </div> ); } }); var Comment = React.createClass({ render: function() { var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> <hr /> </div> ); } }); React.render( <CommentBox url="comments.json" pollInterval={2000} />, document.getElementById('content') ); Additionally, I am running this command to turn my jsx into js:
babel --watch src/ --out-dir lib/ I would like to move each React class into its own file. For example, I would like to create the following four files (note: each map to a top level "var" declaration in my main.jsx file) and pull all of these classes into my main.jsx file:
comment.jsx commentList.jsx commentForm.jsx commentBox.jsx How do I do this?
After banging my head on require and es6 for a while here, I still do not have a good intuition of how to separate all these apart, or if something like require / es6 is even the right way to approach this.
Thanks for the help!
772
In a project created with the create-react-app tool separating components seems to work fine like this. Define the component in a file Hello.jsx:
import React from 'react'; var Hello = React.createClass({ render: function() { return ( <p>Hello world!</p> ); } }); // Must export! export default Hello; And then you can import the component in another file with
import Hello from './Hello.jsx' If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
