Ad

React JS In HTML

- 1 answer

I am totally new to React JS or any given server-side technology. And now, I want to learn how to develop in React JS.

Introduction

I started with React JS tutorials on official website. Now, I am trying to import React toolbox or any other third-party component into my JSX code. But, I am facing the problem of uncaught exception error: require not defined.

When I searched about it, I came to know about various build mechanisms(browserify, webpack, gulp), to which I was totally new(again). After reading about these, and seeing someexamples, I was able to let my browser compile require() statements written in my .jsx files.

Problem

What I am trying to do is:

  • Write a .html file.
  • Start it via my server.js file.
  • Add a <script> tag in it, which will inject my .jsx code into my .html file.

The examples that I have seen so far (1, 2, and some other...) load a .js file in the beginning and write their .html code in .jsx files (render() function).

Question

Is it possible to load a .html file from server.js and use .jsx from a <script> tag in that .html file? Something like this:

<html>
.
.
<body>
    <div id="container"></div>
    <script src="path_to_reactjs_file"></script>
</body>
</html>

I am sorry if this sounds like totally dumb question, but because of being totally new to this technology, I am not able to understand how I should go about it.

Any help would be appreciated.

Ad

Answer

Sounds like there might be an issue with file name extensions, Browserify only understands .js and .json extensions, unless you tell it otherwise.

$ browserify --extension jsx src/main.js > bundle.js

Babel with the right transforms will automatically do this for you as part of its module transpilation.

$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js

Note that this assumes your entry point has a .js file extension, if it was .jsx you'd have to set the extension type.

This config can be simplified by adding the config to your package.json

{
  babel: {
    presets: [ 'es2015', 'react' ]
  }
},
{ 
  browserify: {
    transform: 'babelify'
  }
}
Ad
source: stackoverflow.com
Ad