Using Browserify and Reactify to Require Node Modules in Reactjs

Reactjs is the newest Javascript framework that is taking the developer world by storm. Though it has only been around in the last two years, the Facebook team created a framework that is growing in popularity amongst Javascript developers.

Reactjs uses an invisible DOM to build one way data binding, therefore reducing the need to refresh and boilerplate code when developing front end applications.

Though it is compatible with Nodejs, it does through a developer like me into a tizzy when it comes to the require statements. Enter browserify and reactify.

Recently, I was working on a project that required the use of a data visualization library named progressbar.js. Normally, we might be included to do this:

The wrong way to include require statements in Reactjs
The wrong way to include require statements in Reactjs

Reactjs does not allow for require statements to be written directly into its components.

Browserify is a solution because it can add require statements on the browser for you! In combination with reactify, the process is less painful

Reactify

Reactify is what we will use to transform our JSX file to JS. Here is my React component

profileAddDisplayHab.js

I need to transform this JSX file to a JS file in order to allow Browserify to require node modules in the browser.

  1. Go to your console and navigate to your folder and type this: browserify -t reactify 
  2. Add the name of the file you wish to transform
  3. Type >
  4. Give the transformed file a new name
The first file path is the file I want to transform in reactify. The second file name will be the new file name of the newly transformed file
The first file path is the file I want to transform in reactify. The second file name will be the new file name of the newly transformed file

Browserify

Now I need to Browserify the node module I will be requiring in my application; in this case the file is named:

progressBar.js

  1. Go to your console and type browserify -r
  2. Add the name of the file you want to require in your application
  3. Type >
  4. Type a new file name for it

Here is my example: requiredModules

The Final Step

The final step includes taking the two newly created files and browserifying them into one file. This file will be rendered to the DOM.

  1. Go to your console and use the command:
    1. browserify -x
    2. Add the required node module
    3. Add the component that will use it
    4. Type >
    5. Give the file a new name

My example looks like this:

finalStep

And that’s it! You now have a React component that can use a separate node module!

3 thoughts on “Using Browserify and Reactify to Require Node Modules in Reactjs

  1. Dennis Snell says:

    Have you tried to use browserify on a React component that uses those “require” statements? You might find that a bit easier. There’s really no problem doing what you want. Also, you might checkout “webpack” because it’s very easy to get started with and removes some intermediate steps you have setup with browserify

  2. dafabulousteach says:

    Thanks for the tip on webpack! I needed to use reactify first to transform my JSX files to JS. When using Browserify on a JSX file, it threw an error and couldn’t complete the process of requiring progressbar.js. Any another help or tips are welcome!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s