react 的项目经过编译后生成的是 JavaScript 代码, 并且是 es5 的代码, 兼容性很好, 现代浏览器都能支持, 除非是浏览器禁用了 JavaScript.
当直接在 html 文档中使用 react 时, 需要引入 babel 来进行代码转换, 浏览器才能正常支持 react.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- ajanuw
- </title>
- <script src='https://unpkg.com/react@latest/umd/react.development.js'
- crossorigin='anonymous'>
- </script>
- <script src='https://unpkg.com/react-dom@latest/umd/react-dom.development.js'
- crossorigin='anonymous'>
- </script>
- <script src="https://unpkg.com/react-router-dom@4.3.1/umd/react-router-dom.js">
- </script>
- <script src='https://unpkg.com/@material-ui/core/umd/material-ui.development.js'
- crossorigin='anonymous'>
- </script>
- <script src='https://unpkg.com/babel-standalone@latest/babel.min.js' crossorigin='anonymous'>
- </script>
- <script src="https://unpkg.com/mobx@latest/lib/mobx.umd.js">
- </script>
- <script src="https://unpkg.com/mobx-react@latest/index.js">
- </script>
- <link rel='stylesheet' href='https://fonts.googleapis.com/CSS?family=Roboto:300,400,500'
- />
- <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
- </head>
- <body>
- <div id="root">
- </div>
- <script type="text/babel">
- const l = console.log const {
- Component,
- Fragment
- } = React const {
- decorate,
- observable
- } = mobx const {
- observer
- } = mobxReact class Store {
- name = 'mobx'
- }
- decorate(Store, {
- name: observable,
- }) const store = new Store() class App extends Component {
- state = {
- name: 'ajanuw'
- }
- render() {
- return ( < div > {
- store.name
- } < /div>
- )
- }
- componentDidMount(){
- setTimeout(() => {
- store.name = this.state.name
- }, 2000);
- }
- }
- App = observer(App)
- const About = () => <div>about</div > const {
- HashRouter,
- BrowserRouter,
- Route,
- Switch,
- withRouter,
- Redirect
- } = ReactRouterDOM ReactDOM.render( < HashRouter > <Switch > <Redirect from = '/index.html'to = '/' / ><Redirect from = '/home'to = '/' / ><Route exact struct component = {
- App
- }
- path = '/' / ><Route exact struct component = {
- About
- }
- path = '/about' / ></Switch>
- </HashRouter > , document.querySelector('#root'));
- </script>
- </body>
- </HTML>
本文来自 React 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/15934.html