直接上代码：

<!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. EntityFramework Core 2.0自定义标量函数两种方式

    前言 上一节我们讲完原始查询如何防止SQL注入问题同时并提供了几种方式.本节我们继续来讲讲EF Core 2.0中的新特性自定义标量函数. 自定义标量函数两种方式 在EF Core 2.0中我们可以将 ...

  2. 初学node.js有感一

    Node.js感悟 一.前言 很久以前就对node.js十分的好奇和感兴趣,因为种种原因没能去深入的认识了解和学习掌握这门技术,最近正好要做一些项目,其中就用到了node.js中的一些东西,所以借着使 ...

  3. python3.6+django2.0 一小时学会开发一套学员管理系统demo

    1.在pycharm中新建project demo1 添加app01 点击create按钮完成新建 2.在demo项目目录下新建目录static,并在settings.py中追加代码: STATICF ...

  4. 使用CrashHandler来获取应用的crash信息

    源码地址https://github.com/king1039/android-art-res/tree/master/Chapter_13/CrashTest/src/com/ryg/crashte ...

  5. nyoj135 取石子（二） Nimm博弈

    思路:计算每堆石子的SG值,然后异或得到总的SG值,如果SG=0则输,否则赢. 每堆石子的SG值等于m%(n+1),可以自己推算一下. AC代码 #include <cstdio> #in ...

  6. Qt Creator 整合 python 解释器教程

    目录 1. 前言 2.前提条件 3.步骤 3.1 新建 python文件 3.2 编写 python 代码 3.3 配置 python 解释器 3.4 执行 python file 1. 前言 Pyt ...

  7. linux分析apache日志获取最多访问的前10个IP

    apache日志分析可以获得很多有用的信息,现在来试试最基本的,获取最多访问的前10个IP地址及访问次数. 既然是统计,那么awk是必不可少的,好用而高效. 命令如下: awk '{a[$1] += ...

  8. shell 脚本——判断条件

    在之前的shell语言学习笔记中已经写过shell的几种判断语句及循环语句,也简单的介绍了shell语言判断语句和判断条件.在此再做进一步学习. test命令的测试功能 test命令用于检测系统文件及 ...

  9. java并发编程笔记3-同步容器&并发容器&闭锁&栅栏&信号量

    一.同步容器: 1.Vector容器实现了List接口,Vector实际上就是一个数组,和ArrayList类似,但是Vector中的方法都是synchronized方法,即进行了同步措施.保证了线程 ...

  10. CSRF的本质及防御

    本质:产生的原因本质上是参数可知或可预测 防御: 1.加密参数:加密加盐,不可知,不可预测      忧虑,引入其他麻烦:一.数据分析困难                               ...