1.1.1 React 是什么
狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架,广义来讲 React 不仅仅是 js 框架本身,更是一套完整的前端开发生态体系,这套体系包括:
React.js
ReactRenders: ReactDOM / ReactServer / ReactCanvas
Flux 模式及其实现(Redux , Fluxxor)
React 开源组件
React Native
GraphQl + Relay
任何技术都是一样,技术本身的核心不会太复杂,但是围绕这个主体会有很多依附的知识点形成了体系化的技术栈。 所以我们谈学习 React 并不仅仅是学习 React 本身,而是学习这套开发体系,整个技术栈, 我们也是围绕这个技术栈系统的讲解。
1.1.2 React 中的基本概念
我们先来认识一下 React 中的基本概念
React.js
React.js 是 React 的核心库,在应用中必须先加载核心库。
ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器,React 将核心库和渲染器分离开了,为了在 web 页面中显示开发的组件,需要调用 ReactDOM.render 方法, 第一个参数是 React 组件,第二个参数为 HTMLElement。
JSX
JSX 是 React 自定义的语法,最终 JSX 会转化为 JS 运行于页面当中。
组件
组件是 React 中的核心概念,页面当中的所有元素都是通过 React 组件来表达, 我们将要写的 React 代码绝大部分都是在做 React 组件的开发。
VIRTUAL DOM
React 抽象出来的虚拟 DOM 树,虚拟树是 React 高性能的关键。
单向数据流:one-way reactive data flow
React 应用的核心设计模式,数据流向自顶向下
1.1.3 Hello React World
我也是性子急的人,按照技术界的惯例,在学习一个技术前,首先得说一句: “Hello World!”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://facebook.github.io/react/js/react.js"></script>
<script src="http://facebook.github.io/react/js/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('example')
);
</script>
</body>
</html>
jsx 语法怎么和 HTML 写法一样?
答:是的,看上去一样, 但jsx 和 HTML 本质的不同是 jsx 直接在函数中写 xml 标签。在 1.2 节中,会详细介绍 jsx 以及和 HTML 做更多的对比。
看上去 React 除了 jsx 以外,并没有什么特殊的地方,不就是将模板字符串渲染到 DOM 中吗?你能告诉我 React 和其他框架有什么不同之处吗?
答:React的独到之处
相比其他前端框架,为什么 React 独树一帜,能够脱颖而出呢?
组件的组合模式
单向数据流的设计
高效的性能
分离的设计
Hello World 也并不能看出 React 的能力,你能先告诉我 React 能做些什么吗?
1)Web 端应用
Web 应用是 React 的出发点,我们可以通过 React 构建从简单的 TODOAPP 到大型的电商购物网站应用。 同时除了能够处理 HTML 以外, 在 Web 端, 我们同样可以通过 React 来实现数据可视化, 图表展现,甚至是游戏开发:
2)原生应用
除了 Web 端以外,我们可以使用同样的 jsx 语法构建 IOS 或者 Android 应用, 这要归功于 facebook 开源的 React Native。 基于 React Native , 我们将可以使用 jsx 来实现具有原生应用性能的 UI 运行于 IOS 和 android 中,同时我们也可以通过 NW.js 或者 Electron 来实现基于 React 的桌面应用。
3)服务端渲染
React 除了在 Web 和 Native 环境以外, 也可以通过 React 实现在服务器端渲染出 HTML。
本文暂时没有评论,来添加一个吧(●'◡'●)