虽然之前学过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成功分离出来,效果和之前一样。