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来实现这个拖 ...
随机推荐
- jquery遍历选中checkbox的id
$("[name='chkAll']:[checked]").each(function () { alert($(this).attr("id")); })
- Android ORM -- Litepal(1)
ORM,即Object Relation Mapping,对象关系映射,实现了程序里面的类和数据库里面的数据之间的对应关系,对数据库的操作可以通过对类的操作去实现,不用再写SQL语句,从而提高了开发效 ...
- Linux(九）__网络测试
1.确认ip地址.子网掩码.网关是正确的. ifconfig 2.确认局域网是互通的,访问别人的电脑.网关 ping 发送数据包接收数据包,设备是否联通 /etc/sysconfig/network- ...
- SAP CRM 复用视图
在设计任何视图或组件的时候,我们需要以可复用的方式来设计它.UI组件设计的主要目标即可复用. 例如:几乎每个事务都要处理合作伙伴(客户).如果我们想要在Web UI显示那些合作伙伴,需要设计一个视图. ...
- 北京54全国80及WGS84坐标系的相互转换
这三个坐标系统是当前国内较为常用的,它们均采用不同的椭球基准.其中北京54坐标系,属三心坐标系,大地原点在苏联的普而科沃,长轴6378245m,短轴6356863,扁率1/298.3:西安80坐标系, ...
- Undefined symbols for architecture arm64:
1. 没有往项目中导入静态库(.a 文件)需要的 framework. 2.拖到项目中的静态库不支持arm64(或其他)指令集 这种情况没遇到过 一般都是第一种情况.
- Android 手机卫士--导航界面3、4和功能列表界面跳转逻辑处理
刚刚花了一点时间,将导航界面3.4的布局和相应的跳转逻辑写了一下: Setup3Activity代码如下: /** * Created by wuyudong on 2016/10/10. */ pu ...
- 【代码笔记】iOS-字体抖动动画
一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...
- Android MVP 设计模式
1.基本概念 Model : 模型 负责处理数据的加载或者存储,比如从网络或本地数据库获取数据等: View : 视图 负责界面数据的展示,与用户进行交互: Presenter ...
- 解决apache启动错误"httpd:Could not reliably determine..."
启动apache遇到错误:httpd: Could not reliably determine the server's fully qualified domain name [root@serv ...