一.搭建开发环境:

webpack构建工具。

新建一个文件夹(login),进入根目录,

1.输入命令:cnpm init,生成了一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。

2.输入命令:cnpm install -g webpack  //全局安装webpack

3.输入命令:cnpm install --save-dev webpack  //本地安装webpack

4.输入命令:cnpm install --save-dev webpack-dev-server  //构建本地服务器

5.输入命令:cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react  //npm 一次性安装多个依赖模块,模块之间用空格隔开

6.输入命令:cnpm install --save react react-dom  //安装 react,react-dom

7.输入命令:cnpm install --save-dev style-loader css-loader  //css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-  loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

8.输入命令:cnpm install --save-dev postcss-loader autoprefixer  //自动添加前缀插件

9.输入命令:cnpm install --save-dev html-webpack-plugin    //这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。

10.输入命令:cnpm install --save-dev babel-plugin-react-transform react-transform-hmr  //它允许你在修改组件代码后,自动刷新实时预览修改后的效果。

11.输入命令:cnpm install --save-dev extract-text-webpack-plugin  //产品阶段的构建

12.输入命令:cnpm install clean-webpack-plugin --save-dev  //去除build里面的残存文件

login文件夹下建立两个文件夹app, build;文件 :webpack.config.js,webpack.production.config.js ,.babelrc ,postcss.config.js。

app文件夹里面建立components文件夹;文件:main.js,index.tmpl.html。

目录结构如下:

在package.json文件scripts字段中添加下面内容

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open",
"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
}

(若是mac系统

"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"

在webpack.config.js文件中

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/build",//打包后的文件存放的地方
filename: "bundle-[hash].js",//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./build",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
hot: true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
}),
new webpack.HotModuleReplacementPlugin(),//热加载插件
new CleanWebpackPlugin('build/*.*', {
root: __dirname,
verbose: true,
dry: false
})
]
}

webpack.production.config.js中

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
devtool: 'null', //注意修改了这里,这能大大压缩我们的打包代码
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true,
hot: true
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}],
})
}]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
],
};

postcss.config.js

module.exports = {
plugins: [
require('autoprefixer')
]
}

在.babelrc

{
"presets": ["react", "env"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"]
}]
}]]
}
}
}

以上配置完成,在根目录里执行

npm start

npm run server

就会在浏览器打开一个loaclhost:8080/

二:现在开始写一个点击按钮加1的react demo。

在components文件中建立组件ClickCounter.js,

加入代码:

import React , { Component } from 'react';
class ClickCounter extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {
count: 0
};
}
onClickButton() {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<button onClick = {this.onClickButton}>Click me</button>
<div>Click count:{this.state.count}</div>
</div>
);
}
}
export default ClickCounter;

现在在main.js文件中加入

import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './components/ClickCounter';
//import './index.css';
ReactDOM.render(
<ClickCounter/>,
document.getElementById('root')
);

在index.tmpl.html中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hotel login</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

再次

npm start

npm run server

浏览器新打开一个窗口如下:

这就是我从环境配置到运行成功的一个react 小demo

一个 react 小的 demo的更多相关文章

  1. 业余时间正在开发一个REACT小视频站点

    业余时间正在开发一个REACT小视频站点,数据接口来源于吐槽弹幕网(C站),供C站用户移动端的观看.因现存在移动网络屏蔽C站的关系,最好使用非移动网络进行观看.否则会比较卡,影响用户体验. 站点测试入 ...

  2. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  3. 1.类的加载机制_继承类的加载(一个小的Demo)说明

    今天我们先来一个小的Demo来了解类的加载顺序. public class ClassLoaderTest { public static void main(String[] args) { Sys ...

  4. 第一个ajax小demo

    第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657

  5. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  6. 手把手教你写一个RN小程序!

    时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...

  7. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  8. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  9. Mac上brew&thrift安装 以及在thrift架构下,自己新作了maven的小例 Demo

    1.缘由 前几天偶尔在网上看到thrift的信息,其内容和作用极大的引起了我的兴趣,因为我也是做iOS开发的,通过在网上的查询发现信息虽然很多实用的很少,容易误导他人,经过自己的成功实践,做了笔录,为 ...

随机推荐

  1. Yii 框架不同逻辑处理方法统一事务处理

    1.定义事务处理接口 <?php namespace frontend\business\SaveRecordByransactions; /** * Interface ISaveForTra ...

  2. wampserver安装

    WampServer的下载地址:https://sourceforge.net/projects/wampserver 安装教程:https://jingyan.baidu.com/article/4 ...

  3. js判断是手机端还是pc端访问

    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = " ...

  4. [leetcode]50. Pow(x, n)求幂

    Implement pow(x, n), which calculates x raised to the power n (xn). Example 1: Input: 2.00000, 10 Ou ...

  5. 【bug小记】应用跳转白屏

    tv端项目 测试那边反馈我们的应用跳转到别的应用,再跳转回来会出现白屏的情况. 其实这个原因很简单,就是系统内存不足了把我们的app进程销毁了 所以再回到我们的应用的时候需要重新绘制,而这个" ...

  6. application/json和application/x-www-form-urlencoded使用选择

    一.参考资料 选application/x-www-form-urlencoded还是application/json? @RequestBody应用 二.理解 1.@RequestBody的作用 注 ...

  7. Python列表详解

    #列表:增,删,改,查.names=['N0','N1','N2',['EX1','EX2'],'N3'] '''#------------------------------------------ ...

  8. 解决win10系统无法安装.NET Framework 3.5

    方法1:“我的电脑”,单击右键选择“管理” 在打开的“计算机管理”窗口中依路径“服务和应用程序—服务”打开,在列表中找到“Windows Update”并双击打开. 启动类型:自动. 服务状态下面点击 ...

  9. Java中equals方法简略描述

    所有类都从Object中继承了equals方法,源码:public boolean equals(Object o){return this == o;} 直接判断this与o本身是否为同一对象(是否 ...

  10. VUE 动态给对象增加属性,并触发视图更新。

    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...