React
React是Facebook开发的一款JS库,其更注重于视图层。
React不是一个MVC框架,它是一个构造可组合式用户界面的库。它鼓励创建可重用的UI组件显示会随着时间而改变的数据。
如果你是一个新手,你可以选择直接引入方法
安装步骤
1、下载需要引入的文件
第一步:创建一个文件夹(名字必须是英文),打开cmd 输入全局命令 npm install bower -g
第二步:输入 bower install react 如果你需要指定的版本 可输入 bower install react #15.6.1
第三步:输入 bower install babel
2、引入文件
创建一个html模板如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/babel/browser.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
</script>
</body>
</html>
上面代码有两个地方需要注意。
首先,最后一个 <script>
标签的 type
属性为 text/babel
。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel"
。
其次,上面代码一共用了三个库: react.js
、react-dom.js
和 Browser.js
,它们必须按顺序依次引入。其中,react.js
是 React 的核心库,react-dom.js
是提供与 DOM 相关的功能,Browser.js
的作用是将 JSX 语法转为 JavaScript 语法。
ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render(
<div>
<h1>i love you !</h1>
</div>,
document.getElementById("app")
)
JSX 语法(以下代码包含jsx语法)
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,它允许 HTML 与 JavaScript 的混写。
JSX 的基本语法规则:遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头),就用 JavaScript 规则解析
可用let声明代码如下
let tag = <div><div>hollo</div><span>word</span></div>
ReactDOM.render(
<div>
<h2>{tag}</h2>
</div>,
document.getElementById("app")
)
多选框单选框默认选中且可以更改 input框书写默认值可更改
ReactDOM.render(
<div>
<input type='text' defaultValue='pug'/>
<input type='radio' name='s' defaultChecked />
<input type='radio' name='s' defaultChecked />
<input type='checkbox' defaultChecked />
</div>,
document.getElementById("app")
)
以上代码需注意 在默认选中或更改时需添加default 且后面的属性第一个字母要大写 其遵循小驼峰命名规则
如果想要了解驼峰命名规则,点击我