最近玩了一下React,感觉还挺好玩的,说实话对后端的来说比vue好多了,记得刚学vue的时候是一头雾水;

  基础知识暂时后面慢慢说,其实感觉还是挺容易的吧,今天就简单使用一下react脚手架,后续的用这个脚手架写点东西

1.准备noA O : lde版本

  , 1 P a使用create-react-app这个官方脚手架,对node版本有要求,最低要是10,否则就会报下面的这个错

  我猜,应该不会有人真的去傻傻的手动去官网下node安装包然后再更新吧…….

  我们可以使用nvy g * I um进行node版本管理,没有用过的可以看看这里nvm使用,我们可以去官网看看比较新的版本,就下载14.17.0吧

  nvm安装node:nvm instals L Wl 14.17.0

  nvm查看node版本:nvm ls

  nvm切换node版本:nvmuse 14.17.0

  查看node版本:node –8 d o h j @ =v

  下图可以看g J G } o I M到版本切换完毕

2.安装create-react-app脚手架

  注意,首先注意自己npm的源,可以使用nrm来管理源,nrm的使用

  脚手架安装命令:npm i -g create-react-app

  这个脚手架名字不要拼错了…有的人非要自己敲命令,锻炼自己的键盘能力,就是不肯复制,我也不知道有啥[ L r J u 9 W好锻炼的…╮(╯_╰)╭

  全局安装好了脚手架之后] u B L _ H w直接使用使用命令:create-react-app ,能看到下面的就表示安装成功了

  现在我们就可以使用脚手架创建项目了,注意:项目名字不要有大写!

  对于后Q O E r端的比较喜欢驼峰命名法,这里请用中划线,不然会报错;

  

  正确的应该是:create-react-app hello-react,能看到下面这种界面就成功了,然后切换到你的项目目录,最后使用npmstart运行,浏览器g & t o就会C t 1 W H自动打开看到react的图标就ok了

  这里又要注意) { /一下:如果你之前安装了yarn,这里npm命令会被替换成yarn命令,其实都一样,不要纠结,因为React和yarn的是Facebook的

3.目录结构

  实际项目中一般不会在cmd中运行项目吧,^ U ~ s我们可以使用vscode

  打开项目之前我们可以进入项目中将下面这两个目录删除,我们不用版本管理๑乛◡乛๑

  大概瞄两眼目录结J Q i N构,也没什么东西,就愉快的跳过了( ̄▽ ̄)ノ

  小小的总结一下:在项目启动的时候脚手架就会将执行src/index.js,下图所示,其实就是将App组件渲染到id为root的div标签所在的位置,至于为什么能找到public/index.html中的div标签,这就是脚手架封装的,暂时不要纠结(⊙⊙`)!

src/index.js:

  其k K 2 M . K |实我们可以I – e , J将脚手架生成的public/index.html删除掉,自己生成一个index.html文件,只需要添加一个标签<divid=”root”></div> 就行了

public/indF A D : ? Wex.html

4.插件$ V F {安装{ Q v % m

  我们瞄一下刚刚生成的App.js文件,emmm…居然是一个函数组件,我们肯定想用更高端一点的类组件呀!我们直} N r 6 Q o m \ /接去手写么?肯定不会呀,都是一些模板性的东西,不过刚入门可以手写几遍找找感觉( _f y X a | )

src/Appg e ^ |.js

  安装v j j \ – n h下面的这个插件:

  然后我们将App.js内容都给删除,然后输入rcc就G J @ z x j | 9能自动生成一个类组件,之后就可以在div那里使用其他的组件了

  注意:可能刚安装插件的时候没有提示,那么重启vscode,还是没有提示,那T G j c M + ? O 9你file->preference->online service settings->Extensions->TypeScript,勾上,再重启一下;如果还是没有提示,就将vscode中和eslint相关的插件(上图展示所有安装过的插件)给禁用掉,再重启!最后还是没有的话,重装一个vscode吧!(T_T)/~~(-_-メ)

  注意一小点,因为React支持jsx,所以jsx一般表示组件,而jsb w J ;是其他的文件,我们后缀名区分一下,就能一眼看出来组件和普通的js文A R n & L . l件;

  以jsx或者jsE L Z 0 i结尾的文件,在导入的– c r !时候也可以忽\ $ t ! } \ G略后缀名, V , 7 H $ } . f

  最终展示结果:

5.结束

  一顿操8 v 6作猛如虎,一看代码helloworld!

  这个脚手架封装了很多东西,配置文件很少,因N 7 % j { u j T为还有将webpack相关的配m g ( 7置文件都给隐藏起来了,使得我们只需要专注于页面功能的开发就行了!就我个人感觉,比vue-cli那个脚手架清晰多了;

  学了一下React之后,感觉腰也不酸了,腿也不疼了,精神也好了,一口气都能上五楼!(╯—﹏—)╯(┷━━━┷

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注