Kann keine React App mit WebStorm ausführen

Question

Ich bin völlig neu in React und ich versuche, die Beispiele auf react official website zu folgen.

Während des Laufens den Rechner App (index.js) mit WebStorm OR IntelliJ IDEA ultimative

output of npm run start or npm start

und ich bekomme diese Fehlermeldung:

(function (exports, require, module, __filename, __dirname) { import React from 'react'; 
                   ^^^^^^ 
    SyntaxError: Unexpected token import 
     at createScript (vm.js:80:10) 
     at Object.runInThisContext (vm.js:139:10) 
     at Module._compile (module.js:599:28) 
     at Object.Module._extensions..js (module.js:646:10) 
     at Module.load (module.js:554:32) 
     at tryModuleLoad (module.js:497:12) 
     at Function.Module._load (module.js:489:3) 
     at Function.Module.runMain (module.js:676:10) 
     at startup (bootstrap_node.js:187:16) 
     at bootstrap_node.js:608:3 

    Process finished with exit code 1 

Meine Frage ist, wie ein solcher laufen app mit intellij idea ultimate Was ich probiert habe:

npm install -g create-react-app 
npm install -g eslint 
npm install --save-dev babel-preset-es2015 
npm install --save-dev babel-core babel-preset-es2015 babel-preset-react 
npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype 

und die folgenden zu package.json:

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

Oder

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

Meine Frage ist .babelrc, wie eine solche App IntelliJ IDEA ultimative package.json

laufen

{ 
    "name": "emoji-search", 
    "version": "0.1.0", 
    "private": true, 
    "homepage": "http://ahfarmer.github.io/emoji-search", 
    "devDependencies": { 
    "gh-pages": "^1.1.0", 
    "react-scripts": "^1.0.17" 
    }, 
    "dependencies": { 
    "github-fork-ribbon-css": "^0.2.1", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject", 
    "deploy": "gh-pages -d build" 
    }, 
    "eslintConfig": { 
    "extends": "./node_modules/react-scripts/config/eslint.js" 
    }, 
    "babel": { 
    "presets": [ "es2015", "react" ] 
    } 
} 

(Meine Frage ist, wie man eine solche App mit Intellij Idee Ultimate)

Answer 1

Sie können inst Alle reagieren-Skripte wie diese npm install --save-dev react-scripts.
Dann können Sie diesen Befehl ausführen: react-scripts start im Stammverzeichnis Ihres Projekts (wo package.json ist).

Wenn Sie Befehl nicht verwenden möchten, können Sie dieses Tutorial auf How to run a React app with Webstorm

Grundsätzlich folgen kann, eine reagieren App zu starten, müssen Sie einen Befehl (npm start) laufen; Wenn Sie die Webstorm-Startschaltfläche verwenden möchten, müssen Sie sie an den Befehl binden. Von diesem link:

1. Wählen Sie Ausführen | Konfiguration bearbeiten im Hauptmenü.
2. Klicken Sie auf Hinzufügen auf der Symbolleiste und wählen Sie npm aus der Popup-Liste.
3. Geben Sie im Dialogfeld Ausführen/Debugkonfiguration: NPM den Namen der Ausführungskonfiguration, den auszuführenden npm-Befehlszeilenbefehl, die auszuführenden Skripts (Leerzeichen als Trennzeichen verwenden) und den Speicherort des Pakets an. json-Datei, um die Definitionen der Skripte abzurufen, und die Befehlszeilenargumente, mit denen das Skript ausgeführt werden soll. Geben Sie den Speicherort der ausführbaren Node-Datei und die Node.js-spezifischen Optionen an, die an diese ausführbare Datei übergeben werden sollen, siehe Knotenparameter für Details.