直接上代码：

<!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. 知识点干货--讲一讲final、finally、finalize的区别

    "横看成岭侧成峰,远近高低各不同.不识庐山真面目,只缘身在此山中." 这首诗来自于宋朝苏轼<题西林壁>,它的意思是,庐山从正面看,它是一道道连绵起伏的山岭:从侧面看,它 ...

  2. [译]前端JS面试题汇总 Part 1（事件委托/this关键字/原型链/AMD与CommonJS/自执行函数）

    原文:https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questio ...

  3. Log4j2配置文件详解

    目录[-] 1 系列目录 2 默认配置 3 第一个配置例子 4 复杂一点的配置 4.1 Appender之Syslog配置 4.2 Syslog及Syslog-ng相关配置(Fedora) 5 Log ...

  4. python调用百度语音（语音识别-斗地主语音记牌器）

    一.概述 本篇简要介绍百度语音语音识别的基本使用(其实是斗地主时想弄个记牌器又没money,抓包什么的又不会,只好搞语音识别的了) 二.创建应用 打开百度语音官网,产品与使用->语音识别-> ...

  5. 字典树trie

    字典树经常用于单词搜索,现在网络引擎中也应用了trie树: public class Trie{ private int SIZE = 26; private TrieNode root; Trie( ...

  6. java字符串以及字符类型基础

    介绍一下java字符集和字符的编码方式, 首先要区分一下字符集和字符编码.所谓的字符集 类似于unicode,GB2312,GBK,ASCII等等.因为一开始只有26个英文字母需要 编一下号.所有用下 ...

  7. service不死之身

    为了应用常驻后台,避免被第三方杀掉的方法 1)Service设置成START-STICKY kill 后会被重启(等待5秒左右),重传Intent,保持与重启前一样 2)通过startForegrou ...

  8. 修改android 开机画面

    对于使用安卓手机的人来说,能够自由定制手机的各种界面是每个用户之所以喜欢安卓系统的最根本的缘由,比如手机的开机界面中的bootanimation.zip文件.本文就如何修改开机界面,做一个简单的流程介 ...

  9. FusionCharts封装-Data

    DataSet.java: /** * @Title:DataSet.java * @Package:com.fusionchart.model * @Description:FusionCharts ...

  10. dojo实现省份地市级联报错（二）