react入门
react是什么
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI
起源
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站
描述
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单
这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native
项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。
如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机
react的特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
单向数据流
在React中，数据的流向是单向的——从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个prop改变饿了，React会递归的向下便利整棵组件树，重新渲染所有使用这个属性的组件。
声明式设计
// 声明式
const element1 = React.createElement(
'div',
{className:"greeting"},
'哈哈'
)
// 过程式
element2 = document.createElement 'div'
element2.className = 'greeting'
element2.innerHTML = '哈哈'
// 类似于这样一种简化的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
ReactDOM.render(
element1,
document.getElementById('root')
);
虚拟dom
虚拟dom 用于性能的提升
组件化
组件化，实现代码的重用
如何使用react
hello world示例
js核心库
react的使用离不开三个核心的库
// 新版本 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--react的与dom相关的一些功能--> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!--将浏览器不支持的jsx语法转化为js语法--> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> // 久版本 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
hello world示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!--react的核心库-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!--
<script> 标签的 type 属性为 text/babel 。
这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。
凡是使用 JSX 的地方，都要加上 type="text/babel" 。
-->
<script type="text/babel">
// ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root') );
</script>
</body>
</html>
开发环境
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
生产环境
相比开发环境进行了压缩和优化
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
在接下来一篇文章中将讲解React jsx语法的用法及相关事件。
