React脚手架的创建

时间:2023-02-11 14:33:21 类型:React
字号:    

React脚手架下入口文件index.html中有好多的标签及关键词,分别是什么意思呢?

1.  使用create-react-app创建应用

    1.1 react脚手架

        1, xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

            1, 包含了所有需要的配置(语法检查,JSX编译,devServer...)

            2, 下载好了相关的依赖

            3, 可以直接运行一个简单效果(已经有了简单的示例页面)

        2,  react提供了一个用于创建react项目的脚手架库:create-react-app(通过此创建react脚手架)

        3,  项目的整体主要技术架构为: react + webpack(编译打包: 转换成html + css + js) + es6 + eslint(语法检查)

        4,  使用脚手架开发的项目的特点:模块化(一般就是一个JS文件,提供特定的功能), 组件化(HTML+CSS+JS集合) , 工程化(一条龙服务,代码写完,自动编译,压缩,语法 检查等)

2.  创建项目并启动

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

                                       npm i(install的缩写) -g create-react-app

                                       半分钟内搞定(npm设置淘宝镜像)

            全局安装后,可以在任何目录下面使用该命令

     第二步: 切换到想创建项目的目录,使用命令:create-react-app  myProject(项目名称, 不要使用特殊字符和中文, 且不在中文目录下)

     第三步: 进入项目文件夹 cd myProject

     第四步: 启动项目: npm start

3.  react脚手架项目结构

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

     public 目录下

     2, index.html  : 项目的主页面,里面设置了容器 <div id="root"></div>

        manifest.json: 应用加壳配置文件,可以直接删除

        robots.txt  : 爬虫设置文件(对搜索引擎的支持设置)

     src    目录下

     3, App.js      : 组件(会被渲染到index.html中的id=root的容器中) app.css是其对应的css文件

     4, App.test.js : 测试文件,几乎不会使用(我们测试就是直接看效果)

     5, index.css   : 放项目的公共样式

     6, index.js    :项目的入口文件

        引入核心文件react,ReactDOM, 公共样式,APP组件

        React.StrictMode : 能够帮助检查代码中不合理的语法使用

        比如使用了 字符串格式的ref, 会提示这个将被废弃了


        reportWebVitals;  实现页面上一些组件性能的检测

     7, setupTests.js  : 用于做组件测试的


项目启动后->index.js->index.html(webpack的配置,会自动到public下面找index.html)

react脚手架结构.png

<