React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

一个使用 javascript 构建应用的框架

详细的介绍访问官网查看


约定优于配置

约定优于配置,是一种软件设计范式,称作按约定编程。

react.js 是单向数据绑定,它里面的设计规范吸收了《约定优于配置》这一特性

所有代码需要使用 webpack/babel 编译才可使用

查看 webpack / babel 环境配置,或则直接查看 react.js 完整的编译步骤


Basis

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React.js Basis</title>
	<!--[if lt IE 9]>
		<script src="es5-shim/es5-shim.min.js"></script>
		<script src="es5-shim/es5-sham.min.js"></script>
		<script src="/json2/json2.min.js"></script>
	<![endif]-->
	<!-- 引入编译后的目录地址 -->
	<script src="build/app.build.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
</html>

react-dom render

react-dom 模块下的 render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点
//引入 react-dom 模块
import { render } from 'react-dom';

function onload(){
	//输出到指定 dom 元素节点中
	let message = "hello world";
	render(
	  	<div> { message } </div>,
	  	document.querySelector("#app")
	);
}

if(window){
	window.onload = onload;
}else{
	//利用延迟队列的特性,模拟 onload
	setTimeout(onload.bind(window),0);
}

JSX 语法糖

jsx 就是可以让 html 与 javascript 混合写,不用向以前那样去处理字符串双引号与单引号及加号, 减轻了我们对字符串模版的处理,把更多精力放在业务逻辑上。
在 html 中如果需要使用变量,与其它模版类似使用 { } 花括号处理