第一次尝试react

 

第一次接触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() 来实现。