Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React JS in HTML

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.

like image 225
DroidDev Avatar asked Mar 04 '16 12:03

DroidDev


People also ask

Can you use react JS with HTML?

To use React in production, you need npm which is included with Node.js. To get an overview of what React is, you can write React code directly in HTML.

What is react JS in HTML?

React is a JavaScript library for building user interfaces. React is used to build single-page applications. React allows us to create reusable UI components.

Is React for HTML or JS?

What makes React such a desirable library to learn is that it doesn't replace HTML. It takes advantage of HTML's popularity and strength as the most popular programming language, by letting you use a very similar syntax to HTML to build interfaces and add dynamic features to it using JavaScript.


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'
  }
}
like image 51
Matt Styles Avatar answered Oct 27 '22 10:10

Matt Styles