初次使用create-react-app

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

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

1.准备node版本

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

 

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

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

 

　　nvm安装node：nvm install 14.17.0

 

　　nvm查看node版本：nvm ls

　　nvm切换node版本：nvm use 14.17.0

　　查看node版本：node -v

　　下图可以看到版本切换完毕

 

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

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

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

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

　　全局安装好了脚手架之后直接使用使用命令：create-react-app  ,能看到下面的就表示安装成功了

 

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

　　对于后端的比较喜欢驼峰命名法，这里请用下划线，不然会报错；

　　

　　正确的应该是：create-react-app hello-react，能看到下面这种界面就成功了，然后切换到你的项目目录，最后使用npm start运行，浏览器就会自动打开看到react的图标就ok了

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

          

 

3. 目录结构

　　实际项目中一般不会在cmd中运行项目吧，我们可以使用vscode

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

 

　　大概瞄两眼目录结构，也没什么东西，就愉快的跳过了(￣▽￣)ノ

 

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

src/index.js：

 

　　其实我们可以将脚手架生成的public/index.html删除掉，自己生成一个index.html标签，只需要添加一个标签<div id="root"></div>  就行了

public/index.html

 

4.插件安装

　　我们瞄一下刚刚生成的App.js文件，emmm...居然是一个函数组件，我们肯定想用更高端一点的类组件呀！我们直接去手写么？肯定不会呀，都是一些模板性的东西，不过刚入门可以手写几遍找找感觉(҂ ˘ _ ˘ )

src/App.js

 

　　安装下面的这个插件：

 

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

　　注意：可能刚安装插件的时候没有提示，那么重启vscode，还是没有提示，那你file->preference->online service settings->Extensions->TypeScript，勾上，再重启一下；如果还是没有提示，就将vscode中和eslint相关的插件（上图展示所有安装过的插件）给禁用掉，再重启！最后还是没有的话，重装一个vscode吧！(T＿T)/~~(-_-メ)

   

 

　　注意一小点，因为React支持jsx，而jsx一般是组件，而js是其他的文件，最好后缀名区分一下，就能一眼看出来组件和普通的js文件；

　　以jsx结尾的文件，在导入的时候也可以忽略后缀名

 

 

 

　　最终展示结果：

 

 5.结束

　　一顿操作猛如虎，你看代码hello world！

　　这个脚手架封装了很多东西，配置文件很少，因为还有将webpack相关的配置文件都给隐藏起来了，使得我们只需要专注于页面功能的开发就行了！就我个人感觉，比vue-cli那个脚手架清晰多了；

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

• 还没有人评论，欢迎说说您的想法！