第二节 编写React代码
我们尝试一个简单的模板，在src中创建一个app.js
let template = (
<div>
Hello React！！
</div>
)
ReactDOM.render(template,document.getElementById('app'));
此时public文件中创建一个index.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>React 基础</title>
<link rel="stylesheet" href="./app.css">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app">
//react 模板
</div>
<script src="./app.js"></script>
</body>
</html>
此时使用 npm run babel 进行编译后public 文件中生成了app.js文件 同时打开index.html 完成。
我们打开转义后的代码转成了JSX语法 代码如下：
var template = React.createElement("div", null, "Hello React !!");
ReactDOM.render(template, document.getElementById('app'));
网友评论