1. 程式人生 > >002-創建基本項目-新項目、空項目、已有項目

002-創建基本項目-新項目、空項目、已有項目

rmi copies .html ack 結構 eat bundles 依賴項 fig

一、創建基本項目

  您可以使用create-react-app軟件包或創建一個空的IntelliJ IDEA項目並在其中安裝React。create-react-app項目地址:https://github.com/facebookincubator/create-react-app

1.1、使用create-react-app生成React應用程序【第一種】

  create React App是開始構建新的React單頁應用程序的推薦方式。因此,您的開發環境已預先配置為使用webpack,Babel,ESLint和其他工具。詳細了解如何安裝React並從React官方網站創建React應用程序。

1》全局安裝create-react-app

  打開內置終端(View | Tool Windows | Terminal)並在命令提示符下鍵入npm install -g create-react-app。

2》創建一個應用程序

  1》File→New→Project→New Project

  2》選擇Static Web選項,選擇React APP項目,

  3》指定項目名稱和存儲路徑, 在Node Interpreterfield選擇合適的nodejs版本

  4》在create-react-app字段中,指定create-react-app包的路徑。

    註意:命名不能再包含大寫字母

    技術分享圖片

創建成功後,

  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 test_react_app
  npm start

Happy hacking!
Done

目錄結構

  技術分享圖片

  註意:要下載項目依賴關系,請執行以下操作之一:

    打開Terminal(View | Tool Windows | Terminal)並在命令提示符下鍵入npm install。

    在項目根目錄中的package.json文件的上下文菜單中選擇運行‘npm install‘。

1.2、在空白的IntelliJ IDEA項目中安裝React

  在這種情況下,您將不得不按照以下構建React應用程序中的描述來自行配置構建管道。詳細了解如何將React添加到React官方網站的項目中。

1》創建一個空的IntelliJ IDEA項目  

  1》File→New→Project→New Project

  2》選擇Static Web選項,創建Static Web

  3》指定項目名稱和存儲路徑【註意名稱不能有大寫字母】

2》在空項目中安裝React

  1》打開您將使用React的空白項目。

  2》打開Terminal (View | Tool Windows | Terminal) 使用: npm install --save react react-dom

按照以上添加沒有成功,此處添加了如下package.json

{
  "name": "test2_react_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

3.3、從現有的React應用程序開始

  要繼續開發現有的React應用程序,請在IntelliJ IDEA中打開它並下載所需的依賴項。

1》打開機器中已有的應用程序源

  File→Open

  或者也可以從版本庫中檢出項目

2》下載依賴

  在package.json上運行,npm install

002-創建基本項目-新項目、空項目、已有項目