React介绍
React 起源于 Facebook 的内部项目,React 用于构建用户界面的JavaScript库
React 文档
英文文档: https://reactjs.org
中文文档: https://doc.react-china.org/
gitHub地址:https://github.com/facebook/react
React 特点
声明式:React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
组件化:创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
一次学习,随处编写:无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
React 也可以用作开发原生应用的框架[React Native]
(https://facebook.github.io/react-native/ )
React 优势
- 使用
组件化开发方式,符合现代Web开发的趋势 - 技术成熟,社区完善,配件齐全,适用于大型Web项目(生态系统健全)
- 由Facebook专门的团队维护,技术支持可靠
- ReactNative - Learn once, write anywhere: Build mobile apps with React
- 使用方式简单,性能非常高,支持服务端渲染 SSR
- React非常火,从技术角度,可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目
React入门实例
<div id="app"></div>
<!-- 引包 -->
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
// 2. 创建了一个react对象
// <div id="box" title="哈哈">我是内容</div>
// 表示创建一个react对象
// 参数1:创建什么类型的对象,标签的名字
// 参数2:创建的元素的属性有哪些 对象
// 参数3:创建的react对象的内容(子元素)
// 返回值: 就是一个react对象
let element = React.createElement('div', {id: 'box', title: '我是react'}, '我是内容')
//3. 把react对象渲染到页面
// 参数1: react对象
// 参数2: 渲染到页面中的DOM容器
ReactDOM.render(element, document.getElementById('app'))
</script>