Geek Answers Handbook

How to split js components into multiple files

I am trying to split each component into a separate file for better modularity. Although I have included the jsx file component on the index page, I still get Uncaught ReferenceError: TopicsList is not defined

Here is the code:

index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React.js Demo</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="//fb.me/react-0.14.5.js"></script> <script src="//fb.me/react-dom-0.14.5.js"></script> <script src="//fb.me/JSXTransformer-0.12.2.js"></script> <script src="../components/layout.jsx" type="text/jsx"></script> <script src="../components/topic-list.jsx" type="text/jsx"></script> </head> <body> <div id="main-container"></div> </body> </html>

layout.jsx

 "use strict"; var Layout = React.createClass({ render: function() { return ( <div className="container"> <TopicsList /> </div> ); } }); ReactDOM.render(<Layout />, document.getElementById('main-container'));

topic-list.jsx

 "use strict"; var TopicsList = React.createClass({ getInitialState: function () { return { isTopicClicked : false, topicPages }; }, onClick: function (topicID) { this.setState({isTopicClicked : true}); this.setState({topicsID : topicID}); }, render: function () { return ( <div> <div className="row topic-list"> <SingleTopicBox topicID="1" onClick={this.onClick} label="Topic" /> <SingleTopicBox topicID="2" onClick={this.onClick} label="Topic" /> <SingleTopicBox topicID="3" onClick={this.onClick} label="Topic" /> <SingleTopicBox topicID="4" onClick={this.onClick} label="Topic" /> </div> <div className="row"> { this.state.isTopicClicked ? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages} /> : null } </div> </div> ); } }); var SingleTopicBox = React.createClass({ render: function () { return ( <div> <div className="col-sm-2"> <div onClick={this.props.onClick.bind(null, this.props.topicID)} className="single-topic" data-topic-id={this.props.topicID}> {this.props.label} {this.props.topicID} </div> </div> </div> ); } }); var topicPages = [ { topic_no: '1', topic_pages: [ { headline: 'Topic 1 headline', description: 'Topic 1 description comes here...page 1' }, { headline: 'Topic 1 headline', description: 'Topic 1 description comes here...page 2' }, { headline: 'Topic 1 headline', description: 'Topic 1 description comes here...page 3' } ] }, { topic_no: '2', topic_pages: [ { headline: 'Topic 2 headline', description: 'Topic 2 description comes here...page 1' }, { headline: 'Topic 2 headline', description: 'Topic 2 description comes here...page 2' }, { headline: 'Topic 2 headline', description: 'Topic 2 description comes here...page 3' } ] }, { topic_no: '3', topic_pages: [ { headline: 'Topic 3 headline', description: 'Topic 3 description comes here...page 1' }, { headline: 'Topic 3 headline', description: 'Topic 3 description comes here...page 2' }, { headline: 'Topic 3 headline', description: 'Topic 3 description comes here...page 3' } ] }, { topic_no: '4', topic_pages: [ { headline: 'Topic 4 headline', description: 'Topic 4 description comes here...page 1' }, { headline: 'Topic 4 headline', description: 'Topic 4 description comes here...page 2' }, { headline: 'Topic 4 headline', description: 'Topic 4 description comes here...page 3' } ] }, ]; var SelectedTopicPage = React.createClass({ getInitialState: function() { return{ topicPageNo: 0, total_selected_topic_pages: 1 } }, navigateBack: function() { let topicPageNo; if (this.state.topicPageNo > 0){ topicPageNo = this.state.topicPageNo - 1; } else { topicPageNo = 0; } this.setState({topicPageNo : topicPageNo}); }, navigateNext: function(totalPagesInSelectedTopic) { let topicPageNo; if (totalPagesInSelectedTopic > this.state.topicPageNo + 1){ topicPageNo = this.state.topicPageNo + 1; } else { topicPageNo = this.state.topicPageNo; } this.setState({topicPageNo : topicPageNo}); }, render: function() { let topicsID = this.props.topicsID; let topicPageNo = this.state.topicPageNo; return ( <div> {this.props.topicPages.filter(function(topicPage) { // if condition is true, item is not filtered out return topicPage.topic_no === topicsID; }).map(function (topicPage) { let totalPagesInSelectedTopic = topicPage.topic_pages.length; return ( <div> <div> <SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}> {topicPage.topic_pages[topicPageNo].description} </SelectedTopicPageMarkup> </div> <div> <NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack}/> </div> </div> ); }.bind(this))} </div> ); } }); var SelectedTopicPageMarkup = React.createClass({ render: function() { return ( <div className="topics-page"> <h1>{this.props.headline}</h1> <p>{this.props.children}</p> </div> ); } }); var NextPrevBtn = React.createClass({ render: function() { return ( <div className="next-prev-btn"> <a onClick={this.props.moveBack} className="btn prev-btn">Back</a> <a onClick={this.props.moveNext} className="btn next-btn">Next</a> </div> ); } });
+6
source share
1 answer

in your particular case, you should load topic-list.jsx before layout.jsx but for better modularity I recommend that you try using some kind of bundle system like webpack or browser.

+2
source

More articles:


All Articles