React是什么?
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 特点
-
1.声明式设计 −React采用声明范式,可以轻松描述应用。
-
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
-
3.灵活 −React可以与已知的库或框架很好地配合。
-
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
-
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
-
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
使用react需要依赖的基本库:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
react.development.js:React的核心库,用于创建UI
react-dom.development.js:提供与DOM相关的功能。用于将创建的UI渲染到浏览器中。
react.js,这是react的核心文件;
react-dom.js,它提供了一些与dom有关的方法;
babel.js,它会将react特有的jsx语法转化为普通的JavaScript语法。
为什么要用React?
1、使用组件化开发方式,符合现代Web开发的趋势
2 、技术成熟,社区完善,配件齐全,适用于大型Web项目(生态系统健全)
3、 由Facebook专门的团队维护,技术支持可靠
4、 ReactNative - Learn once, write anywhere: Build mobile apps with React
5 、使用方式简单,性能非常高,支持服务端渲染
6、 React非常火,从技术角度,可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目
实列:
依赖库:
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
HTML:
<div id="example"></div>
reactJS:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>