Why is the React component not rendering on the page during Gulp build?

M

Maverick17user2018-12-21 21:04:19

React

Maverick17user, 2018-12-21 21:04:19

I am building a project using Gulp.

In the src folder - the development process.
In a gulp file, I'm transpiling React to ES5:

gulp.task('react', function() {
    return gulp.src('src/js/*.jsx')
    .pipe(babel({
        presets: ['env','react']
    })) 
    .pipe(jsx({
        factory: 'React.createClass'
    }))
    .pipe(gulp.dest('dest'))
})

I go through these 2 files with Gulp:
App.jsx

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
          To get started, editsrc/App.js and save to reload.
      </div>
    );
  }
}

export default App;

index.jsx:

import React from 'react';
import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById('root'))

In index.html, the transpiled index.js file is included, which renders the App component:

<body>
    <h3>HTML</h3>
    <div id="root"></div>
    <script src="./test.js"></script>
    <script src="./index.js"></script>
</body>

After starting the build, a dest folder is created with the processed code:

I run dest/index.html on the local server -> Component did not appear + I get an error:

What could be the problem? How to make a component render?
Part of package.json

"devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-debug": "^4.0.0",
    "gulp-if": "^2.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-watch": "^5.0.1",
    "http-server": "^0.11.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "stream-combiner2": "^1.1.1"
  },
  "dependencies": {
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "gulp-jsx": "^2.0.1"
  }

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

dev null, 2018-12-21
@curious-101

The browser swears that it doesn’t know what require is, you transpiled the code, but didn’t build the bundle. I am not a specialist in gallop, I don’t know if the article is relevant , knowledgeable people will correct it.
If you're learning React, you can use https://facebook.github.io/create-react-app/ and don't bother with builders. For collectors, I would recommend looking towards webpack or parcel