上一篇:《react app流程原理》
React 是一个用于构建用户界面的 JAVASCRIPT 库
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/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>
注意: 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。
---------------------------------------------
import React, { Component } from 'react';
import logo from './logo.svg';import './App.css';
class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>欢迎来到菜鸟教程</h2> </div> <p className="App-intro"> 你可以在 <code>src/App.js</code> 文件中修改。 </p> </div>
);
}
} export default App;