本文已参与「新人创作礼」活动,一起开启掘金创作之路。
在此声明,前端三大框架,各有各的优势,框架没有好坏,只有不同的适用场景(虽然本人更偏爱angular啦~~~嘿嘿嘿)
我们在开始一个新的项目的时候,如果有能力选择框架,那我们应该从产品的功能,场景以及未来的迭代来考虑技术选型,后续将推出《vue技巧合集》以及《angular再爱我一次》系列,欢迎大家持续关注~~
话不多说,go React!
每次新接触一门技术的时候,我更喜欢从产生的背景入手,了解更多感性的知识
React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源,经过9年多的迭代react已经更新到了18.2.0版本(太快了呀,大佬们没事能不能摸会鱼阿,17.2.0更新完了,万万没想直接到18.0.0了,星星你个大星星阿)。
React的特点: 1.声明式设计:React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React能高效更新并渲染合适的组件。
2.组件化: 构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
3.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
4.灵活:无论你现在使用什么技术栈,在无需重写现有代码的前提下,通过引入React来开发新功能(划重点)。
我们在了解这些特性让我们来搭建我们的第一个react页面
首先我们要准备的有
这三文件,没有的可以私聊找我要
解释一下都是干啥的:
第一个:react.development.js react核心库
第二个: react-dom.development.js 用于支持react操作dom的
第三个:babel.min.js 用于编译jsx语法的
在准备工作做好了之后
我们还需要什么呢???当然是html文件啦
准备好这些之后, 需要在html写一个容器在挂载react
让我们来创建一个虚拟dom
然后挂载到页面上
完整代码