博客 / 詳情

返回

1. 使用create-react-app創建react項目

create-react-app

全局安裝create-react-app

npm install -g create-react-app

使用create-react-app創建一個項目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安裝過程較慢,
Installing react, react-dom, and react-scripts... 

如果不想全局安裝,可以直接使用npx

$ npx create-react-app your-app    也可以實現相同的效果

這需要等待一段時間,這個過程實際上會安裝三個東西

  • react: react的頂級庫
  • react-dom: 因為react有很多的運行環境,比如app端的react-native, 我們要在web上運行就使用react-dom
  • react-scripts: 包含運行和打包react應用程序的所有腳本及配置

出現下面的界面,表示創建項目成功:

Success! Created your-app at /dir/your-app
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 your-app
  npm start

Happy hacking!

根據上面的提示,通過cd your-app命令進入目錄並運行npm start即可運行項目。
生成項目的目錄結構如下:

├── README.md                            使用方法的文檔
├── node_modules                    所有的依賴安裝的目錄
├── package-lock.json            鎖定安裝時的包的版本號,保證團隊的依賴能保證一致。
├── package.json                    
├── public                                靜態公共目錄
└── src                                        開發用的源代碼目錄

代碼的入口是項目目錄下的index.js

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.