####react最基础的语法和不依赖环境的纯前端免编译代码

参照：http://www.ruanyifeng.com/blog/2015/03/react.html

注意事项：1.必须放倒服务器上，在文件系统上无法运行

login.html

<!doctype html>

<head>

    <meta charset="utf-8">

    <!--reset.css-->

    <link rel="stylesheet" href="/frontend/css/reset.css" />

    <!--jquery-->

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!--react【核心库】【dom操作库】【jsx语法库】-->

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

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

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    <!--bootStrap-->

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" >

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" >

    <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!--jquery.cookie-->

    <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>

    <link rel="stylesheet" href="login.css" type="text/css" />

    <title>

        页面

    </title>

</head>

<body style="margin: auto">

<div id="root"></div>

<script type="text/babel" src="login.js"></script>

</body>

</html>

　　

login.css

.login{

    background-color: red;

}

.header{

    height: 30px;

    background-color: gray;

}

.userRole{

    height:80px;

    background-color: lightcyan;

}

.userId{

}

.userPassword{

}

.submitButtonEnabled{

    color:blue;

}

.submitButtonDisabled{

    color: gray;

}

　　

login.js

class Login extends React.Component{

    //props的类型和是否必须填写

//    static propTypes = {

//    };

    constructor(props) {

        super(props);

        this.state = {

            userId: '',

            userPassword: '',

            submitEnabled: false,

        };

    }

    componentWillMount() {

        console.log("componentWillMount");

    }

    componentDidMount() {

        console.log("componentDidMount");

    }

    componentWillUnmount() {

        console.log("componentWillUnmount");

    }

    //event

    handleClickSubmit() {

        if(this.state.userId.length < 1 || this.state.userPassword.length < 1){

            return;

        }

        $.get("http://publicschool.sinaapp.com/test/test.php?name=jack", function(result) {

            console.log(result);

        });

    }

    handleChangeId () {

        this.setState({

            userId:this.refs._ref_userId.value,

            submitEnabled:this.refs._ref_userId.value.length > 0 && this.refs._ref_userPassword.value.length > 0,

        });

    }

    handleChangePassword () {

        this.setState({

            userPassword:this.refs._ref_userPassword.value,

            submitEnabled:this.refs._ref_userId.value.length > 0 && this.refs._ref_userPassword.value.length > 0,

        });

    }

    //渲染方法

    render () {

    return(

        <div className="login">

            <div className="header">

                {this.props.title}

            </div>

            <div className="userRole">

                {this.props.role}

            </div>

            <input className="userId" type="text" ref="_ref_userId" placeholder="用户名" onChange={()=>this.handleChangeId()} />

            <input className="userPassword" type="password" ref="_ref_userPassword" placeholder="密码" onChange={()=>this.handleChangePassword()} />

            <button type="button" onClick={()=>this.handleClickSubmit()}

                    className={this.state.submitEnabled?"submitButtonEnabled":"submitButtonDisabled"}>登录</button>

        </div>);

    }

}

ReactDOM.render(

    <Login title="title" role="ddd"/>,

    document.getElementById('root')

);

　　

　　

react纯前端不依赖于打包工具的代码的更多相关文章

  1. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  2. Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能

    在之前的公司,我们前端使用webpack构建项目,项目构建完成后,我们会使用ftp或linux的一些命令工具上传我们的文件到服务器上,这种方式虽然是可以,但是最近面试的时候,人家会问我前端如何部署项目 ...

  3. 简单理解 Webpack，以及Web前端使用打包工具的原因

    Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...

  4. 前端项目打包工具weexpack的安装

    最下面是本人安装时候的系统环境,本篇文章只限于参考,不一定非得是这样,原因你懂得. 打包的过程中出现的问题 1.执行到weexpack run android的时候,到了resolving class ...

  5. 模拟webpack 实现自己的打包工具

    本框架模拟webpack打包工具 详细代码个步骤请看git地址:https://github.com/jiangzhenfei/easy-webpack 创建package.json { " ...

  6. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

  7. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  8. 前端框架VUE----webpack打包工具的使用

    在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情.如果感兴趣的同学,还是看官网吧. 中文链接地址:https://www.webp ...

  9. 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件

    [案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...

随机推荐

  1. 9.S5PV210的时钟系统

    1.时钟域:MSYS.DSYS.PSYS(1)因为S5PV210的时钟体系比较复杂,内部外设模块太多,因此把整个内部的时钟划分为3大块,叫做3个域.(2)MSYS: CPU(Cortex-A8内核). ...

  2. 转：RTC搭建android下三层应用程序访问服务器MsSql-服务器端

    原文:http://www.cnblogs.com/delphi007/p/3346061.html 前几天通过Ro搭建webservice,然后在android下调用,虽然已近成功,但是返回的数据库 ...

  3. Hadoop HDFS编程 API入门系列之合并小文件到HDFS（三）

    不多说,直接上代码.  代码 package zhouls.bigdata.myWholeHadoop.HDFS.hdfs7; import java.io.IOException;import ja ...

  4. CmdBuild

    cmdBuild官网地址:http://www.cmdbuild.org/it 下载.功能和安装说明:http://www.cmdbuild.org/en/download 扩展组件: shark-c ...

  5. 解决IE9下JQuery的ajax失效的问题

    jquery ajax在跨域访问post请求的时候,ie9以下无效(包括ie9)   1. 设置浏览器安全属性,启用[通过域访问数据源]选项,如图:

  6. androidstudio 查看源码

    handler.postDelayed(myrunable,10000); ctrl+鼠标左键,点击postDelayed显示(不可以查看源码) ctrl+鼠标左键,点击postDelayed显示(可 ...

  7. xcode5-ios7-如何添加120x120、152x152、76x76图标

    以120x120为例: 添加Icon_120x120.png-->.plist添加Icon files-->App Icons自动变化 1. 2. 3. ================= ...

  8. 通过Percona XtraBackup添加一个slave

    假设我的master是172.16.15.8,要添加的slave是172.16.15.9 1:在主服务器执行备份操作(172.16.15.8) /usr/bin/innobackupex --comp ...

  9. TS 流的解码过程（系摘抄）

    TS 流解码过程: 1. 获取TS中的PAT 2. 获取TS中的PMT 3. 根据PMT可以知道当前网络中传输的视频(音频)类型(H264),相应的PID,PCR的PID等信息. 4. 设置demux ...

  10. 2.Mybatis入门程序（单表的增删改成）

    这里讲的单表的增删改查,是由mapper代理的增删改查,先来看看步骤: 1.jar包的导入 2.配置全局的配置文件 3.建立接口 4.编写mapper.xml 5.测试 工程结构:这个你们自己可以调整 ...