React環境搭建

一.安裝node.js

官方下載地址https://nodejs.org/en/
盡量安裝最新的穩定版,react對node.js有版本要求

Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.

JavaScript一般都是在瀏覽器中執行的,而node.js就是提供了一個可獨立執行JavaScript的環境,這樣我們就有了一個可以獨立部署的前端工程。

通過以下命令檢查是否安裝成功
node -v
npm -v

二.npm包管理工具 基本使用

NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種:
1.允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
2.允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。
3.允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

本地安裝

npm install 包名@版本號
uninstall同理

  1. 將安裝包放在 ./node_modules 下(運行 npm 命令時所在的目錄
    ),如果沒有 node_modules 目錄,會在當前執行 npm 命令的目錄
    下生成 node_modules 目錄。

全局安裝

npm install -g 包名@版本號
uninstall同理

  1. 將安裝包放在 /usr/local 下或者你 node 的安裝目錄。
  2. 可以直接在命令行里使用。

其他常見命令
npm list -g 查看安裝的包列表
npm list grunt

三.創建并運行react項目

npm install -g create-react-app 安裝官方提供的生成react項目demo工具
create-react-app hello-react 在當前目錄下創建名為hello-react的項目

如果安裝包太慢,可以改為國內的淘寶源
npm config set registry https://registry.npm.taobao.org

cd hello-react 進入項目目錄
npm start 運行

四.項目目錄結構介紹

yarn.lock 安裝包版本號
package.json 運行npm start 命令就是運行該文件里的內容
node_modules 外部包文件
public/index.html 頁面上顯示的html的內容
public/manfest.json PWA 如果是作為一個app,定義app的圖標,主體
src /index.js 項目的執行入口

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 其實在今年年初,就初略的寫過一篇關于react項目創建的詳細步驟的文章,但那時候都是在最后實踐完成之后自己憑借著回...
    Swimly閱讀 3,177評論 0 2
  • 在當下前端熱潮中,一大批前端開發者,迷失了學習和追求的方向,面對日夜更迭的前端技術,我想大多數人跟我一樣會覺得自己...
    wenzirang閱讀 609評論 0 3
  • React環境搭建(一):webpack author: lordkhandate: 2017-02-08refe...
    lordkhan閱讀 627評論 0 0
  • 周末呆了兩天星巴克,通讀了一遍react以及部分npm,webpack的文檔,終于可以給一些像我一樣被前端雜亂的工...
    MMoooooon閱讀 2,154評論 2 2
  • 選擇工具 開發react的工具很多,我們這里選擇atom,首先去atom的官網下載https://atom.io ...
    者薄閱讀 1,908評論 0 1