日韩精品欧美激情国产一区_中文无码精品一区二区三区在线_岛国毛片AV在线无码不卡_亞洲歐美日韓精品在線_使劲操好爽好粗视频在线播放_日韩一区欧美二区_八戒八戒网影院在线观看神马_亚洲怡红院在线色网_av无码不卡亚洲电影_国产麻豆媒体MDX

React腳手架的創(chuàng)建

時(shí)間:2023-02-11 14:33:21 類型:React
字號(hào):    

React腳手架下入口文件index.html中有好多的標(biāo)簽及關(guān)鍵詞,分別是什么意思呢?

1.  使用create-react-app創(chuàng)建應(yīng)用

    1.1 react腳手架

        1, xxx腳手架: 用來幫助程序員快速創(chuàng)建一個(gè)基于xxx庫(kù)的模板項(xiàng)目

            1, 包含了所有需要的配置(語(yǔ)法檢查,JSX編譯,devServer...)

            2, 下載好了相關(guān)的依賴

            3, 可以直接運(yùn)行一個(gè)簡(jiǎn)單效果(已經(jīng)有了簡(jiǎn)單的示例頁(yè)面)

        2,  react提供了一個(gè)用于創(chuàng)建react項(xiàng)目的腳手架庫(kù):create-react-app(通過此創(chuàng)建react腳手架)

        3,  項(xiàng)目的整體主要技術(shù)架構(gòu)為: react + webpack(編譯打包: 轉(zhuǎn)換成html + css + js) + es6 + eslint(語(yǔ)法檢查)

        4,  使用腳手架開發(fā)的項(xiàng)目的特點(diǎn):模塊化(一般就是一個(gè)JS文件,提供特定的功能), 組件化(HTML+CSS+JS集合) , 工程化(一條龍服務(wù),代碼寫完,自動(dòng)編譯,壓縮,語(yǔ)法 檢查等)

2.  創(chuàng)建項(xiàng)目并啟動(dòng)

     第一步: 全局安裝create-react-app: npm install -g create-react-app

                                       npm i(install的縮寫) -g create-react-app

                                       半分鐘內(nèi)搞定(npm設(shè)置淘寶鏡像)

            全局安裝后,可以在任何目錄下面使用該命令

     第二步: 切換到想創(chuàng)建項(xiàng)目的目錄,使用命令:create-react-app  myProject(項(xiàng)目名稱, 不要使用特殊字符和中文, 且不在中文目錄下)

     第三步: 進(jìn)入項(xiàng)目文件夾 cd myProject

     第四步: 啟動(dòng)項(xiàng)目: npm start

3.  react腳手架項(xiàng)目結(jié)構(gòu)

     1, node_modules: 依賴所存放的位置

     public 目錄下

     2, index.html  : 項(xiàng)目的主頁(yè)面,里面設(shè)置了容器 <div id="root"></div>

        manifest.json: 應(yīng)用加殼配置文件,可以直接刪除

        robots.txt  : 爬蟲設(shè)置文件(對(duì)搜索引擎的支持設(shè)置)

     src    目錄下

     3, App.js      : 組件(會(huì)被渲染到index.html中的id=root的容器中) app.css是其對(duì)應(yīng)的css文件

     4, App.test.js : 測(cè)試文件,幾乎不會(huì)使用(我們測(cè)試就是直接看效果)

     5, index.css   : 放項(xiàng)目的公共樣式

     6, index.js    :項(xiàng)目的入口文件

        引入核心文件react,ReactDOM, 公共樣式,APP組件

        React.StrictMode : 能夠幫助檢查代碼中不合理的語(yǔ)法使用

        比如使用了 字符串格式的ref, 會(huì)提示這個(gè)將被廢棄了


        reportWebVitals;  實(shí)現(xiàn)頁(yè)面上一些組件性能的檢測(cè)

     7, setupTests.js  : 用于做組件測(cè)試的


項(xiàng)目啟動(dòng)后->index.js->index.html(webpack的配置,會(huì)自動(dòng)到public下面找index.html)

react腳手架結(jié)構(gòu).png

<