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来实现这个拖 ...
随机推荐
- Entity Framework 教程——创建实体数据模型
创建实体数据模型: 本文将带你创建实体数据模型(EDM)SchoolDB数据库和理解基础建设模块. 实体数据模型(EDM)是用于描述实体之间关系的一种模型,以下将使用Visual Studio 201 ...
- ASP.net MVC 文件下载的几种方法（欢迎讨论）
在ASP.net MVC 中有几种下载文件的方法 前提:要下载的文件必须是在服务器目录中的,至于不在web项目server目录中的文件下载我不知道,但是还挺想了解的. 第一种:最简单的超链接方法,&l ...
- 模型浏览器【Model Browser】【EF基础系列6】
We have created our first Entity Data Model for School database in the previous section. The visual ...
- c3p0连接数据库的3种方式
c3p0连接数据库的3种方式,这里以mysql为例 1. 直接用set方法设置参数, 基本方法 ComboPooledDataSource dataSource = new ComboPooledDa ...
- Google官方关于Android架构中MVP模式的示例续-DataBinding
基于前面的TODO示例,使用Data Binding库来显示数据并绑定UI元素的响应动作. 这个示例并未严格遵循 Model-View-ViewModel 或 Model-View-Presenter ...
- java获取https网站证书，附带调用https:webservice接口
一.java 获取https网站证书: 1.创建一个java工程,新建InstallCert类,将以下代码复制进去 package com; import java.io.BufferedReader ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》- 6.通讯控制器的设计
目 录 第六章 通讯控制器的设计... 2 6.1 控制器接口... 2 6.2 串口控制器... 3 6.3 ...
- Linux归档压缩、分区管理与LVM管理
归档和压缩命令: 命令格式: gzip [-9] 文件名 bzip2 [-9] 文件名 gzip –d .gz格式的压缩文件 bzip2 –d .bz2格式的压缩文件 选项: -9:高压缩比,多用于压 ...
- JavaScript学习笔记1之基础知识点
一.什么是JavaScrip JavaScript是一种动态类型.弱类型.基于原型的客户端脚本语言.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,在HTML网页 ...
- Unable to simultaneously satisfy constraints.
在进行版本的迭代更新时,新功能需求需要对主页面的UI进行重新的布局,但是,报了错误,出了好多约束方面的问题: Unable to simultaneously satisfy constraints. ...