虽然之前学过react，但是又一次说要拿react写东西的时候着实是一脸懵逼了，所以就又从头开始看react，就从刚开始的显示hello world开始。
写最基本的react_demo
首先要写react，当然是从在浏览器运行开始，那么我们就来看一下刚开始的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="context"></div>
<script type="text/babel">
const App = React.createClass({
render:function () {
return <h1>Hello, world!</h1>
}
});
ReactDOM.render(
<App/>,
document.getElementById('context')
);
</script>
</body>
</html>
- 以上代码中主要使用了三个库：react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法。
- 最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
将js文件从html中分离
新建一个文件App.js，然后将刚才<script>里面包含的代码写到App.js中，html文件中做以下修改：
<script type="text/babel" src="App.js"></script>
则JavaScript与html成功分离出来，效果和之前一样。
网友评论