CODEWITHSUNDEEP
javascriptreactjsecmascript-6
kirsanv43
kirsanv43

Reputation: 358

React.js: how separate jsx es6

i use client side rendering and faced with the following problem.

I have two components which are located in two different files

  1. DefinitionNode

class DefinitionNode extends BaseNode{
	render() {
		return (
			<div></div>
		);
	}
}

  1. BaseNode

class BaseNode extends React.Component{
	render() {
		return (
			<div></div>
		);
	}
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
     
    <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/baseNode.jsx"></script> 
    <script type="text/babel" src="~/Scripts/reactApp/fieldGeneration/definitionNode.jsx"></script>

After go to page i get an error: BaseNode is not defined

How do I make separate components is correctly?

Upvotes: 0

Views: 367

Answers (1)

just-boris
just-boris

Reputation: 9746

Your jsx files were wrapped into closure during babel processing. If you want to share something between files, you have to export it. The simplest way is assign to the window: 

class BaseNode extends React.Component {
  render() {
    return (
        <div></div>
    );
  }
}

window.BaseNode = BaseNode;

Here is working example in plunker: http://plnkr.co/edit/EgYBIzv9AboHftcyuWys?p=preview

But this way only for small applications and examples. If you are building something serious, use module system which will do this work for you, try SystemJS or Webpack, for example

Upvotes: 1

Related Questions