标签：不用 ejs type 构建 dom react asc 组合 方式
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
（1）声明式设计-------采用声明规范，用ReactDOM.render()来声明；
（2）高效----采用虚拟DOM的模拟，最大限度的减少和真是DOM节点的交互
（3）灵活---使用库和框架
（4）JSX-----React特有的特点，是JavaScript语法的扩展
（5）组件化 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
（6）单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
react的环境搭建，正常情况下是要搭建一个脚手架出来，但是这里我不想这么快就把脚手架的搭建步骤给出来，因为这不利于我们入门React，脚手架里包括了nodejs的知识，webpack打包的知识，并且封装了一些东西之后对于初学者来说不容易理解，容易成为劝退教程，所以这里我们会先搭建一个无需脚手架的简单示例，最终我们会在接下来的几个章节后平滑过渡到脚手架，虽然不用一开始就搭建脚手架，但我们还是要下载react的库包，可以通过bootcdn下载或者引入相应的react库。
如下例子，我们看到，如果要使用React库，首先就需要引入react,react-dom和babel等模块，其中react.js是react核心库，react-dom用于支持react操作DOM，babel则是用来将jsx转成js，同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器，可能就有人疑问了，jsx是什么，jsx实际上就是js+xml的意思，是JavaScript的语法扩展；是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。虽然你可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，可以定义包含属性的树状结构的语法，类似HTML标签那样的使用，而且更便于代码的阅读。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="root"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello React</h1> /* 此处一定不要写引号，因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById(‘root‘))
</script>
</body>
</html>
标签：不用 ejs type 构建 dom react asc 组合 方式
原文地址：https://www.cnblogs.com/xfly-lin/p/14446001.html
