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来实现这个拖 ...
随机推荐
- NavisWorks Api 简单使用与Gantt
相信很多朋友在做BIM项目的时候.都有客户会提出项目计划,形象进度 等需求. 那么当前最主要的问题就是计划与BIM模型的关联问题.那么我在项目中是用户用Project软件编辑计划然后手动跟三维模型关联 ...
- C#开发微信门户及应用(26)-公众号微信素材管理
微信公众号最新修改了素材的管理模式,提供了两类素材的管理:临时素材和永久素材的管理,原先的素材管理就是临时素材管理,永久素材可以永久保留在微信服务器上,微信素材可以在上传后,进行图片文件或者图文消息的 ...
- 【Java每日一题】20161229
package Dec2016; import java.util.ArrayList; import java.util.List; public class Ques1229 { public s ...
- querystring模块
querystring处理参数的小利器. 下面是querystring的四个方法. ①stringify:将一个参数对象序列化为一个字符串 eg: querystring.stringify({n ...
- 关于fefo函数
feof是C语言标准库函数函数,其原型在stdio.h中,其功能是检测流上的文件结束符. 函数原型: int feof(FILE *stream); 返回值:如果文件结束,则返回非0值,否则返回0 在 ...
- JavaScript中数据类型转换总结
JavaScript中数据类型转换总结 在js中,数据类型转换分为显式数据类型转换和隐式数据类型转换. 1, 显式数据类型转换 a:转数字: 1)Number转换: 代码: var a = " ...
- iOS-集成支付宝支付、微信支付简单总结
支付宝快捷支付: 官方文档中,支付宝说建议我们使用支付时要讲签名过程放在服务器端,这样安全.同时给的demo中签名是在本地移动端做的...不过支付宝的集成还是较简单的. 为了安全签名当然放后台做了.我 ...
- H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Linux命令随笔
Linux命令总结 man ==命令帮助; help ==命令的帮助(bash的内置命令); ls ==list,查看目录列表; -ld:查看目录权限; -l:(long)长格式显示属性; -F:给不 ...
- java正则表达式
java正则表达式 1.Java正则表达式的语法与示例: http://baike.xsoftlab.net/view/207.html 2.Java 正则表达式: http://www.runo ...