6

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.

Improve this question

3 Answers 3

Reset to default
4

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'
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Can I have .html file as entry point? That is what I really wanna do. Use html file as entry point, and then use .jsx scripts in it.
No, that actually makes no sense :) Browserify and babel and other such tools are simply preparing your JS for the browser. The html 'houses' the scripts (if you will), React and many other libraries then work by creating more html and injecting it into the dom.
Oh, ok. I will accept your answer if something doesn't show up in 1 or 2 days. If you have a link to good tutorial, from where a total beginner(me) can start learning React, please let me know. Since what facebook told was totally unhelpful for absolute beginners. Thanks for your time :)
Though, another related questions is, if I already have readymade html template, and now I want to go in react js, will I have to write all of that in .jsx files? What I was thinking is, you can use react scripts same as you can use javascript scripts in html.
You can, they just need a compile (or build) step as they are not js, they contain a separate language, so your browser does not understand them. Additionally, many times they use ES6 features and a module system, all of which your browser does not understand, so you have to build them into a version of JS they do understand. This isnt a React problem. Most React starter-kits I've found arent easy to understand! This one looks fairly straight forward, maybe that can help you?
|
0

Without bundling, you can not include jsx to html directly, but you can create components without jsx syntax (use plain js) and it will work.

Improve this answer

4 Comments

Actually, you can, if you additionally include the JSX Transformer (or its Babel equivalent) to compile your script when it hits the browser. It certainly is not recommended for production (or even dev!) environments, but it makes sense for quick prototypes.
I tried using babel or JSX Transformer(through script tag in head) @MattStyles . It works fine until I am developing everything in .jsx. But, when I use require() statement or import statement in that, it gives me error(as I wrote in Introduction part)
Oh, it sounds like a file name problem. Browserify's require algorithm (basically, node's) only understands .js and .json files, you have to explicitly tell it to import files with .jsx, I'll write up an answer as that sounds like it might be your issue.
My bad. I wasn't aware of that. I though that is was removed, but babel-standalone might be good.
0

first thing to note...

Browser can understand only HTML, CSS and plain javascript.

If you are providing JSX to browser, it fails to parse it. So you need to use a package bundler such as webpack. this converts all your JSX, typescript, Sass files into javascript(bundle.js) file. You can give this bundle.js file in the .html file

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.