Menu
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:
.html file.server.js file.<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
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.
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.
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.
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'
}
}
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
