@Maverick17user

Почему не рендерится React-компонент на странице при Gulp-сборке?

Я собираю проект используя Gulp.
5c1d2584f2082321468081.png
В папке src - процесс разработки.

В gulp-файле я транспилирую React в 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'))
})


Gulp'ом прохожусь по этим 2м файлам:
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'))

В index.html подключается протранспилированный файл index.js, который рендерит компонент App:
<body>
    <h3>HTML</h3>
    <div id="root"></div>
    <script src="./test.js"></script>
    <script src="./index.js"></script>
</body>

После запуска сборки создаётся папка dest с обработанным кодом:
5c1d287c3ee7f242636066.png
Я запускаю dest/index.html на локальном сервере -> Компонент не появился + получаю ошибку:
5c1d29e5f071b229833022.png
В чём может быть проблема? Как сделать, чтобы компонент отрендерился?
Часть 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"
  }
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 1
@curious-101
Frontend developer
Браузер ругается на то, что не знает, что такое require, вы транспилировали код, но не собрали бандл. Я не спец в галпе, не знаю актуальна ли статья , знающие люди поправят.
Если изучаете реакт, то можете воспользоваться https://facebook.github.io/create-react-app/ и не мучиться со сборщиками. По сборщикам я бы рекомендовал посмотреть в сторону webpack или parcel
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Indacoin Москва
от 80 000 до 160 000 руб.
Acme Crypto Corp Нижний Новгород
от 120 000 до 200 000 руб.
21 марта 2019, в 18:59
500 руб./за проект
21 марта 2019, в 18:19
4500 руб./за проект
21 марта 2019, в 18:13
10000 руб./за проект