直接上代码：

<!DOCTYPE html>

<html lang="en">

　<head>
　　<meta charset="UTF-8">
　　<title>标题</title>

　　<script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script>

　　<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>

　　<script src="https://cdn.bootcss.com/react-router-dom/4.2.2/react-router-dom.min.js"></script>
　　<!--注释,这个垫片有版本兼容问题，如果使用太新的版本会造成错误，建议按照当前配置版本来测试和使用-->

　　<script src="https://cdn.bootcss.com/babel-core/5.8.24/browser.min.js"></script>
</head>

<body>

<div id="root"></div>
<script type="text/babel">
    class Login extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                account:'',
                password:''
            };
            this.submit = this.submit.bind(this);
            this.fieldChange = this.fieldChange.bind(this);
        }

        fieldChange(ev){
            if(ev.target.name=='account'){
                this.setState({account:ev.target.value});
            }else if(ev.target.name=='password'){
                this.setState({password:ev.target.value});
            }
        }

        submit(ev){
            ev.preventDefault();
            console.log(this.state);
            alert('你执行了提交操作');
        }

        render(){
            return (
                    <div>
                    <h1>Login</h1>
                        <form action="./login" method="POST">
                            <input name="account" type="text" placeholder="账号" onChange={this.fieldChange}/>
                            <input name="password" type="password" placeholder="密码" onChange={this.fieldChange}/>
                            <input type="submit" placeholder="登陆" onClick={this.submit}/>
                        </form>

                    </div>

                    );
        }
    }

    class NotFound extends React.Component{
        constructor(props){
            super(props);
        }

        render(){
            return (
                    <h1>404</h1>
                    );
        }
    }

    class App extends React.Component{
        constructor(props){
            super(props);
        }

        render(){
            return (<div>
                    <ReactRouterDOM.Link to="/">App</ReactRouterDOM.Link><br/>
                    <ReactRouterDOM.Link to="/login">Login</ReactRouterDOM.Link>
                    <h1>App</h1>
                    </div>);
        }
    }

    ReactDOM.render(
            <div>
            <ReactRouterDOM.BrowserRouter basename='bms-0f797'>
                <ReactRouterDOM.Switch>
                    <ReactRouterDOM.Route exact path="/" component={App}/>
                    <ReactRouterDOM.Route exact strict path="/login" component={Login}/>
                    <ReactRouterDOM.Route path="*" component={NotFound}/>
                </ReactRouterDOM.Switch>
            </ReactRouterDOM.BrowserRouter>
            </div>,
    document.getElementById('root'));
</script>
</body>
</html>

注意：所有组件都是帕斯卡格式的，如果扩展中发现不对，请浏览一下源代码，搜索关键字，获得全局变量。例如：ReactRouterDOM，。。。

浏览器中直接是使用react系列包开发，非打包方式。的更多相关文章

  1. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. react中直接调用子组件的方法（非props方式）

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  3. 使用 React和webpack开发和打包发布

    建议在 React 中使用 CommonJS 模块系统,比如 browserify 或 webpack,本次使用 webpack. 第一步.安装全局包 $ npm install babel -g $ ...

  4. [UML]UML系列——包图Package

    系列文章 [UML]UML系列——用例图Use Case       [UML]UML系列——用例图中的各种关系(include.extend)       [UML]UML系列——类图Class   ...

  5. React系列-ES6

    ES6新特性概览 React系列代码(非本人) 5 Projects to Help You Learn React 本人对javascript并不擅长,只是在工作中会时常用到,而且以jQuery居多 ...

  6. myeclipse中的HTML页面在浏览器中显示为乱码

    myeclipse中的HTML页面在浏览器中显示为乱码 在通过myeclipse开发项目的过程中,如果用HTML页面书写前端,可能出现中文乱码现象,需要怎么解决呢?下面是我从网上搜的方法: 解决办法: ...

  7. 怎么在Chrome和Firefox浏览器中清除HSTS设置？

    HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互.这能够帮助防止协议降级攻击和cookie劫持. HST ...

  8. Storm 系列（六）—— Storm 项目三种打包方式对比分析

    一.简介 在将 Storm Topology 提交到服务器集群运行时,需要先将项目进行打包.本文主要对比分析各种打包方式,并将打包过程中需要注意的事项进行说明.主要打包方式有以下三种: 第一种:不加任 ...

  9. pbfunc外部函数扩展应用-直接在Datawindow中生成QR二维码，非图片方式

    利用pbfunc外部函数在Datawindow中直接生成QR二维码,非图片方式.需要注意以下面几点: Datawindow的DataObject的单位必须为像素(Pixels). Datawindow ...

随机推荐

  1. [翻译]编写高性能 .NET 代码 第一章：性能测试与工具 -- 平均值 vs 百分比

    <<返回目录 平均值 vs 百分比 在考虑要性能测试的目标值时,我们需要考虑用什么统计口径.大多数人都会首选平均值,但在大多数情况下,这个正确的,但你也应该适当的考虑百分数.但你有可用性的 ...

  2. Mysql基准测试详细解说（根据慕课网：《打造扛得住Mysql数据库架构》视频课程实时笔录）

    什么是基准测试 基准测试是一种测量和评估软件性能指标的活动用于建立某个时刻的性能基准,以便当系统发生软硬件变化时重新进行基准测试以及评估变化对性能的影响. 我们可以这样认为:基准测试是针对系统设置的一 ...

  3. ZOJ - 2477 dfs [kuangbin带你飞]专题二

    注意输入的处理,旋转操作打表.递增枚举可能步数,作为限制方便找到最短路. AC代码:90ms #include<cstdio> #include<cstring> char m ...

  4. 傅里叶变换 - Fourier Transform

    傅里叶级数 傅里叶在他的专著<热的解析理论>中提出,任何一个周期函数都可以表示为若干个正弦函数的和,即: \[f(t)=a_0+\sum_{n=1}^{\infty}(a_ncos(n\o ...

  5. yaf插件类的使用

    yaf插件类的使用大小写敏感的. "插件名Plugin"为插件类的名字,这样会自动标志着这是一个插件. application.directory string 应用程序的目录,包 ...

  6. windows与虚拟机linux能ping通设置

    作为以后参考所用. 首先,介绍如何在VMWare中设置linux的网络.一般网络选项有Bridged,NAT,host-only几种,本次以host-only作详细说明,如下图: 在选择host-on ...

  7. 20 个 CSS 高级技巧汇总

    原文:https://segmentfault.com/a/1190000003936841 使用技巧会让人变的越来越懒,没错,我就是想让你变懒.下面是我收集的CSS高级技巧,希望你懒出境界. 1. ...

  8. yii学习笔记--使用gii快速创建控制器和模型

    配置gii 'gii'=>array( 'class'=>'system.gii.GiiModule', 'password'=>'123456',//使用gii的密码 // If ...

  9. Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "</url-pattern>" 终止

    1.错误描述 严重: Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "< ...

  10. “var arr = []; ”和 “var arr = {};” 的区别

    1.面试题    var arr = [];    var arr = {};    比较上述代码有什么区别? 2.解析    var arr = [];是一个数组对象    var arr = {} ...