1. 程式人生 > >react腳手架搭建步驟

react腳手架搭建步驟

第一步:檢查npm和node是否安裝

在安裝之前要確認你的機器上安裝了 node.js 環境包括 npm。如果沒有安裝的同學可以到 node.js 的官網下載自己電腦的對應的安裝包來安裝好環境。

第二步:npm install -g create-react-app

這條命令會往我們的機器上安裝一條叫 create-react-app 的命令,安裝好以後就可以直接使用它來構建一個 react 的前端工程:

若報以下錯誤,是提示有許可權問題,在前面加上sudo,輸入本機密碼即可解決

若成功截圖如下

第三步:create-react-app hello-react

這條命令會幫我們構建一個叫 hello-react

 的工程,並且會自動地幫助我們安裝所需要的依賴,現在只需要安靜地等待它安裝完。

額外的小貼士:

如果有些同學安裝過程比較慢,那是很有可能是因為 npm 下載的時候是從國外的源下載的緣故。所以可以把 npm 的源改成國內的 taobao 的源,這樣會加速下載過程。在執行上面的命令之前可以先修改一下 npm 的源:

npm config set registry https://registry.npm.taobao.org

第四步:cd hello-react

第五步:npm start

第六步:看結果

React.js å®è£æç¨å¾ç

相關推薦

react腳手架搭建步驟

第一步:檢查npm和node是否安裝 在安裝之前要確認你的機器上安裝了 node.js 環境包括 npm。如果沒有安裝的同學可以到 node.js 的官網下載自己電腦的對應的安裝包來安裝好環境。 第二步:npm install -g create-react-app

react腳手架搭建

導入 module https router new 搭建過程 fcm 安裝完成 json react腳手架搭建 【轉】https://blog.csdn.net/weixin_41421227/article/details/80875544 由於我們

react-腳手架搭建專案

react-腳手架搭建專案 1.先利用npm包管理器,下載react腳手架: npm install create-react-app -g 2.利用react腳手架建立專案: create-react-app <專案名稱> 3.進入專案目錄:

react腳手架搭建和Ant Design配合使用

*****先要安裝node.js,使用npm包管理工具 node.js安裝方法如下***** https://blog.csdn.net/shiyaru1314/article/details/54963027 https://blog.csdn.net/qq_42564846/arti

react 腳手架搭建

package.json{  "name": "",    "version": "1.0.0",  //這是必須配置的  "description": "",    "main": "index.js",  "scripts": {    "test": "",    "w

Vue腳手架搭建步驟

打開 center -a 粘貼 left 輸入 tex 版本 步驟 Vue腳手架的搭建步驟 1. 去node.js官網下載node.js並安裝,如下圖: 2. 找到下載的文件並點擊安裝: 一直到finish完成。安裝成功 3

從零開始搭建react腳手架

從零開始搭建react腳手架安裝create-react-app: npm -g install create-react-app 創建一個新項目: create-react-app myapp 進入項目: cd myapp 安裝必備插件: npm install dollarphp less

react結合ts與mobx環境搭建步驟詳解

  由於react ts mobx 版本上的更新,一些配置資訊也在隨時更新,使得有時候,在更新版本時,一些配置檔案出錯,讓我們措手不及,現將三者環境搭建配上,廢話不多說   思路:新建react 應用,利用彈射實現進行mobx支援配置,最後搭建typescript   裝包:使用的用yarn,相信為什麼使

webpack4+react+antd從零搭建React腳手架(二)

接著上文,對webpack 的配置的優化和對css,圖片的編譯。以及引入antd 專案程式碼地址react-project 優化webpack 生成的檔名新增Hash值 output: { filename: "js/[name].[chunkhas

bower 的使用及react腳手架搭建

安裝 npm install bower -g  bower 的方法 info (資訊)  -->如 bower info react //用bower查react框架 的資訊 可以看到版本的

VUE-CLI腳手架工具搭建步驟

腳手架工具安裝 網址:https://cli.vuejs.org cli工具2.0版: 安裝路由:npm install vue-router --save 安裝vuex:npm install vuex --save 安裝axios:npm install

基於webpack4.X從零搭建React腳手架

專案初始化 $ npm init 複製程式碼 安裝webpack 本次建立是基於webpack4 $ npm install --save-dev 複製程式碼 新建webpack配置檔案 在根目錄建立build資料夾,新增一個js檔案,命名為webpack.base.conf.js

第一個React專案——使用官方腳手架create-react-app搭建第一個React專案

準備工作 1,node js環境 一、下載create-react-app           1)使用命令列的方式進入目標資料夾(shift+右鍵,此處開啟powershell視窗)(win10)           2)輸入命令  npx create-react

vue腳手架搭建的具體步驟

1、全域性安裝cli   npm install -g vue-cli 在全域性安裝vue的命令列工具 2、初始化專案   vue init webpack my-project   初始化一個基於webpack的專案,webpack檔案一般情況下都在build目錄中,&n

【webpack系列】從零搭建 webpack4+react 腳手架(一)

搭建一個React工程的方式有很多,官方也有自己的腳手架,如果你和我一樣,喜歡刨根究底,從零開始自己一行一行程式碼建立一個React腳手架專案,那你就來對地方了。本教程是針對React新手,以及對webpack還不熟悉的使用者,或者是想了解當前前端工程化方案的使用者。我會在整個系列通過webpack4的

【webpack系列】從零搭建 webpack4+react 腳手架(二)

html檔案如何也同步到dist目錄?bundle.js檔案修改了,萬一被瀏覽器快取了怎麼辦?如何為匯出的檔案加md5?如何把js引用自動新增到html?非業務程式碼和業務程式碼如何分開打包?如何搭建開發環境?如何實現開發環境的熱更新? 在上一節我們已經搭建了一個最基本的webpack環境,

【webpack系列】從零搭建 webpack4+react 腳手架(三)

本章節,我們對如何在腳手架中引入CSS,如何壓縮CSS,如何使用CSS Modules,如何使用less,如何使用postcss等問題進行展開學習。 1 支援css (1)在app目錄,新建一個css,命名為index.css,輸入樣式: h1{

【webpack系列】從零搭建 webpack4+react 腳手架(五)

本章節,我們一起來探討以下問題:如何對編譯後的檔案進行gzip壓縮,如何讓開發環境的控制檯輸出更加高逼格,如何更好的對編譯後的檔案進行bundle分析等。 1 gzip壓縮 如果你想節省頻寬提高網站速度,壓縮是一種簡單有效的方法。我們模擬一次html的請求,想象一下瀏覽器和伺服器的對

快速搭建react腳手架

Create React App 第一種方式:(請保證你的網路暢通) 新建資料夾,在webstrom中開啟資料夾==>命令框內輸入下方程式碼,四小步解決你的問題 Create React App是開始構建新的React單頁應用程式的最佳方式。它已經為你設定好了開發

重新認識React以及重新搭建React腳手架(0)

第一次開始學習React是今年的5月份,之前一直是直接寫JS和CSS,也沒有打包,直接載入,沒什麼複雜的東西。後來開始使用React,使用以後就有點愛不釋手 之前實現起來比較複雜的東西,現在也可以簡單的實現 只不過動畫是個弱項,不過我依賴了JQ庫,這樣就可以直接使用一些網站