【心有猛虎】react-lesson
这个项目标识：构建一套适合 React、ES6 开发的脚手架
项目地址为：https://github.com/ZengTianShengZ/react-lesson
运行的是第一课，基本上可以当作是一个小型的项目，毕竟路由还有组件目录挺全的，不过，没有深入，记一下
//lesson-1/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="format-detection" content="telephone=no">
<title>react - lession</title>
<link href="/build/static/app.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="/build/static/app.js"></script>
</body>
</html>
//lesson-1/src/App.jsx
import ReactDOM, {render} from 'react-dom';
import React, {Component, PropTypes} from 'react';
import {Router,Route,hashHistory} from 'react-router';
import Main from './Component/Main.jsx'
//import Page1 from './Component/Page1.jsx'
import './Style/comm.scss'
const Page1 = (location, cb) => {
require.ensure([], require => {
cb(null, require('./Component/Page1').default)
},'Page1')
}
render(
<Router history={hashHistory}>
<Route path='/' component={Main} />
<Route path='/page1' getComponent={Page1} />
</Router>,
document.body.appendChild(document.createElement('div'))
);
//lesson-1/src/Component/Main.jsx
import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
class Main extends Component {
constructor() {
super();
}
render(){
return(
<div>
<h1>lesson 1 </h1>
<p>webpack 构建一套适合 React、ES6 开发的脚手架 </p>
<Link to="/page1" activeStyle={{color: 'blue'}}>page1</Link>
</div>
)
}
}
export default Main;
//lesson-1/src/Component/page1.jsx
import React, {Component, PropTypes} from 'react';
class Page1 extends Component {
constructor() {
super();
}
render(){
return(
<div>
<h1>lesson 1 </h1>
<p>page1</p>
</div>
)
}
}
export default Page1;
项目中的第二个例子就是老生常谈了
太冗杂了，我都不愿意去看，一般都会抽分reducer,action，store
//lesson-2/src/App.jsx
import React,{Component,PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import {Provider,connect} from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import Index from './Component/Main.jsx';
import './Style/comm.scss'
// reducer
const reducer = (state = {count: 0}, action) => {
switch (action.type){
case 'INCREASE': return {count: state.count + 1};
case 'DECREASE': return {count: state.count - 1};
default: return state;
}
}
const store = createStore(reducer);
//监听state变化
store.subscribe(() => {
//console.log(store.getState())
});
render(
<Provider store={store}>
<Index></Index>
</Provider>,
document.body.appendChild(document.createElement('div'))
);
//lesson-2/src/Component/Main.jsx
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
/**
* 定义一个 Main组件
*/
class Main extends Component{
constructor(){
super();
this.pClick =() =>{
console.log('sssssssss');
};
this.state = {
num:0,
age:666
}
}
render(){
// 拿到 this.props 参数
const {count, increase, decrease} = this.props;
return(
<div>
<p className="lesson-2">React lesson-2</p>
<p>
---------------------------------
</p>
<div className="count">
<div>计数：{this.props.count}次</div>
<span className="btn" onClick={increase}>+</span>
<span className="btn" onClick={decrease}>-</span>
</div>
</div>
)
}
}
/**
* 用来给 组件传递数据
* @param state
*/
const mapStateToProps = (state) => {
return {
count: state.count
}
};
/**
*用来组件给 容器组件派发数据
* @param dispatch 派发 Action
* @param ownProps 组件自身的 props参数
*/
const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
};
/**
* actions
*/
const actions ={
increase:() => {
return {type: 'INCREASE'}
},
decrease: () => {
return {type: 'DECREASE'}
}
};
/**
* 连接 UI组件 和 容器组件
* @param mapStateToProps 输入逻辑
* @param mapDispatchToProps 输出逻辑
*/
const Comp = connect(mapStateToProps, mapDispatchToProps)(Main);
/**
* 输出一个容器组件
*/
export default Comp;
哎，第三节也是简单的项目
不过 服务是nodejs起的
//lesson-3/server.js
var express = require('express');
var app = express();
var dataJson = require('./dataJson.json');
app.use(express.static('build'))
/**
* get： 请求
* url： http://127.0.0.1:8088/getData
*/
app.get('/getData',function(req,res){
var resData = {
err:0,
data:dataJson
}
res.end(JSON.stringify(resData));
})
app.get('/', function (req, res) {
res.sendFile(__dirname + '/build/index.html')
})
var server = app.listen(8088, function () {
console.log('正常打开8088端口');
})
//lesson-3/server_hot.js
var webpack = require('webpack');
var express = require('express');
var config = require('./webpack.config.hot');
var dataJson = require('./dataJson.json');
var app = express();
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true,
inline: true,
progress: true,
stats: {
colors: true,
}
}));
app.use(require('webpack-hot-middleware')(compiler));
/**
* get： 请求
* url： http://127.0.0.1:8088/getData
*/
app.get('/getData',function(req,res){
var resData = {
err:0,
data:dataJson
}
res.end(JSON.stringify(resData));
})
/**
* 将其他路由，全部返回index.html
*/
app.get('/*', function(req, res) {
res.sendFile(__dirname + '/index.html')
});
app.listen(8088, function() {
console.log('正常打开8088端口')
});
//lesson-3/src/App.jsx
import React,{Component,PropTypes} from 'react';
import {Provider,connect} from 'react-redux';
import ReactDOM, {render} from 'react-dom';
import store from './Redux/store'
import router from './Router/router'
import './Style/comm.scss'
store.subscribe(() => {
});
render(
<Provider store={store}>
{router}
</Provider>,
document.getElementById('root')
);
//lesson-3/src/Router/router.jsx
// 有用到懒加载
import React, {Component, PropTypes} from 'react';
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router';
import Index from '../Component/Index.jsx';
/*=================
router.jsx 组件
专门用来管理路由的
==================*/
/**
Page2 组件按需加载
*/
const page2 = (location, cb) => {
require.ensure([], require => {
cb(null, require('../Component/Page2').default)
},'page2')
}
const RouteConfig =(
<Router history={hashHistory}>
<Route path='/' component={Index}/>
<Route path='/page2' getComponent={page2}/>
</Router>
)
export default RouteConfig
//lesson-3/src/Component/Loading.jsx
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import template from './common/template'
/*=================
BottonView.jsx 子组件
==================*/
class LoadingView extends Component{
constructor(){
super();
}
render(){
let{fData} = this.props;
let loadingStyle;
if(fData.loading){
loadingStyle = {
opacity: 1
}
}else{
loadingStyle = {
opacity: 0
}
}
return(
<div id='LoadingView' style={loadingStyle}>
</div>
)
}
shouldComponentUpdate(nextProps, nextState){
return true;
}
}
export default template({
id:'',
url:'',
subscribeData:['fData'],
component:LoadingView
})
//lesson-3/src/Redux/action.jsx
import fetch from 'isomorphic-fetch'
/*=================
action.jsx
派发 action
==================*/
export const increase = data => {
return {type: 'INCREASE',data:data}
}
export const decrease = data => {
return {type: 'DECREASE',data:data}
}
const dispathData = (path,json) => {
return {
type: 'DISPATHDATA',
path:path,
json:json
}
}
export const fetchData = (url ,data) => {
return dispatch =>{
// 先派发一个 LOADING action
dispatch({type:'LOADING'});
fetch(url,{
mode: 'cors',
"Content-Type": "application/json"
})
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(function(data){
// 这里延时只是为了演示效果，实际开发中需要把延时去掉
setTimeout(function(){
// 数据请求成功 再派发一个 getData action
return dispatch(dispathData('getData',data));
},3000);
})
.catch(function(error) {
console.log('Request failed', error)
});
}
}
//lesson-3/src/Redux/reducer.jsx
import Immutable from 'immutable'
/*=================
reducer.jsx
接收Action 并作出处理
==================*/
export const increaseData = (state =Immutable.fromJS({ count: 0}), action={}) => {
switch (action.type){
case 'INCREASE':
return Immutable.Map({count:action.data+1});
default: return state;
}
};
export const decreaseData = (state = Immutable.fromJS({ count: 8}), action={}) => {
switch (action.type){
case 'DECREASE':
return Immutable.Map({count:action.data-1});
default: return state;
}
};
export const fData = (state = {data:{},loading:false}, action={}) => {
switch (action.type){
case 'LOADING':
return {
data:{},
loading:true
};
case 'DISPATHDATA':
return {
data: action.json,
loading:false
};
default: return state;
}
}
//lesson-3/src/Redux/store.jsx
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import * as reducer from './reducer'
/*=================
store.jsx
中央数据处理器
==================*/
var store = createStore(
combineReducers(reducer),
applyMiddleware(thunk)
);
export default store;
【心有猛虎】react-lesson的更多相关文章
- [React] React Fundamentals: Mixins
Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...
- [React] React Fundamentals: Component Lifecycle - Updating
The React component lifecycle will allow you to update your components at runtime. This lesson will ...
- [React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...
- [React] React Fundamentals: transferPropsTo
the transferPropsTo method lets you easily push properties into your components to easily customize ...
- [React] React Fundamentals: Accessing Child Properties
When you're building your React components, you'll probably want to access child properties of the m ...
- [React] React Fundamentals: Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual ...
- [React] React Fundamentals: Owner Ownee Relationship
The owner-ownee relationship is used to designate a parent-child relationship with React components ...
- [React] React Fundamentals: State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
- [React] React Fundamentals: First Component
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- [React] React Fundamentals: with-addons - ReactLink
It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synch ...
随机推荐
- THUWC 游记
考试前的一个周末 PKUWC没过,去不了,自闭,我死了. 考试前的星期一 THUWC居然过了!!!大恩大德永世难忘,我又活了. 考试前的周四 WTF!??为什么要用Ubuntu,我完全不会,凉了凉了, ...
- Makefile知识点
1.标准Makefile文件示例如下: #把.o .C .cxx .cpp .hxx .h添加到后缀列表中. .SUFFIXES: .o .C .cxx .cpp .hxx .h #设置变量并赋值,方 ...
- 在skyline中将井盖、雨水箅子等部件放到地面模型上
公司三维建模组遇到这样的一个问题,怎样将井盖.雨水盖子恰好放在做好的地面模型上.传统的方法是在skyline中逐个调整井盖的对地高度,就是调整为恰好能放在地面上.或者选择很粗糙的一个方法,在“高度”属 ...
- MATLAB技巧—sort和sortrows函数
MATLAB技巧-sort和sortrows函数 1.sort函数 sort函数用于对数据进行排序,通过help sort命令,可以查找到sort函数的具体用法: Y = SORT(X,DIM,MOD ...
- 【arc075f】AtCoder Regular Contest 075 F - Mirrored
题意 给定一个数x,问有多少个正整数y,使得rev(y)-y==x 其中rev(x)表示x按位翻转之后得到的数. x<=1e9 做法 首先通过打表发现,这个答案不会很大. 这就说明解相当地松弛. ...
- httpclient遇到java.net.URISyntaxException: Illegal character in scheme name at index 0:
正准备按照大佬的解决办法处理, 看会一条回复,说url有空格 检查了一下,还真是有空格 去除url中的空格,问题解除
- 免费提取百度文库 doc 文件
首先说明,今天要推荐的这款软件,不能不能不能免费提取百度文库里 PDF 格式的文件. 对于其他的格式,无论收费与否都能免费提取. 只是口头说说免不了耍流氓的嫌疑,举栗如下: 百度文库里<喜迎党的 ...
- tensorflow使用CPU可以跑（运行），但是使用GPU却不能用的情况
在跑的时候可以让加些选项: with tf.Session(config=tf.ConfigProto(allow_soft_placement=True, log_device_placement= ...
- log4j 配置文件参数说明
log4j 框架配置文件常用参数说明 %d 时间(-- ::,) %-5p 日志级别(INFO/DEBUG) %10c 包名(com.xxx.xxx.business.logging) %M 执行的方 ...
- 2018-10-20-C#-从零开始写-SharpDx-应用-初始化dx修改颜色
title author date CreateTime categories C# 从零开始写 SharpDx 应用 初始化dx修改颜色 lindexi 2018-10-20 17:34:37 +0 ...