All geek questions in one place

JS Response in HTML

I am completely new to React JS or any server technology. And now I want to learn how to develop in React JS.

Introduction

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

When I searched about it, I found out about various build mechanisms (browserify, webpack, gulp), to which I was completely new (again). After reading this data and looking at some examples , I had my browser compile the require() statements written in my .jsx files.

Problem

I am trying to do the following:

  • Write a .html file.
  • Run it through my server.js file.
  • Add a <script> tag to it that will inject my .jsx code into my .html file.

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

Question

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

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

I apologize if this sounds like a completely stupid question, but because I am completely unfamiliar with this technology, I cannot understand how I should do it.

Any help would be appreciated.

+5
source share
2 answers

It looks like there might be a problem with file name extensions, Browserify only understands the .js and .json , unless you report otherwise.

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

A Babylon with the right conversions 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 will need to set the extension type.

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

 { babel: { presets: [ 'es2015', 'react' ] } }, { browserify: { transform: 'babelify' } }
+4
source

Without binding, you cannot directly include jsx in html, but you can create components without jsx syntax (use plain js) and it will work.

0
source

Source: https://habr.com/ru/post/1244429/

More articles:


All Articles