React入门案例-HelloReact案例

需求 为了演练React，我们可以提出一个小的需求： 在界面显示一个文本：Hello World 点击下方的一个按钮，点击后文本改变为Hello React 但是，我们使用React实现之前，先使用原生代码来实现，这样更加方便大家对比React和原生： 当然，你也可以使用jQuery和Vue来实现，对它们分别进行对比学习 一.React开发依赖 开发React必须依赖三个库： react：包含react所必须的核心代码 react-dom：react渲染在不同平台所需要的核心代码 babel：将jsx转换成React代码的工具 第一次接触React会被它繁琐的依赖搞蒙，对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个库。 其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情： 在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里。 为什么要进行拆分呢？原因就是react-native。 react包中包含了react和react-native所共同拥有的核心代码。 react-dom针对web和native所完成的事情不同： web端：react-dom会讲jsx最终渲染成真实的DOM，显示在浏览器中 native端：react-dom会讲jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIB