要求: 熟悉主流的开发框架(React,Augular,Vue至少一个)。
React可以直接下载使用,https://reactjs.org/
也可以直接使用 BootCDN的React CDN库,地址如下:
<script src = "https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
React 实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
实例解析:
我们引入了三个库: react.min.js, react-dom.min.js和babel.min.js;
react.min.js -React的核心库。
react-dom.min.js -提供与DOM相关的功能。
babel.min.js -Babel可以将ES6代码转为 ES5代码,这样我们就能在目前不支持ES6浏览器上执行 React代码。Babel内嵌了对JSX的支持。通过将Babel和 babel-sublime包一同使用可以让源码
的语法渲染上升到一个全新的水平。
ReactDom.render(
<h1> Hello,world! </h1>,
document.getElementById('example')
);
以上代码将换一个h1标题,插入id = "example"节点中。
注意:
如果我们需要使用JSX,则<script>标签的type属性需要设置为text/babel.
React可以直接下载使用,https://reactjs.org/
也可以直接使用 BootCDN的React CDN库,地址如下:
<script src = "https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
React 实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
实例解析:
我们引入了三个库: react.min.js, react-dom.min.js和babel.min.js;
react.min.js -React的核心库。
react-dom.min.js -提供与DOM相关的功能。
babel.min.js -Babel可以将ES6代码转为 ES5代码,这样我们就能在目前不支持ES6浏览器上执行 React代码。Babel内嵌了对JSX的支持。通过将Babel和 babel-sublime包一同使用可以让源码
的语法渲染上升到一个全新的水平。
ReactDom.render(
<h1> Hello,world! </h1>,
document.getElementById('example')
);
以上代码将换一个h1标题,插入id = "example"节点中。
注意:
如果我们需要使用JSX,则<script>标签的type属性需要设置为text/babel.