28

I see lots of examples for react structured with var React = require('react') syntax. When I try and use this I get "require is not defined". How do I use and set up my static project to use require syntax?

Update

In actuality I am looking for a webpack/browserify config file so I can get started with React and CommonJS quickly. I have only written react apps without said build tools

Connor Leech
  • 18,052
  • 30
  • 105
  • 150
  • 3
    if you use "require" which is not react by commonjs module pattern. you need to use webpack, or some other commonjs module loader that will translate your modules into browser friendly code – Dayan Moreno Leon Oct 20 '15 at 22:39
  • Browserify is another (perhpas more beginner friendly) alternative http://browserify.org/ – hampusohlsson Oct 20 '15 at 22:49
  • please see edits. Really I have static files and want to know how to set up webpack/browserify for project with an `index.html` – Connor Leech Oct 21 '15 at 16:48

2 Answers2

32

require is not a React api, nor is it a native browser api (for now).

require comes from commonjs and is most famously implemented in node.js, if you have used node.js, you will see requires everywhere.

due to the popularity of require in node, people have built tools which will transform code that is written in nodejs style to be useable on the browser.

there's a few benefits to using require, it helps you keep your code modular and for some projects it allows you to write isomorphic code (code that runs both on client and server with minimal change)

In order to use require, you will need to use a tool such as webpack or browserify, I will use browserify as an example.

first create an 'index.js'

require('./app.js');
alert('index works');

then create an app.js

alert('app works');

next install the browserify cli

npm install -g browserify

And call this command in your shell

browserify index.js > bundle.js

Now you will have a bundle.js, in your html page create a 

<script src="bundle.js"></script>

And you should see both alerts run

Now you can continue to code, you can add react in your code by doing a 

npm install react --save

and then require it in app.js for example

var React = require('react');

React.createClass({
    render: function(){/*Blah Blah Blah*/}
})
yangli-io
  • 16,760
  • 8
  • 37
  • 47
  • Okay thank you for this explanation. Do you have a sample browserify config file you use in projects? – Connor Leech Oct 21 '15 at 16:43
  • Browserify generally works with gulp https://viget.com/extend/gulp-browserify-starter-faq and webpack works with a config file https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement – yangli-io Oct 21 '15 at 22:01
  • ok thank you. I set up a starter template using webpack here: https://github.com/cleechtech/react-static-starter – Connor Leech Oct 21 '15 at 22:06
  • Awesome, looks great. You probably want to gitignore the bundle.js since it just the product of webpack – yangli-io Oct 21 '15 at 22:10
  • can you explain it using webpack? – Manikanta B Feb 07 '18 at 06:01
6

BTW, If you are using webpack you can add to your webpack.config.js config file The following lines, eliminating the need to use require statements in your files:

 plugins: [
            new webpack.ProvidePlugin({
              'React':     'react',
              '$':          'jquery',
              '_':          'lodash',
              'ReactDOM':   'react-dom',
              'cssModule':  'react-css-modules',
              'Promise':    'bluebird'
            })

        ],

This is of course less verbose and not all developers like it, but it's good to know :)

danikoren
  • 4,191
  • 7
  • 34
  • 33