Multiple React components in a single module

reactjs gulp browserify
Elad Lachmi picture Elad Lachmi · Jun 10, 2015 · Viewed 34.5k times · Source

I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components I physically host in the same file and reuse across projects, I would like to export more than one component. I have tried an array:

module.exports = [Component1, Component2]

and have also tried an object with multiple properties:

module.exports = {Comp1: Componenet1, Comp2: Component2} and have also tried in-lining the calls to createClass in the object, but that didn't help.

Is there a way to do this or do I have to split every component in to a seperate JSX file?

Answer

Julha picture Julha · Oct 25, 2016

You can do like this, with an index.js file into your /components/ folder

/components/index.js

import Users from './Users/Users';
import User from './Users/User';


module.exports = {
  User,
  Users
}

IMPORT

import { Users, User } from './components';

As you can see, I named my file index.js, it prevent me from write it in the import declaration. If you want to name your file with another name than index.js, you'd have to write the name of the file in the import, Node won't guess it ! ^^

Related questions

Receiving 'Error: Cannot find module' using browserify, gulp, react.js

So I've been playing around with React.js, gulp and browserify. Everything works great until I try to require a module in my main.js file. I am requiring components/modules in other files with no problem (see below), but …

Read More
Using gulp-browserify for my React.js modules I'm getting 'require is not defined' in the browser

I'm trying to use gulp-browserify to generate a bundle.js file that can be included to the client's browser and begin rendering React components. Here is my App.js file: /** @jsx React.DOM */ var React = require('react'); var App = React.…

Read More
Disable chrome react DevTools for production

I'm trying to browserify my react app for production using gulp and envify to setup NODE_ENV. So I can remove react warning, error reporting in the console, and even my code to disable some features like the require of …

Read More