idea2018 快速搭建react項目指南

react與angular和vue是截止2018年爲止主流的前端框架。對於一些新手來說，想快速入門react，應該是搭建一個react最初的模板項目，然後在項目中添加一些自己喜歡的組件作爲練手。。今天本人用ideaIntelliJ IDEA，快速搭建react項目。首先需要準備如下幾個版本 ，項目名稱爲dragtest，本人想用這個測試react中的dragact組件的使用，這個草雞吊！！

ideta版本：

    2018.1.4 (Ultimate Edition)

    Linux 4.15.0-23-generic

nodejs：版本 v8.10.0，是本地js運行編譯環境

    

npm：版本3.5.2，用來管理react項目的快速安裝環境，類似於python中的 pip 可以安裝指定包

npm執行命令在路徑：/usr/share/npm中，在項目啓動的時候需要制定該路徑

creat-react-app :由npm isntall 安裝生成的，爲什麼單獨列出這個呢？這個是關鍵，因爲要創建react，最普通的方式

就是通過命令 create-react-app projectname 生成 名爲projectname的項目，那麼idea爲了方便大家快速搭建，需要用到

create-react-app中的index.js文件用來創建react應用，所以不清楚自己的create-react-app包在哪裏的同學可以看看如下圖

找的時候要特別小心，直接通過whereis查找的是linux引用文件，並非真實的包存在的地方，用idea創建需要引用真實的地方

其實有個更好的命令

zhangll 23:04:09 ~$ npm root -g
/usr/local/lib/node_modules

構建app

第一步：進入

第二步，配置文件

注意：這裏的script & version 不用寫，除非你知道create-react-app的版本號

成功搭建：

這裏需要用戶耐心等待嘍：

/usr/bin/node /usr/local/lib/node_modules/create-react-app/index.js dragtest
Creating a new React app in /tmp/1530428561698-0/dragtest.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> [email protected] postinstall /tmp/1530428561698-0/dragtest/node_modules/uglifyjs-webpack-plugin

> node lib/post_install.js

...........

Success! Created dragtest at /tmp/1530428561698-0/dragtest

Inside that directory, you can run several commands:
  npm start
    Starts the development server.
  npm run build
    Bundles the app into static files for production.
  npm test
    Starts the test runner.
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd dragtest
  npm start
Happy hacking!

Done

這裏的意思是nodejs在tmp文件夾下生成一個react模板，生成好以後idea會在項目中引入這個模板

最終：

可以看到npm的強大之處，你只要雙擊 start 就會彈出如下圖

選中好npm的包管理腳本位置之後會出現 3.5.2版本的標記

當然還有一種快捷方式就是在idea中配置一個鏈接到該位置的變量：方法如下

打開    File>Settings 配置，然後在左上角搜索 npm

start。。。

參考 nvm、npm、nodejs關係

https://www.cnblogs.com/qqpw/p/6597295.html

idea官方建立文檔

http://www.jetbrains.com/help/idea/react.html

github教程

https://github.com/facebook/create-react-app

測試之後發現 start無法運行

/usr/bin/node /usr/share/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto

> [email protected] start /home/zhangll/tomcat/apache-tomcat-7.0.69/webapps/dragtest
> react-scripts start

module.js:549
    throw err;
    ^

Error: Cannot find module '../scripts/start'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.resolve (internal/module.js:18:19)
    at Object.<anonymous> (/home/zhangll/tomcat/apache-tomcat-7.0.69/webapps/dragtest/node_modules/.bin/react-scripts:28:25)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)

npm ERR! Linux 4.15.0-23-generic
npm ERR! argv "/usr/bin/node" "/usr/share/npm/bin/npm-cli.js" "run" "start" "--scripts-prepend-node-path=auto"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the dragtest package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs dragtest
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls dragtest
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/zhangll/tomcat/apache-tomcat-7.0.69/webapps/dragtest/npm-debug.log

Process finished with exit code 1

其實之前已經發現 idea 會在/tmp/1530428561698-0/中生成一個文件，然後最後以某種方式copy到原文件，導致相對路徑出錯

解決方案是把/tmp/1530428561698-0/中的model包全部copy一份到idea目錄下

cp -r /tmp/1530428561698-0/dragtest/node_modules /home/zhangll/tomcat/apache-tomcat-7.0.69/webapps/dragtest/

方案解決。。。。。這個應該是idea中的一個bug。。。。希望idea能修復這個bug