初识React
（1）React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架，它仅涵盖V-view视图层。
（2）JSX是javascript的扩展，因为Javascript代码与JSX代码并不兼容，凡是使用JSX的地方我们都需要加上 type="text/babel"。
（3）在使用React之前，我们必须要先引入三个库。
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
（4）JSX比较特殊的是允许Javascript和HTML的混写，看一个简单的例子：
HTML：
<div id="model"></div>
JSX：
<script type="text/babel>
ReactDOM.render(
<h1>hellow word!</h1>
document.getElementById("demel")
);
</script>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
（5）在JSX中为html标签添加类，要使用JSX定义类的关键字className，例子如下：
CSS:：
<style type="text/css">
.jsxclass{
background-color:red;
}
</style>
HTML：
<div id="model"></div>
JSX：
<script type="text/babel>
ReactDOM.render(
<h1 className="jsxclass">hellow word!</h1>
document.getElementById("demel")
);
</script>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在JSX中定义行间样式要用驼峰命名法，例子如下：
<h1 stype={{ "backgroundColor":"yellow" , "color":"red" }}>hello word!</h1>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
React小例子：
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<title></title>
</head>
<body>
<div id="demo"></div>
</body>
<script type="text/babel">
let instyle = {
"backgroundColor":"yellow",
"color":"red",
"fontSize":"25px"
};
let btnvalue = "sum_bit";
let btntype = "submit";
ReactDOM.render(
<div>
<h1 style={instyle}> Hello,Word.Hello,React! </h1>
<input type={btntype} value={btnvalue} />
</div>,
document.getElementById("demo")
);
</script>
</html>
浙公网安备 33010602011771号