корень не признать реагировать дом рендеринга - PullRequest
Новая
       11

корень не признать реагировать дом рендеринга

0 голосов
/ 06 марта 2019

Я пытаюсь настроить React для проекта с использованием Visual Studio 2015. Я начинающий, я обучаю на Youtube здесь . Я нахожусь в момент создания моего ReactDOM.render в файле app.js следующим образом: 

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));

Он не может распознать синтаксис React (и я не уверен почему).

кодовый контекст

После расследования у меня сложилось впечатление, что оно может исходить из babel-preset-react, который может быть неправильно вызван в файле webpack.config.js.

Может ли кто-нибудь прояснить этот вопрос для меня, пожалуйста?

Вот несколько файлов, которые могут вас заинтересовать:

package.json 

{
  "name": "tuturial",
  "version": "1.0.0",
  "description": "User1 & ASP.Net tutorial",
  "main": "apps.js",
  "scripts": {
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "User1",
  "license": "UNLICENSED",
  "devDependencies": {
    "babel-loader": "^8.0.5",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

webpack.config.js 

module.exports = {
  context: __dirname,
  entry: "./app.js",
  mode: "development",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ]
  }
};
...