直接上代码：

<!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. aforge 学习-基本图像处理要用的类库

    1.图像灰度化:Grayscale.CommonAlgorithms.BT709(3种) FiltersSequence =new  FiltersSequence(数组处理函数): 2.二值化(阈值 ...

  2. 算法提高 矩阵乘法 区间DP

    这是神题,n <= 1000,如果是极限数据普通的n^3区间DP怎么可能过?可偏偏就过了. 刘汝佳大哥的训练指南上面说的存在nlgn的算法解决矩阵链乘问题,可是百度都找不到.... AC代码 # ...

  3. Enum枚举写的一个简单状态机

    今天下雨,心情有点压抑,所以用枚举写个状态机排解一下心情,顺便记录一下枚举使用方法. package statemachine; import java.util.ArrayList; import ...

  4. 我的Java设计模式-原型模式

    "不好意思,我是卧底!哇哈哈哈~"额......自从写了上一篇的观察者模式,就一直沉浸在这个角色当中,无法自拨.昨晚在看<使徒行者2>,有一集说到啊炮仗哥印钞票,我去, ...

  5. eclipse快捷键及设置

    1.Eclipse设置新建菜单初始项 windows-->Perspective-->Customize Perspective--> 2.Eclipse快捷键 1. ctrl+sh ...

  6. DNS 访问 Service - 每天5分钟玩转 Docker 容器技术（138）

    在 Cluster 中,除了可以通过 Cluster IP 访问 Service,Kubernetes 还提供了更为方便的 DNS 访问. kubeadm 部署时会默认安装 kube-dns 组件. ...

  7. Python模拟登录成功与失败处理方式(不涉及前端)

    任务说明: (1) 用户输入用户名,如不存在此用户不能登录: (2) 用户在输入密码时,如果连续输入三次错误,则该用户被锁定一段时间; (3) 用户被锁定一段时间后,可再次进行尝试登录: 程序使用库: ...

  8. java注解之二

    从JDK5开始,Java增加了Annotation(注解),Annotation是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用Annotation,开发人员可 ...

  9. 决策树之ID3、C4.5、C5.0等五大算法

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- C5.0决策树之ID3.C4.5.C5.0算法 ...

  10. 运行项目Tomcat报错

    1.具体报错如下: Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If the serve ...