直接上代码：

<!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. java 中对对象的调用

    java程序设计语言对对象采用的不是引用的调用,实际上对象引用进行的是值得传递.(from:核心卷1  page:123)

  2. java 23种设计模式 深入理解

    以下是学习过程中查询的资料,别人总结的资料,比较容易理解(站在各位巨人的肩膀上,望博主勿究) 创建型抽象工厂模式 http://www.cnblogs.com/java-my-life/archive ...

  3. 进入Docker容器

    在进入Docker容器之前,首先要运行对应的Docker容器,先使用命令docker ps查看正在运行的容器. docker inspect --format='{{.NetworkSettings. ...

  4. Flask從入門到入土(二)——請求响应與Flask扩展

    ———————————————————————————————————————————————————————————— 一.程序和請求上下文 Flask從客戶端收到請求時,要讓視圖函數能訪問一些對象 ...

  5. Golang http 服务器

    package main import ( "net/http" "fmt" ) func main() { app := http.NewServeMux() ...

  6. 试着简单易懂记录synchronized this object Class的区别,模拟ConcurrentHashMap

    修饰静态方法默认获取当前class的锁,同步方法没有释放的锁,不影响class其他非同步方法的调用,也不影响不同锁的同步方法,更不影响使用class的其他属性. package thread.base ...

  7. Shell脚本——cat/EOF输出多行

    在某些场合,可能我们需要在脚本中生成一个临时文件,然后把该文件作为最终文件放入目录中.(可参考ntop.spec文件)这样有几个好处,其中之一就是临时文件不是唯一的,可以通过变量赋值,也可根据不同的判 ...

  8. JavaScript的预编译和执行

    JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行.所谓代码块就是使用<script>标签分隔的代码段. 整个代码块共有两个阶段,预编译阶段和 ...

  9. linux dns子域授权 split分离解析 缓存dns服务器

    DNS子域授权作用:适用于同一个DNS组织父/子域名的解析工作由不同的dns服务器负责父dns服务器应该有为子域名迭代的能力 上下级区域属于不同的机构管理:.cn与.Anonymous.cn.cn需要 ...

  10. Winform中TextBox控件开启自动提示补全功能

    问题:Winform开发中,有一个TextBox控件用以输入姓名,现希望在输入名字时能够自动提示所有可能的名字. 解答:winform中的TextBox控件含有如下三个属性:   ① AutoComp ...