WebStorm을 사용하여 React 앱을 실행할 수 없습니다.

Question

전적으로 React에 익숙하며 예제를 따르려는 시도는 react official website입니다.

WebStorm 또는

output of npm run start or npm start

궁극적 인 IntelliJ 아이디어를 사용하여 계산기 응용 프로그램 (하는 index.js)를 실행 그리고 난이 오류다면 :

(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 

내 질문은 그런를 실행하는 방법입니다 응용 프로그램 intellij 궁극적 인 아이디어를 사용하여 내가 무엇을 시도 :

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 

그리고 package.json에 다음과 같은 추가 :

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

또는 내 질문이 인 IntelliJ 아이디어 궁극적 package.json을 사용하여 이러한 응용 프로그램을 실행하는 방법입니다

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

을 .babelrc하는

{ 
    "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" ] 
    } 
} 

(내 질문은 궁극적 인 intellij 아이디어를 사용하여 이러한 응용 프로그램을 실행하는 방법입니다)

Answer 1

당신은 할 수 inst 모든 반응 스크립트는 npm install --save-dev react-scripts과 같습니다.
그러면 프로젝트의 루트에 react-scripts start (package.json이있는 위치)의이 명령을 실행할 수 있습니다.

당신이 명령을 사용하지 않으려면, 당신은 반응 응용 프로그램을 시작하려면 기본적으로

How to run a React app with Webstorm에서이 튜토리얼을 따라 할 수 있습니다, 당신은 명령 (npm start)를 실행해야합니다; Webstorm 시작 버튼을 사용하려면 명령에 바인드해야합니다. 부터 link :

1. 실행 | 기본 메뉴에서 구성 편집을 누릅니다.
2. 툴바에서 추가를 클릭하고 팝업 목록에서 npm을 선택하십시오.
3. 실행/디버그 구성 : NPM 대화 상자가 열리면 실행 구성의 이름, 실행할 npm 명령 줄 명령, 실행할 스크립트 (공백을 구분 기호로 사용), 패키지 위치를 지정하십시오. json 파일을 사용하여 스크립트의 정의를 검색하고, 명령 행 인수를 사용하여 스크립트를 실행합니다. Node 실행 파일의 위치와이 실행 파일에 전달할 Node.js 관련 옵션을 지정하십시오. 자세한 내용은 노드 매개 변수를 참조하십시오.