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 <code>uncaught exception error: require not defined</code>. 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 some examples, I was able to let my browser compile <code>require()</code> statements written in my <code>.jsx</code> files. Problem What I am trying to do is: <ul> <li>Write a <code>.html</code> file.</li> <li>Start it via my <code>server.js</code> file.</li> <li>Add a <code><script></code> tag in it, which will inject my <code>.jsx</code> code into my <code>.html</code> file.</li> </ul> The examples that I have seen so far (1, 2, and some other...) load a <code>.js</code> file in the beginning and write their <code>.html</code> code in <code>.jsx</code> files (<code>render()</code> function). Question Is it possible to load a <code>.html</code> file from <code>server.js</code> and use <code>.jsx</code> from a <code><script></code> tag in that <code>.html</code> file? Something like this: <pre class="prettyprint"><code><html> . . <body> <div id="container"></div> <script src="path_to_reactjs_file"></script> </body> </html> </code></pre> 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.

Sounds like there might be an issue with file name extensions, Browserify only understands <code>.js</code> and <code>.json</code> extensions, unless you tell it otherwise. <code>$ browserify --extension jsx src/main.js > bundle.js</code> Babel with the right transforms will automatically do this for you as part of its module transpilation. <code>$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js</code> Note that this assumes your entry point has a <code>.js</code> file extension, if it was <code>.jsx</code> you'd have to set the extension type. This config can be simplified by adding the config to your <code>package.json</code> <pre class="prettyprint"><code>{ babel: { presets: [ 'es2015', 'react' ] } }, { browserify: { transform: 'babelify' } } </code></pre>

React JS in HTML

Tags:

reactjs

jsx

react-jsx

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 some examples, 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.

225

asked Mar 04 '16 12:03

DroidDev

1 Answers

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'
  }
}

answered Oct 27 '22 10:10

Matt Styles

Related questions
                            
                                Unit tests - flux and data persistency
                            
                                JSX Converter using React.createElement("h1", null) instead of React.DOM.h1(null)
                            
                                ReactJS: When should setState be guarded by isMounted?
                            
                                ReactJS - managed checkbox groups
                            
                                Code coverage on JSX tests with Istanbul
                            
                                React +(Router) without webpack or browserify
                            
                                how to remove / unmount nested react components
                            
                                React components render correctly in browser, but Jest test errors when rendering: "Only a ReactOwner can have refs"
                            
                                react-native component lifecycle methods not firing on navigation
                            
                                Find and manipulate a React.js component from the JavaScript console
                            
                                ListView removing wrong row on dataSource update
                            
                                Testing Webpack built React components with Jest
                            
                                Where do the webpack output files from the react-hot-loader go?
                            
                                Using node modules in Laravel
                            
                                undefined is not an object (evaluating 'RCTWebSockerManager.connect') -- React Native
                            
                                How to logically combine react-router and redux for client- and server-side rendering
                            
                                React: Cant call a function inside child component
                            
                                Rerender React component with new AJAX query parameter values
                            
                                How to run ReactJS in my Local PC?
                            
                                An error thrown by a React component, being caught in an unrelated promise's catch block

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With