Компоненты не визуализируются и не транспилируются

Я изменяю уже существующее веб-приложение и начал изменять его на странице if с помощью реакции.

Когда я использую createElement, я могу успешно отображать основные элементы, такие как кнопки, а также получать обратную связь при нажатии кнопок.

Просто для пробы я добавил еще один в свой html и назвал его «основным». Простой html выглядит так:

<script src = "app/like_button.js" type = "text/javascript"></script>
<script src = "app/modal.js" type = "text/babel"></script>


<div id = "buttons"></div>
<div id = "main"></div>

Затем я создаю свой modal.js внутри папки приложения:

// modal trial
class ExampleApp extends React.Component {
  constructor () {
    super();
    this.state = {
      showModal: false
    };
    
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }
  
  handleOpenModal () {
    this.setState({ showModal: true });
  }
  
  handleCloseModal () {
    this.setState({ showModal: false });
  }
  
  render () {
    return (
      <div>
        <button onClick = {this.handleOpenModal}>Trigger Modal</button>
        <ReactModal 
           isOpen = {this.state.showModal}
           contentLabel = "Minimal Modal Example"
        >
          <button onClick = {this.handleCloseModal}>Close Modal</button>
        </ReactModal>
      </div>
    );
  }
}

const props = {};

ReactDOM.render(<ExampleApp {...props} />, document.getElementById('main'))

Когда я запускаю свое приложение, я не получаю ошибок, но компонент реакции не отображается.

Я думаю, что это может быть что-то связанное с Babel. Я установил его, используя информацию отсюда: https://babeljs.io/en/setup#installation

У меня также есть package.json, который выглядит так:

{
  "name": "--",
  "version": "1.0.0",
  "description": "Prod instance is at https:--",
  "main": "/public/app/main.js",
  "directories": {
    "doc": "doc"
  },
  "dependencies": {
    "axios": "^0.18.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-preset-react-app": "^7.0.1"
  },
  "babel" : {
    "presets": ["es2015", "react" ]
  ,}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "http:--"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Я удалил несколько информации для конфиденциальности.

Надеюсь, вы поможете мне решить эту проблему.

ОБНОВЛЕНИЯ Как и предполагалось, я попытался установить babel, но похоже, что у меня проблемы с сетью. Когда я запускаю: npm install @babel/preset-env --save-dev Я получаю этот журнал:

0 info it worked if it ends with ok
1 verbose cli [ '/global/appl/node.js/node-v8.12.0-linux-x64/bin/node',
1 verbose cli   '/global/appl/node.js/prod/bin/npm',
1 verbose cli   'install',
1 verbose cli   '-g',
1 verbose cli   'babel-preset-react-app',
1 verbose cli   '--save-dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 75f9a86bb46d1391
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for babel-preset-react-app@latest request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
8 timing stage:rollbackFailedOptional Completed in 3ms
9 timing stage:runTopLevelLifecycles Completed in 4862ms
10 verbose type system
11 verbose stack FetchError: request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
11 verbose stack     at ClientRequest.req.on.err (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14)
11 verbose stack     at emitOne (events.js:116:13)
11 verbose stack     at ClientRequest.emit (events.js:211:7)
11 verbose stack     at onerror (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/agent-base/index.js:100:9)
11 verbose stack     at callbackError (/global/appl/node.js/node-v8.12.0-linux-x64/lib/node_modules/npm/node_modules/agent-base/index.js:122:5)
11 verbose stack     at <anonymous>
11 verbose stack     at process._tickCallback (internal/process/next_tick.js:189:7)
12 verbose cwd /home/user/project_name
13 verbose Linux 4.4.103-92.53-default
14 verbose argv "/global/appl/node.js/node-v8.12.0-linux-x64/bin/node" "/global/appl/node.js/prod/bin/npm" "install" "-g" "babel-preset-react-app" "--save-dev"
15 verbose node v8.12.0
16 verbose npm  v6.4.1
17 error code EAI_AGAIN
18 error errno EAI_AGAIN
19 error request to https://registry.npmjs.org/babel-preset-react-app failed, reason: getaddrinfo EAI_AGAIN acruz:80
20 verbose exit [ 1, true ]

Я на самом деле не понимаю, что происходит. Я помню, как читал, что это может быть проблема, связанная с сетью, поскольку я использую прокси-сервер, как указано в некоторых комментариях здесь: https://github.com/npm/npm/issues/16661

убедитесь, что вы установили "@babel/cli" "@babel/core", поскольку вы уже установили "@babel/preset-env", но установили "babel-core" вместо "@babel/core", и вы можете проверить с помощью это для настройки react-babel-webpack github.com/jai1331/babel-webpack-jsx

— 25.02.2019 12:02

@Jayavel Я попробовал ваше предложение, но я застрял в установке. Я использую корпоративный прокси, и у меня возникают ошибки, связанные с самой сетью. Не похоже, что для этого есть обходной путь.

— 25.02.2019 14:22

reactjs babeljs

25.02.2019 11:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...