第一次接触react,在工作之余想给自己充充电。拓宽一下自己的技术面。然后各种上网搜,官网查。网上很多教程,在这里我就记录一下我的学习。
react,熟悉的人都知道,我就不过多陈述了,国内外很多大厂都用它,刚开始用的时候,确实是不明觉厉。
首先,与常规的前端写法来说,它几乎不用你去写html页面,一切都可以在JavaScript中完成代码编写。这里我们就要认识到JSX,react就是使用 JSX 来替代常规的 JavaScript, 是一个看起来很像 XML 的JavaScript的语法扩展。使用JSX的优点:
- JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的,在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
但是请注意:
由于 JSX 就是 JavaScript,一些标识符像 class
和 for
不建议作为 XML 属性名。作为替代,React DOM 使用 className
和 htmlFor
来做对应的属性 。
一个简单的例子
<div id="root"></div> <script type="text/babel"> const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root')); </script>
这就是JSX,它能够实现我们在JavaScript中实现界面,这里我要说一下,react并不是不用进行DOM操作,而是他是在操作虚拟DOM,因为虚拟DOM最终还是会映射到真实的DOM上, 就是用ReactDOM.render() 来实现。