|
|
@@ -0,0 +1,73 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="./babel.min.js"></script>
|
|
|
+ <script src="./react.development.js"></script>
|
|
|
+ <script src="./react-dom.development.js"></script>
|
|
|
+ <style>
|
|
|
+ .box {
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ margin-left: 30px;
|
|
|
+ background: #00f;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .reds {
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+ .yellows {
|
|
|
+ color: #ff0;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!--
|
|
|
+ 样式绑定：
|
|
|
+ 1.class => className:在样式表中定义样式
|
|
|
+ 2.style：在jsx语法中直接定义样式
|
|
|
+ className绑定：
|
|
|
+ className = "类名"
|
|
|
+ className = {"类名1 类名2...."}
|
|
|
+ -->
|
|
|
+ <div id="root"></div>
|
|
|
+ <script type="text/babel">
|
|
|
+ const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
|
+ // let element = <div className="box">你好，我有一个帽衫</div>
|
|
|
+ let element = <div className={'box text'}>你好，我有一个帽衫</div>
|
|
|
+ // jsx中样式写法 只能是Object 不能是String
|
|
|
+ // 多单词组合样式改为驼峰命名法
|
|
|
+ let main = {
|
|
|
+ width: "500px",
|
|
|
+ height: "500px",
|
|
|
+ border: "1px solid #000",
|
|
|
+ margin: "100px auto",
|
|
|
+ display:"flex",
|
|
|
+ justifyContent: "space-between",
|
|
|
+ }
|
|
|
+ let left = {
|
|
|
+ flex: "6.5",
|
|
|
+ height: "100%",
|
|
|
+ backgroundColor: "#f00"
|
|
|
+ }
|
|
|
+ let right = {
|
|
|
+ flex: "2.5",
|
|
|
+ height: "100%",
|
|
|
+ backgroundColor: "#ff0"
|
|
|
+ }
|
|
|
+ element = (
|
|
|
+ <div style={main}>
|
|
|
+ <div style={left}></div>
|
|
|
+ <div style={right}></div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ element = <div className={5 < 2?'reds':'yellows'}>你好</div>
|
|
|
+ root.render(element)
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
e