react纯前端不依赖于打包工具的代码
####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纯前端不依赖于打包工具的代码的更多相关文章
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能
在之前的公司,我们前端使用webpack构建项目,项目构建完成后,我们会使用ftp或linux的一些命令工具上传我们的文件到服务器上,这种方式虽然是可以,但是最近面试的时候,人家会问我前端如何部署项目 ...
- 简单理解 Webpack,以及Web前端使用打包工具的原因
Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...
- 前端项目打包工具weexpack的安装
最下面是本人安装时候的系统环境,本篇文章只限于参考,不一定非得是这样,原因你懂得. 打包的过程中出现的问题 1.执行到weexpack run android的时候,到了resolving class ...
- 模拟webpack 实现自己的打包工具
本框架模拟webpack打包工具 详细代码个步骤请看git地址:https://github.com/jiangzhenfei/easy-webpack 创建package.json { " ...
- 一个基于React整套技术栈+Node.js的前端页面制作工具
pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
- 前端框架VUE----webpack打包工具的使用
在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情.如果感兴趣的同学,还是看官网吧. 中文链接地址:https://www.webp ...
- 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件
[案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...
随机推荐
- jQuery ajax()使用serialize()提交form数据
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化 <form action="&q ...
- C++ 用libcurl库进行http通讯网络编程
使用libcurl完成http通讯,很方便而且是线程安全,转载一篇比较好的入门文章 转载自 http://www.cnblogs.com/moodlxs/archive/2012/10/15/2724 ...
- tdd 和 make file,以及cygwin
等我把这本书看完,好好总结一下. 还要把以前的博客文字整理一下
- .NET高级工程师面试题之SQL篇
1 题目 这确实是一个真实的面试题,琢磨一下吧!知识不用,就会丢掉,我太依赖各种框架和dll了,已经忘记了最基本的东西.有多久没有写过SQL了,我已经不记得了. 已知表信息如下: Department ...
- linux 下如何安装Telnet ?
1 如何查看我的linux下是否安装了这个服务?2 没有安装的情况下,如何安装?3 client端 需要安装什么吗? 查看:rpm -qa | grep telnet安装:yum install -y ...
- udp通信的原理---makefile文件
由于UDP通信不需要事先建立连接,因此不需要TCP中的connect函数. 服务器端的步骤如下: 1. socket: 建立一个socket 2. bind: 将这个soc ...
- background-orgin属性
重点内容是:背景的显示范围是在元素的内边距之内的,如果要想改变显示范围,可以使用background-orgin和background-clip进行调整. (1)background-orgin有三个 ...
- Visual Studio 必备神器
会使用工具是人类文明的一大进步,今天敏捷大行其道,好的工具可以大大的提高生产力,这里说的工具都是VS平台上的扩展工具,一些机械的部分可以交给工具去处理,自己多关注其他部分.下面分享下我觉得不错的工具, ...
- Python学习笔记-Day5
冒泡算法: 实现1: a = [,,,,,,,,,,,,,,] def bubble(badlist): sort = False while not sort: sort = True ): ]: ...
- Samba服务器搭建配置
本次环境: 服务端-centos6.8-192.168.2.200 客户端1-centos6.8-192.168.2.201 客户端2-Windows7-192.168.2.104 假设条件如下: 使 ...