00:00
好了,各位学完了这些东西之后呢,你就掌握了react里边最最基础的语法以及一些核心概念,但不代表着我们的基础,讲完了基础还得继续往下讲,但是接下来呢,我不在这个里边编写代码了,因为以目前这种形式编码有点小问题,我们随便打开一个之前写过的啊,比如说state这个,我是每讲一个知识都新建一个点HTML文件,然后靠自己在前方引入这三个JS,然后呢是把javascript改成Bible这种形式来达到翻译里边你所写的GS叉代码,对吗?这种方式呢,有一些问题之前咱就提过,如果你这里边的代码足够多,就会导致浏览器很忙,半天没翻译过来,会导致诶有一段时间的白屏是吧,而且呢,同学右键你打开这个网页,由于呢,我们a react这个开发者工具,所以说呀,你来到控制台,你会发现同学,它会给。
01:00
一些提示,他说请确信你不是在生产环境里这么写代码,他就知道你这种写代码的方式不太对,说老师那生产环境我得怎么写呢?肯定不是新建一个一个的点HTML,自己用这种方式引用这种方式编译,那我们得借助一个人叫react脚手架,好,那折叠起来,我们打开课件啊走。恭喜大家来到第三章,我们开始学习react脚手架,我先说一个词叫脚手架,我说到这词,你能想到什么呢?啊,说说我能想到什么啊,之前呢,给大家找好了一些图片,省着我现去找啊,浪费时间打开,我第一次听到脚手架呢,同学,首先我想到的是这个,不知道在座的各位是不是我马上想到了工地里边工人干活那个脚手架,同学呢,咱们就研究一下工地里边工人干活为什么用脚手架呢?那就分析一下脚手架能给工人带来哪些好处,首先同学绿色的这是防护网,对吗?工人在防护网里边干活,就算失手了,也不会产生什么太大的安全问题,对不对,不至于掉下来哈,首先第一个安全,还有就是呢,同学,可能啊,大家也没有仔细观察过,就是这种工人干活的脚手架呀,它每隔几个栏杆儿,你就比如说这儿呢,其实它会搭建一个板子一层,然后在这儿呢,可能也会诶,搭建一层板子,人呢是可以直接踩在板子上干活的,你比如说这儿呢,可能还有一个,哎,这样的话,同学就避免了工人直。
02:33
接拿一个绳,哎把自己吊在外边,这就很危险是吧?哎也是为了安全,还有就是呢,如果你细心观察啊,就是在这种接头的地方,它可能会放置一些工具,你比如说工人正在这一层里边干活呢,可能需要一个扳手,他往左走一走就直接拿到了,哎为了干活方便,所以说工地里边工人干活这个脚手架是为了能让能够啊,让工人更加安全方便的啊,或者说快速的把自己的任务完成,对吧?不至于说拿一个绳吊在外边儿,想需要一个工具的时候呢,哎,下边还挂一个桶对吧?哎,弯腰去桶里边再拿东西啊,一是慢,二是也不安全,哎,所以说工人干活的脚手架有这个功能,那同学程序员编码的脚手架呢?
03:20
那有什么功能呢?同学,跟这个功能很类似,工人干活的脚手架能够让你安全快速的干活,那么程序员的脚手架就能让你快速的啊,这就不提什么安不安全了,是吧?快速方便的编写一个基于某种技术的应用,你比如说你是不是在学习react呀,那如果你不用react脚手架,那就像刚才这么写,哎,就这么写是吧,一呢,编码比较慢啊,二呢,本身它就有一些问题,你就现翻译太慢,所以说我们得学习react脚手架,目的是干嘛呀,简单快速的编写应用,回到课件当中,我们进入第三章的学习,叫react的脚手架,OK,好,说老师啊,那这脚手架是用什么搭的呢?同学,这个技术呢,你学过,叫web pack,对吧?同学,Web pack是不是有很多的loader和plugins呀?然后用于支持我们去完成一些功能,你比如说语法检查呀,代码搜。
04:20
呀,兼容性的处理呀,图片的压缩呀等等这些是不是webpa是不是都能干啊?那么react的脚手架呢?我们也得借助web pack,说老师呢,是不是我们自己得亲手去搭建一个脚手架呢?就从零开始,我们开始安装webpack,配置一个一个的loader,不用同学react的官方,哎,或者说Facebook这个开发团队已经为我们打造好了一套react的脚手架。啊说老师,那快来用一用吧,别急,我们先过一些概念性的东西,什么什么什么脚手架,就是用来帮助程序员快速的创建一个基于某种库的模板项目,你就比如说啊,同学前端里边的三大框架,那第一个安拉它有自己的脚手架,然后咱学的react有自己的脚手架,或者是哎,现在特别火的这个view也有自己的脚手架,那如果他们三个不出脚手架的话,你写起代码来那就特别麻烦,效率特别低啊好了。
05:21
用于创建什么呢?模板项目,也就是说某某某脚手架是他官方啊给你创建好的一个项目,但是并不是说这个项目里边他为你配置好了,登录注册个人中心,购物车没有,他只是写了一些简单的效果啊,主要是把那个架子给你搭起来,你别指望他给你完成太多的事儿啊,说老师通过某种命令登录写完了,通过某种命令注册页面写完了,那是不可能的,都得你自己写,OK,好包含了所有需要的配置,你比如说同学我在编写代码的时候,是不是得语法检查一下,而且你的GS叉是不是得有人帮你编译啊,而且是不是得自动打开浏览器啊,就这些所有的东西,是依赖也好啊,是配置也好啊,全帮你写完了啊,所以说第二个依赖也帮你下载好了,而且是第三个来可以直接运行一个简单的效果,其实吧,同学它也可以不写效果,就是你直接把这个脚手架拿过来,然后呢,你运行发现是个空白的页。
06:21
面什么也没有,任何文件也没有,写的全是配置,全都是webpad相关的东西,这就不太合适,这样的话人们拿过来之后就不知道如从下手了嘛,所以说呢,他会给你写一些简单的小例子,哎,他抛块砖引出你这块玉,对吧?你把他那个模板项目你改一改,然后在里边编写出自己的组件,诶,那就OK了。好,那我们再读第二个react提供了一个用于创建react脚手架的这么一个库,叫做create react APP。我们精简点说呀,就叫做创建react脚手架,完整点说呀,同学们应该这么叫说创建一个基于react脚手架的模板项目,但是一般的我们不说的这么繁琐,都简称了创建react脚手架,OK,不用你自己搭,那官方搭好了说老师,那我是不是去官网下载一下啊,不是的,官方出了一个命令,你用这个命令就可以创建出来一个基于react脚手架的项目,你把项目里边的东西读懂了,每个文件是干嘛的,再把你自己的业务逻辑加进去,你就可以真正的编写应用了。那么再读第三句话,项目整体的技术为react加web pack es6语法配合ES lit,哎,整体来说呢,他用了这么几个核心的人,并不是说只用了这几个人啊,不是,你比如说同学CSS是不是得有人处理啊,他肯定得有CSS loader,但是没有一个一个的全列在这儿,这只是列了一个核心的。
07:52
OK,好,如果以后呢,你用脚手架开发项目,那么你这个项目呢,就可以称之为模块化、组件化、工程化的项目。模块化组件化不再赘述了,之前讲过,那什么叫工程化呀?其实可以简单的记同学,就是如果在你的项目当中,你用上了web pack这种全自动化的构建工具,就是说你写了一段代码,它能帮你进行语法检查、代码压缩、语法转换、兼容性处理等等一系列的自动的东西,那么就可以称之为工程化的项目了。或者说同学们接地气点说,如果你通过这种构建工具完成了一条龙服务,代码只要写完了,剩下的一套流程全都自动走下去,对吧,编译呀,压缩呀等等这些,那么就可以称之为工程化的项目,就有点像汽车的这个生产线,在批量的制造汽车这种感觉好了,闲言少叙,说说如何去使用这个库。
08:52
同学一定要知道它们之间是什么关系,这个库要安装在你的电脑上,你只有拥有了这个库,你才能创建出来react的脚手架,脚手架又是谁搭的呀?Facebook搭的啊,那这个库又是谁创建的呢?Facebook创建的这个库OK,所以说同学们第一步你要保证把这个create react APP这个库啊安装在你的电脑上,而且注意哦,要是全局安装,为什么呢?全局安装之后,我是不是可以在任何我想用这个命令的地方直接使用它呀?哎,那所以说对大家呢,就得有一定的要求了,你对NPM,你对一二,必须得有一定的基本使用的能力啊,如果说老师我不太熟,那我建议你去鼓励学院看一下我们上硅谷的其他课程讲解包和包管理器那一块儿好吗?不允许大家残缺着之前的知识继续往下听,好,那么第一步安装来吧,怎么安装?
09:52
那呼出你电脑上的CMD命令行窗口,然后呢,输入这段命令,其实这个install啊,可以简写为I对吧?这个杠G呢,其实也可以放在后边对吧?其实你放在哪是无所谓的,我还原回来走,听视频的各位呢,可以跟着我一起去操作啊来,那叫做NP mi安装谁呢?Create单词千万别写错啊,React。
10:20
APP-G,这叫全局安装回车走。这个速度呢,一般来说会很快的,只要你所处的网络没那么差啊,一般很快十秒钟之内就能安装完好,那我们进入第二步来切换到你想创建项目的目录,同学,我问一下为啥安装它没有它,我怎么创建基于react脚手架的项目呀,对吧?啊说老师,那就用它去创建呀,那问题是在哪创建呀,对吧?所以说呀,同学们一定要养成一个良好的习惯,就以后在敲命令的时候一定要瞄着点前边的路径,它在哪儿呢?有些同学啊,都不关注前边的路径,就疯狂的开始敲命令,敲完了命令就问,诶,老师,我那东西哪儿去了呢?那谁知道你之前所处哪个路径了,对吧?说老师,那接下来你想在哪创建呢?说一下我想在桌面上创建同学。
11:17
哎,最小化最小化,最小化这会儿也先关掉,对我就想在桌面上,那怎么来到你的桌面呢?目前你已经处于C盘用户当前这个人的用户名,这个文件夹了,想来到桌面呢,非常简单,CD,然后呢,你就打个DES,按一下键盘上的tab键,它就联想了,叫desktop,这就是桌面。啊,有点电脑基础的同学呢,都知道deskop是不是就是桌面所在的那个文件夹呀,好了,进来啊,进来之后呢,同学你其实应该会一些简单的这种小命令,你比如说想看一下桌面上都有哪些文件夹,输入Di小灰车,看告诉你桌面上有这么多东西啊,有课程说明这个PPT,有store,有tooth,那你发现我桌面上是不是有sta,有兔TH这些文件都有吧?好说老师那敲的命令有点多了,我想清空一下CLS,哎,就是清空。
12:10
好吧啊,来吧,回到课件里边,看看他让咱们敲什么命令啊,注意观察啊,Create react APP空格加上你想创建那个应用的名字啊,最好不要使用特殊字符,也不要使用中文啊,这是原则,好,那我们就开始敲吧,走,Create create react-APP空格加上你应用的名字,我不想叫这种名字,什么hello react,我想换一个名字,什么名字呢,最小化啊,我之前在用HTML文件给大家讲基础的时候,我那文件是不是叫这名叫react basic啊,React基础内容,那么现在我毕竟学的是不是脚手架呀,那所以说呢,同学我搜索一下啊脚手架,看看它是怎么翻译的。
13:04
这个词叫staging啊,我们就用这个词了,好了给它关掉,那我想创建应用的名字就叫做react_staging同学,你可以用任何你喜欢的名字,因为最终呢,我这课讲完了,要给大家形成代码,所以说我得稍微标准一点,React staging在这个里边呢,我们讲解的是react的脚手架相关的知识啊,接下来呢,敲下回车,敲完回车之后啊,同学,你剩下的就是默默的等待了,你注意观察一下桌面上这个文件夹是不是生成了,现在先别打开,因为它还没下载完,那些依赖呢,没有帮你配置完呢,现在我们能做的就是默默的等待,这个速度呢,取决于你电脑的配置以及你所处的网络环境,就如果说你电脑是好久好久之前的了啊,而且是一个比较旧的机械硬盘,硬盘质量还不太好,所处的网络还慢,那你这个过程呢,可能就会有点痛苦了啊,稍微等一下这个视频呢,我不。
14:04
进行暂停啊,我把整个过程都给大家还原出来啊,等着他下载啊,只要它没停就不是下载完,说老师这儿下载完了也不是,你再等着再等着,最后我会告诉你什么时候叫他配置好了啊,在等着,如果你那儿也出现这种情况啊,就像我刚才似的卡住不动了,你敲一下回车,它就能继续的走下去啊,目前我这没卡,哎,像这种你就可以敲一下回车,它有可能就走下去了啊。稍等。再等好了,同学,什么叫完成了呢?各位,如果你的CMD命令行窗口重新回到这种效果了,那么恭喜你,脚手架呢就创建完了,然后呢,同学我们读一读啊,看看呢,它告诉我们什么了,往上滚动一下,滚动一下,哎,在这他说success成功是吧,成功的创建了staating这个基于react脚手架的项目以后啊,我就简称了,同学,我就叫创建react脚手架,OK,好,然后呢,你往这读,你往这儿读啊,什么呢?他说呀,我们猜测呀,你可能要开始执行这个脚本,哪个脚本呢?CD什么意思呀,就是进入某个目录,他的意思是我猜你接下来好像想进入到这儿啊,然后你应该执行Yan start,那咱们就说一下同学这几个命令啊,都是干嘛的,Ya人start。
15:37
是我们用的最多的一个,就是说开启开发者的那个服务器,也就是说wepa大家学过吧,是不是我们可以配置一些短命令,输入命令之后自动打开浏览器,自动打开你的页面是吧?Ya start,以后我们每天写东西的时候,想看效果,你都得执行一次ya start,这个ya build是什么意思呢?就是把你写完的项目最终进行一次打包,哎,就把你的JS叉啊什么的,最终都给你生成静态文件了,那这个动作一般什么时候执行呢?我说一下同学,就是整个应用啊,我们都写完了。
16:13
哎,整个应用都写完了,最终呢,人说好了,前端那个东西都写完了,那你们生成一下静态文件吧,啊,然后交给后端部署上去吧,我们用一下youngm build,那这个young test呢,说一下同学们几乎不用这个呢,是做测试的,我们一般不用单独的这种测试库去测试一些东西,我们直接star运行项目,直接看哪里对哪里不对就可以了啊这个eject说一下这个命令是干嘛的啊,你像start呀,Build呀,Test呀,大家都一看就明白这单词啥意思,那这个eject来我们打开有道呢,但是大家查一下啊。Ej ejec啊,什么喷射驱逐啊,逐出,那我说一下这个ej是干嘛的啊同学,呃,React脚手架呀,是不是也得借助webpa去搭建呀?啊,Facebook帮你写好了webpa的配置文件,学过web的小伙伴呢,可能都知道,同学webpack玩的是不是就配置文件呀啊,那配置文件是不是很主要?同学你随便改一个webpa的配置文件,就容易造成这个webpa环境被你弄坏了是吧?哎,那说一下同学就是react的脚手架默认的把所有webpa相关的文件都给你隐藏了,如果你之前好好的学过webpa这门课呢,同学你一定会见过这种文件webpa点空费点JS干嘛的呀,专门用于写web pack配置的,这个里边的东西可以这样讲,那绝对是核心,那么react脚手架呢,肯定也用了webpa。
17:52
他也肯定写了web pack.con.js只不过这不是我们写的,是Facebook公司帮我们写的。那么react脚手架呢,就怕你把这个文件碰坏了,它把所有webpa相关的配置文件全都隐藏了,不仅仅是这一个文件啊,还有很多的东西它都帮你隐藏起来了,你压根就看不见。有一种感觉就是你一直在用webpack,但是你根本看不到webpack的任何配置文件,因为它藏起来了。react官方呢,怕你不小心碰坏了,导致项目起不来。OK,那如果你用了eja的这个命令同学,你就把所有webpa相关的命令呢,就都暴露出来了,里边包含着所有webpa相关的配置文件,而且你注意啊,它在这给你来了一个提示,如果你做了这个事儿,就说你执行了一样eject,你把web pack所有的配置都暴露出来了,那么不好意思。
18:52
You can't go back,你不可以再回去了,也就是说如果你执行了这个命令,你把webpag所有相关的配置文件全都暴露出来之后,你不能再回去了,说我暴露之外,暴露之后我看完了,那我再通过一个命令再把它隐藏起来吧,不行了,你就回不去了啊。所以说同学,目前我们关注的只有一个,就是ya start能够用于开启这个基于react脚手架的一个小项目,OK,如果在座的各位1.webpa都没学,接下来我讲的这些东西,你肯定会晕的啊,所以说必须得学好这个webpa OK啊,我们先不去关注这个ej的,我知道大家挺好奇的,说老师要不运行一下,看看能暴露出来什么东西,别急,先把没有暴露web pack核心配置的这个文件夹呢,咱们搞懂了,你现在要是执行1EJ,那我告诉你同学,你这个配置文件里的东西那是特别多的,特别特别多,你就hold不住了,所以说呢,我们先观察。
19:52
查一下最基本的这些文件,里边这些东西都是干嘛的是吧?然后咱们再去验证一下这个eja到底能不能暴露出来web pack那么多核心的配置,好,那同学他猜啊,你好像就进入到这个里边,然后说他猜啊,你好像执行压start,那别让他猜了,我们就直接动一动吧,哈,给这个窗口呢,就可以关掉了,然后呢,打开这个文件夹,同学我先声明这个文件夹里的文件以及文件里的具体内容,现在你根本就不用关注,根本不用关注,回头我会带着你仔细的去分析里边这些文件的,啊,咱会整体的过一遍,好吧,那接下来呢,同学就得启动这个项目,那怎么启动呢?如果以后你入职了,到了公司人家问你,诶说这东西怎么启动呢?
20:43
那怎么办呀,你得看这个文件对吧?Package这点Jason,这是不是包的说明文件打开所有的短命令呢,其实都配置到这里了,我调一下我的配色方案啊,要不大家呢,就不便于观察了,调一个深点颜色的,比如说嗯这个吧,来配色方案这个好,同学注意观察那些短命令是不是都在这儿了,之前学习webpa的时候,我们是不是还亲手配过这些东西呢?诶,Start来在这呢,这是build test ejec好了,那给这个呢,关掉来,接下来呢,我们启动这个项目,Yarn start,当然了,同学,如果你的电脑上没有安装yarn,你只安装了NPM,那也没什么事儿,你可以执行n PM start也是可以的啊好了,那我们呢,得首先呀,打开那个命令行窗口,OK啊,然后得切到这个文件夹里边去,比较麻烦的一个做法就是CMDCD到桌面CD react。
21:43
不是basic啊,叫做sta进来了,然后你执行n PM start或者是young start,但这样的话太慢,教大家一招,在这个路径里边删掉,直接输入CMD敲回车,同学不仅打开了命令行,窗口已经切到了这个目录下,那接下来呢,我们执行一个命令,就是样start同学,由于我的电脑上呢有样啊,所以说我就用样了,也特别推荐大家呢,把react和ya一起配合使用,因为ya是Facebook出的,React也是Facebook出的啊好了,那接下来呢,注意看了啊,压start敲回车,这个时候就会开启项目,而且会自动打开浏览器,稍等浏览器是不是打开了,注意观察,默认它给的端口号是多少,是不是local host的3000,好,现在不要操作别的,等待好了,同学,效果出来了,这个就是Facebook精心。
22:44
为你准备的一个模板项目,说老师都没有点别的内容吗?什么也没有,就是一个logo在这儿转,所以说接下来呢,大家可以把视频停下来之后呢,自己去按照我刚刚那个步骤一步一步走下来,一直走到现在这个环节。好哎,那回顾一下同学我们需要几步呢?首先第一步全局安装这个库,第二步切到你喜欢的路径,创建一个你喜欢的项目名字不允许用中文和特殊字符啊,然后呢,进入这个文件夹,执行n PM start或者是young start,然后就开启这个项目了。那我们接下来呢,要学习的就是这个react Beijing,就是Facebook公司为我写好的这些文件都是干嘛的,把这些东西搞懂了,然后我们开始进行编码,好吧,那这一小节呢,我们先停一下。
我来说两句