All geek questions in one place

ReactDOM.render does not pass component

I am using nodeJS with a response.

to set the reaction in my node that I used.

npm install --save react react-dom

This is my index.html file

<html>
<head>
  <script src="Script/script.jsx" type="text/babel"></script>
</head>
<body>
  <div id="ExperimentForm"></div>
</body>
</html>

script.jsx

import React from 'react'; import ReactDOM from the "response";

var FormComponent = React.createClass({
  render :function(){
  return(<h2>Hello World</h2>);
  }

})

ReactDOM.render(<FormComponent />, document.getElementById("ExperimentForm"));

I tried using

var express = require('express');
var app = express();

but it also did not work.

my app.js

var SwaggerExpress = require('swagger-express-mw');
const express = require('express');
const app = express();
const path = require('path');

    var config = {
      appRoot: __dirname // required config
    };

    app.use(express.static(path.join(__dirname, 'views')));

    app.get('/index', function (req, res) {
      console.log("index page");
      res.sendFile(path.join(__dirname + '/views/index.html'));
    });

    console.log(path.join(__dirname + '/views/index.html'));
    SwaggerExpress.create(config, function (err, swaggerExpress) {
      console.log("Starting server");
      if (err) {
        throw err;
      }


      swaggerExpress.register(app);


      const port = 11011;
      const server = app.listen(port, function () {
        console.log('Server started @ %s!', port);
      });


    });

in the Google Developer Tool. I don't see any error, it seems to load index.html, but it doesn't display anything in the browser.

+4
source share
2 answers

import react react-dom. , script cdn. , jsx, babel-core. import script.jsx, index.html :

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script>

</head>

<body>
    <div id="ExperimentForm"></div>
    <script src="Script/script.jsx" type="text/babel"></script>
</body>

</html>
+2

:

npm install webpack babel-loader babel-core babel-preset-es2015 babel-preset-react

package.json script :

"scripts": {
"pack": "webpack"
// other default script tag here
}

deploy

webpack.config.js json

const path = require('path');
module.exports = {
  entry:"./<replace with your js file entry point>",
  output:{
  path: __dirname+"/deploy",
  filename:"app.js"
},
module:{
  loaders:[
  { test:/\.js$/, exclude:/node_modules/, loader:"babel-loader" }
]
}};

, , js js filename app.js

.babelrc json

 {
   "presets":[
   "es2015",
   "react"
   ]
 }

, babel es6 .

+1

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

More articles:


All Articles