React的语法是用的比较新的,必须通过转译工具转义成真正能跑的起来的,开发都是比较新的语法,跑的时候都是比较兼容的语法
只要做React开发,模版几乎是一套,把这个打包,只要做项目,把这个包拿出来即可
包已经做好了
解压一下
开发需要用的包
git的忽略文件
两个配置文件
配置文件是很难配置的,要运行起来,就需要配置很多项
用VSCODE打开
babelrc
git的忽略文件
index就是首页,就是一个网页搞定全部网站,从首页开始变化,几个JS模版就可以搞定一个网站的样子
一个js就把所有的的东西打包进去
当下用的东西的配置文件
开发用的配置文件
生产用的配置文件
初始化最关键的就是这个文件,除了项目的基本信息,依赖也是在里面,用这个文件在,这里就是npm管理的项目
npm init就是来创建这个文件的,有这个文件在,npm就可以使用,npm所有的依赖包括打包都需要这个文件,包括你是dev依赖还是运行时的依赖,都要记录在这个文件里,这个文件很重要
i的意思就是install,npm i
i做的事情是把package.json中,已经列出的东西
只管install所有的依赖,包括开发和运行时要用的依赖
warn,如果时警告对开发影响不大,可以不管
这个很重要,就是在安装的
src是源码写在这里
、里面这个index.htnl是一个模板,外面的是真的网站
安装好,所有的js模块都在这里
两个配置文件
刚才开创建项目的时候都没有,先创建项目根目录,然后让这个项目给npm来管,如何管就需要执行npm init,就为这个项目建立了一个package.json文件,这个json文件要记录一些项目的描述性信息以及跟git仓库链接的问题,但是到目前为止没有任何依赖,开发以后有很多js文件,这些js文件需要依赖别人的库,这时候就需要npminstall,安装别人的库。
有的时候是开发时依赖,有的库是运行时依赖,把这些依赖的东西都下载了,每使用一下npm install,这个package.json里就在dev依赖里,和运行依赖里,包名就会加载进来,当时为这个项目使用的版本号加进来
这个包就省的你去下载了
1148个包,39秒安装完毕
npm install是首先要做的事情,把项目所有的依赖全部从网站上下载完成,这个完成会在本地生成一个modules目录,里面就是要用的东西
以后要是缺少包,只要写进去,重新npm install 是save还是save-dev中要考虑,
gitingnore传的时候应该把modules屏蔽掉
先熟练使用gogs,一般互联网公司都是使用gitlab
打包要用这个配置文件,prod(生产环境的意思)
start指定启动webpack,开发用的webserver,调试很方便,主要提供2个功能:静态文件支持、自动刷新和热替换HMR(Hot Module replactment)
最大好处是可以自动刷新,还可以做热替换
HRM可以在程序运行中替换,添加,删除模块,不需要重新加载页面,把变化部分替换掉,如果不用HRM就要页面强制刷新,用nginx做不了热刷新
inline是默认模式,使用HMR的时候建议开启,热替换时会有消息在控制台
用webpack连转带转译,一起全部做完
jtest是做java测试的
开发依赖save-dev,运行时依赖–save
env相当于一个集成,用一个env其实时可以搞定了
webpack里用了很多加载器
react-hot-loader热装载器
样式表的加载器
、包括测试服务器
版本号有4种
什么时候都只安装0.2.1
安装不低于2.4.1
、
^只安装4.x版本里最高的
~只会安装,1.2的最高版本
按照2.版本种最高的版本,比如现在是2.8.7,就下载2.8.7
用^相对比较安全,大版本的变化可能会很大,比如6和7版本差太多,就会不兼容
大多数采用^,最新版本太激进了,不敢用
代表在1版本里找最高的
跟样式表相关的
使用sourcemap可以定位到源码上去
运行时依赖更需要关注这些包
babel-polyfill替你磨平一些东西的
babel-runtime 运行时用的
mobx状态管理
axios异步网络通讯
antd react实现网页种控件的
antd ant design,时react做的比较好的一家
polyfill(腻子)浏览器支持的是参差不齐的,,有的功能浏览器没有提供,可以想办法用JS写一个,polyfill就是解决这些差异的
react提供的东西
操作DOM树的时候需要的
解决react-router 路由问题的
路由操作DOM树
react是三种管理方式管理状态的,一种是最基本的原始方式基本不用,
一种是Redwx,一种是Mobx,看起来小巧,功能绝对不弱的
这里面除了配置预设,还要配置一些插件
重要的其他两个配置文件
这是一个js脚本,符合commonjs的模块,用module.exports导出的,导出的是一个对象,这个对象内部该怎么写,哪些属性,我们也不知道,需要的插件都是从官网的添加进来
首先需要导入path和webpack,这是用commonjs的方式,就当import看
这就是commonjs的导出对象
让打包好的js跟源代码对应,方便调试代码错误
entry指的是程序入口,在src的index,index死因为下面有扩展extensions。也就是什么都不写调用的是index.js。这是js运行的入口
前面如果要做一些事情,把列表列起来即可,react-hot-loader是热加载组件,做刷新用的
output是告诉webpack输出bundles文件到哪里去
打包工具会把写好的所有js给打包成一个bundle捆,生成所有文件,生成所有逻辑都在里面
output就的是你想把它输出到哪里
找一个全局目录,找一个dist子目录,准备在里面输出一个
输出一个bundle.js
这个目录下取输出这个文件,将你写好的,所有JS打包,最后客户端看到JS文件放在哪个定义里,由publicPath定义
asserts就是它
在做一下导入 时候,如果什么扩展名都不写,默认当js
定义这些模块如何使用
它的正则表达式是以两个斜杠分界,以js结尾的,js结尾也称为模块,所以这里是做模块操作的,如果是以js结尾的文件就在里面。
排除在/node/modules这个目录里的,否则编译就把这个目录下所有文件也拿进来,巨大无比。
目录里的js将使用这些技术处理
如果碰到的结尾是.less结尾,则调用样式加载器,css加载器,less加载器,用他们来装载
新建一个LESS,看看这个到底是什么,rgb三原色表达形式
假设现在要统一修改颜色,less是预编译样式表,以后要换样式就把上面的样式统一换了
**有些浏览器不认,有几种办法,一种是 到less官方里下载js文件,由这个js文件动态解析,由它来支持less转换为css,
还一种还是在客户端使用前,把less先编译成css **
转换前需要安装 npm install less --save-dev
现在就被变量替换掉,下面是生成的东西
要么手动编译css,要么就使用一些其他的方式,比如在客户端增加一个less.js,由它来帮助我们
less就是增加了变量,mixin,函数等开发语言的特性,从而把css当编程的方式来写,less本身有一套语法规则
查看插件
plugin里有个数组,数组里有三个对象,定义全局变量的对象
**最下面有一个devserver的插件
compress是否支持压缩
publicapath 公共路径,也就是生成的js打包到哪里去
port这个网站会在3000端口
hot要不要热加载
historyapifallback **
最重要的就是端口是多少,使用路径是什么
这块内容暂时用不到,访问/api,会指向127.0.0.1:8080,转发到8080去了,可以实现动静分离的效果
除去这个,其他文件已经把开发要用的环境准备好了,有些人称这个开发文件搭了个脚手架,减少一些配置,直接在这个基础上做一些开发
启动项目
开发环境,还启动了一些支持热替换的方式
会把你下载的所有的包打包起来变成一个1.55M的东西
把bundle.js扔到了这个目录里,本地就可以看了,任何的404都会返回首页
这个脚手架好了,剩下的准备开发了
这个几万行还是sourcemap帮你做的,要不是有sourcemap,就需要你自己猜测了,不能查看源代码,因为这里面的内容都是js动态生成的
现在访问的是跟下的这个页面
src的index.htm就不一样
index。js是entry入口
调用了.app
这个就是用mobex实现的状态的控制
最后导出给你使用app
index导入app,默认后缀是js,缺省导出,这里用缺省导入即可
实际上跑的是这个,每隔一秒+1
现在改成+10
清零
按S保存
实际上这里重新编译了一遍
模块重新加载,页面自动刷新都不需要你管
改成+100保存
就重新编译了
用这些插件就可以快速进行调试了
如果有错误会在这里提示
有错误还可以到控制台,刷新不成功会有一大堆红色东西
devserver兼具着静态的页面
说明现在项目根目录被配置成了网站跟目录
z.css想办法引进来,一般放在head种,以前最早放在标记上
css就是用来控制html显示格式的,这里的样式都需要通过impot方式导入