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.
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:
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 is what we will use to transform our JSX file to JS. Here is my React component
I need to transform this JSX file to a JS file in order to allow Browserify to require node modules in the browser.
- Go to your console and navigate to your folder and type this: browserify -t reactify
- Add the name of the file you wish to transform
- Type >
- Give the transformed file a new name
Now I need to Browserify the node module I will be requiring in my application; in this case the file is named:
- Go to your console and type browserify -r
- Add the name of the file you want to require in your application
- Type >
- Type a new file name for it
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.
- Go to your console and use the command:
- browserify -x
- Add the required node module
- Add the component that will use it
- Type >
- Give the file a new name
My example looks like this:
And that’s it! You now have a React component that can use a separate node module!