React JS的基本用法［ES5，纯前端写法］
####搭建webpack+react环境
参考:https://my.oschina.net/u/1403181/blog/672501
1. 新建一个文件夹:
react-demo
2. cd react-demo
3. npm install webpack -g #不推荐全局安装，原因是可防止不同项目依赖不同版本的 Webpack 而导致冲突。
4. npm init 命令生成 package.json
5. npm install webpack --save-dev #安装webpack，推荐方式，安装到本项目
6. npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev #安装babel
7. npm install react react-dom --save-dev #安装react react-dom
7.1 npm install style-loader --save-dev
7.2 npm install css-loader --save-dev
8. 新建webpack.config.js文件
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: ['webpack/hot/dev-server', path.resolve(__dirname, './index.js')],
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js'
},
devtool:'source-map',
module: {
loaders: [
{
test:/\.css$/,loader:'style!css'
},
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
8.1 .babelrc中添加
{
"presets": ["es2015","react"]
}
9. npm install webpack-dev-server --save-dev #安装webpack-dev-server
10. 在package.json文件中为scripts添加：
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}
最后我们的package.json代码是这样的：
{
"name": "reactpro1",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "babel-node tools/run bundle",
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},
"author": "jx",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"react": "^15.0.2",
"react-dom": "^15.1.0",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
},
"description": ""
}
11. 编写index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <title>React Project</title>
</head>
<body>
<div id="content"></div>
<script src="./build/bundle.js"></script>
</body>
</html>
12. index.js如下写:
let React = require('react');
let ReactDOM = require('react-dom');
ReactDOM.render(<div>hello </div>, document.getElementById('content'));
13. webpack打包即可
完毕...................
PS:
复杂点的index.js如下
let React = require('react');
let ReactDOM = require('react-dom');
import './index.css';
class Login extends React.Component{
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="title">
{this.props.title}
</div>
<div className="userRole">
{this.props.role}
</div>
<input type="text" ref="_ref_userId" placeholder="用户名" onChange={()=>this.handleChangeId()} />
<input type="password" ref="_ref_userPassword" placeholder="密码" onChange={()=>this.handleChangePassword()} />
<button type="button" onClick={()=>this.handleClickSubmit()}>登录</button>
</div>);
}
}
ReactDOM.render(
<Login title="title" role="ddd"/>,
document.getElementById('content')
);
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;
}
React JS的基本用法［ES5，纯前端写法］的更多相关文章
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- React.js 小书 Lesson14 - 实战分析：评论功能（一）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson14 转载请注明出处,保留原文链接和作者信息. 课程到这里大家已经掌握了 React.js 的 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- 谈谈 React.js 的核心入门知识
近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...
- 前端迷思与React.js
前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...
- Web框架概述——React.js
目前,在前端Web开发中,三大热门框架为React.js,Vue.js,Angular.js .当然,三大框架各有各的优缺点,这里就不多说了,下面我就针对前段时间所学的React框架做一下整体知识点的 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- Visual Studio （VSIX，项目模板 ）制作
下载Vsiual Studio 2012 SDK 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=30668 提示:一定要注意 ...
- svn+teamcity+YouTrack+Upsource搭建—写给明天工作室的小伙伴
首先解释下概念: SVN:Subversion的简称,版本控制系统.采用集中式管理(本地只保留服务器仓储的副本,想要把代码交到服务器或者看提交记录.差异对比就必须得有网络连接) Teamcity:可持 ...
- 移动端API接口优化的术和结果
最近一直在忙工作的事情,所以文章写得有些少. 有3-5篇文章都是写到一半然后被别的事情给打断了,所以,我得找个时间好好补补. 最近一直在关注移动端接口API的可用性问题,在移动时代这个做这个优化能产生 ...
- Qt——组件位置随窗口变化
当我们用Qt Designer设计界面时,有时会面临这样一个问题:需要在窗口指定位置放置组件,并且当窗口位置大小改变时,该组件相对其父对象的位置是不变的,如下面两幅图所示 ,首先看上面这幅图,注意bu ...
- Flexible 弹性盒子模型之flex
实例 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容: #main div { flex:1; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟 ...
- 业务人员自助BI分析不够用，还要自助数据准备？
自助式BI工具,可以帮助业务人员充分了解和利用企业数据,通过可视化操作,拖拖拽拽来新建分析,生成可视化的报表,帮助企业决策.但近几年的调查研究发现,拥有强大分析策略和模型的产品,比如Tableau.q ...
- Oracle Sales Cloud：管理沙盒（定制化）小细节2——使用对象触发器更新数字字段
在上一篇 "管理沙盒(定制化)小细节1" 的随笔中,我们使用公式法在 "业务机会" 对象(单头)上建立了 "利润合计" 字段,并将它等于 & ...
- Vector Tile
Mapbox Vector Tile Specification A specification for encoding tiled vector data. <?XML:NAMESPACE ...
- Atitit 软件国际化原理与概论
Atitit 软件国际化原理与概论 语言和文化习俗因地域不同而差别很大．对某一特定的地域的 语言环境称为"locale"．它不仅包括语言和货币单位,而且还包括 数字标示格式, 日期 ...
- ArcGIS Engine开发前基础知识（4）
ArcGIS不同开发方式的比较 关于GIS应用软件的开发,通常有三种方式:C/S架构.网络GIS和移动GIS.ArcGIS平台提供了对三种开发方式的支持,对于采用从C/S架构的大多数开发者来讲,首先想 ...