22

I am writing my first app in react native and my js file is getting pretty big. What is the proper way to split the file up.

If i have something like

var MyClass = React.createClass({
  ...
})

Can I save it at myclass.js and include in by some command in another js file?

Oswin Noetzelmann
  • 9,166
  • 1
  • 33
  • 46
Patrick Klitzke
  • 1,519
  • 2
  • 14
  • 24

2 Answers2

18

Here is the updated solution with using the import statement (in latest React-Native and generally Javascript adhering to ECMAScript6 and later):

file1 myClass.js:

export default class myClass {...}

file2 app.js:

import myClass from './myClass';

This is the basic version using a single default export. You can also export named exports that have to be explicitly listed on import. For more info see export and import.

Oswin Noetzelmann
  • 9,166
  • 1
  • 33
  • 46
17

In general you can do the following:

var MyClass = React.createClass({
    ...
)}

module.exports = MyClass;

This way you tell what should be publicly available.

And then, in your former big file you can load the contents like this:

var MyClass = require('./myclass.js');

Require returns the object that references the value of module.exports.

webwelten
  • 1,567
  • 11
  • 18
  • nice, thanks. Is it also possible to export more than one class? – Patrick Klitzke Oct 03 '15 at 23:46
  • I believe so. Assign MyClass to module.exports.MyClass then import it by calling require('./MyClass.js').MyClass You will have to do this for each class you assign to exports. – Emile Oct 19 '15 at 14:12