新手如此入门React,我觉得你应该从下面几点开始入手学习,今天给大家分享的是第一期,后续还会不断的更新和实战的分享。
一,了解React
- 声明式(React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI,可以让你的代码更加可靠,且方便调试)
2.组件化(创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据并使得状态与 DOM 分离。
3.高效(React通过和DOM的模拟,最大限度的减少与DOM的交互)
4.JSX(javascript的拓展语言,建议在React开发中使用JSX)
5.灵活(React可以和已知的库或者是框架完美的配合)
6.单向响应的数据流(React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单的原因)
无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。
![5bce52335d3eade17192fe12a4096921.png](https://i-blog.csdnimg.cn/blog_migrate/e5e95f5f391a76591f5b9093c01d679d.jpeg)
二,第一个React实例
页面如下
Hello React!
说明:
html的页面引入三个库,
- react.min.js(React的核心库)
- react-dom.min.js(提供与DOM相关的功能)
- babel.min.js (ES6代码转换为ES5代码,还支持JSX)
三,React的元素操作
元素在React应用中最小的单位,主要作用就是为了描述屏幕上输出的内容。
const = element =
n你好,hello world
不过我们在引入React的时候都是如下操作,
定义一个跟节点,div的所有内容都将属于 example的 React DOM来管理,我们也把这个称为“根”DOM节点。
下一步就是将React的元素, const渲染到DOM节点中,方法如下:
const element =
Hello, world!
;ReactDOM.render( element,# 元素 document.getElementById('example') # 节点);
说明:采用的方法为:ReactDOM.render(),此方法的两个重要点就是 元素和节点。
这个时候我们就会产生一个问题,我们需要在同一个节点显示多个元素该怎么办?
其实在React的特性中,元素都是不可改变的,但是我们可以通过更新的方式来达到我们需要实现的目的,比如重新创建一个元素再渲染到同一个节点,这样元素的内容就更新了。
const element = (
Hello, world!
我是前端工程师小A.
); ReactDOM.render( element, document.getElementById('example') );}
![74d68468acfa4e64c4d2841e4d087acf.png](https://i-blog.csdnimg.cn/blog_migrate/162fb2f6655545ba9d8376d560b63603.jpeg)
空口无凭,我们可以通过一个实际例子来总结React的第一章学习
Hello React!