-1

I have defined my reactjs components in my HTML file like the following:

<script type="text/babel">
 var WorkHistory = React.createClass({
......
});
                  ReactDOM.render(
                        <WorkHistory 
                        />,
                        document.getElementById('work_history')
                    );
</script>

Now, I can easily use this in my HTML page. But, I need to write the entire entire code like this:

WORKHISTORY.js file:

var WorkHistory = React.createClass({
    ......
    });

WORKHISTORY.html file:

<script type="text/babel">
                      ReactDOM.render(
                            <WorkHistory 
                            />,
                            document.getElementById('work_history')
                        );
</script>

How can I achieve this??

Abhay
  • 46
  • 1
  • 9

1 Answers1

0

If I understand your question correctly, you want to write your components in separate .js-files and be able to access them in the <script>-tag where you use ReactDOM.render?

If that is the case, simply include <script>-tags with the src-attribute set to the path of your files before the rendering tag, as per my example:

<script src="./path/to/workhistory.js"></script>
<script type="text/babel">
  ReactDOM.render(
    <WorkHistory />,
    document.getElementById('work_history')
  );
</script>
dontexist
  • 5,252
  • 4
  • 27
  • 51
  • In that case I get an error : 'ReferenceError: WorkHistory is not defined' – Abhay Jul 27 '16 at 16:26
  • Oh, well I see now that you're using Babel to transpile your code. Babel will transform your code and prepend `'use strict'`, which encapsulates the scope of that file, preventing your other `script`-tags from accessing its variables. If you're just testing stuff out, you can use the global scope - `window` - when assigning and accessing your variables, but a better solution would be to use [a build system](https://babeljs.io/docs/setup/) with Babel instead. – dontexist Jul 28 '16 at 12:13