初始react

2019-12-27  本文已影响0人  孤独的豺狼

第一次玩简书,随便写写,见谅

1.React 是什么?

React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。

2.为什么要用React?

使用组件化开发方式,符合现代Web开发的趋势
技术成熟,社区完善,配件齐全,适用于大型Web项目(生态系统健全)
由Facebook专门的团队维护,技术支持可靠
ReactNative - Learn once, write anywhere: Build mobile apps with React
使用方式简单,性能非常高,支持服务端渲染
React非常火,从技术角度,可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目

3.React中的核心概念

虚拟DOM(Virtual DOM)
Diff算法(虚拟DOM的加速器,提升React性能的法宝)

3.React脚手架搭建项目

1.安装node.js和npm
2.通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。


20181026095257103.png

3.安装好的npm的源默认是国外的源,会因为网络原因导致执行npm操作有延时,我们可以切换npm的源为淘宝的源镜像。
执行 npm config set registry https://registry.npm.taobao.org。切换完成后,可通过 npm config get registry 查看。

20181026100411666.png

4.安装react脚手架,cmd执行 npm i -g create-react-app (-g为全局下载)


20181026100651469.png

5.安装好 node 和 react脚手架后就可以创建项目啦,cmd切换至指定路径,执行 create-react-app rproject (rproject为自定义项目名),最后出现 happy hacking说明创建成功。


20181026101058397.png

6.如果出现以下报错,是因为网络原因,导致 npm读取代理服务器失败,解决办法为1查看网络状况,2将npm源路径切换到淘宝镜像。参照第三步。


20181026101417913.png

7.项目创建成功后,我们可在对应的路径下看到项目文件。打开文件可以看到文件结构。


20181026101507285.png

8.启动项目。在项目所在路径下cmd执行 npm start。


20181026101635759.png

9.启动成功后会自动打开浏览器,并出现react图标,说明项目启动成功。


20181026101849401.png

10.安排明白了,快点练习一下吧(孤独的豺狼)

上一篇下一篇

猜你喜欢

热点阅读