Skip to content

马贞晓 / templateReact

Go to a project
Commit ae0997f0 by 马贞晓
Options

结构调整完成

1 parent 2f67b89d
Expand all
Inline Side-by-side
Showing 23 changed files with 393 additions and 53 deletions
config/webpack.config.js
......@@ -400,7 +400,19 @@ module.exports = function(webpackEnv) {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
}],
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
......
package.json
......@@ -44,10 +44,14 @@
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-app-polyfill": "^1.0.4",
"react-dev-utils": "^9.1.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"redux": "^4.0.4",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
......@@ -84,6 +88,8 @@
"devDependencies": {
"@babel/helper-create-regexp-features-plugin": "^7.7.2",
"babel-plugin-import": "^1.12.2",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"less": "^3.10.3",
"less-loader": "^5.0.0"
},
......
public/index.html
......@@ -28,7 +28,7 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<article id="root" class="h100"></article>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
......
src/App.css deleted 100644 → 0
.App {
text-align: center;
}
.App .App-logo {
height: 40vmin;
}
.App .App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App .App-link {
color: #09d3ac;
}
src/App.js deleted 100644 → 0
import React from 'react';
import logo from './logo.svg';
import './App.less';
import { Button } from 'antd';
function App() {
return (
<div className="App">
<Button type="primary">Primary</Button>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
src/component/layout/App.js 0 → 100644
import React,{Component} from 'react'
import Routers from "../../router";
import store from "../../store";
import { Provider } from 'react-redux'
import "./less/App.less";
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import LayoutHeader from "./LayoutHeader";
import LayoutSlide from "./LayoutSlide";
import LayoutFooter from "./LayoutFooter";
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
class App extends Component{
render(){
console.log(LayoutFooter);
return <Provider store={store}>
<Layout className="h100">
<Header className="header">
<LayoutHeader title="头部" />
</Header>
<Content style={{ padding: '0 50px',display:"flex"}}>
<Layout style={{ padding: '24px 0', background: '#fff' }}>
<Sider width={200} style={{ background: '#fff' }}>
<LayoutSlide title="侧边" />
</Sider>
<Content style={{ padding: '0 24px', minHeight: 280,display:"flex" }}>
<Routers title="路由"/>
</Content>
</Layout>
</Content>
<Footer style={{ textAlign: 'center' }}><LayoutFooter /></Footer>
</Layout>
</Provider>
}
}
export default App;
\ No newline at end of file
src/component/layout/LayoutFooter.js 0 → 100644
import React from "react";
let LayoutFooter=()=>{
return <p>Ant Design ©2018 Created by Ant UED</p>
}
export default LayoutFooter;
\ No newline at end of file
src/component/layout/LayoutHeader.js 0 → 100644
import React,{Component} from 'react'
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
class LayoutHeader extends Component{
render(){
return <>
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['2']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</>
}
}
export default LayoutHeader;
\ No newline at end of file
src/component/layout/LayoutSlide.js 0 → 100644
import React,{Component} from 'react'
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
export default class LayoutSlide extends Component{
render(){
return <Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<SubMenu
key="sub1"
title={
<span>
<Icon type="user" />
subnav 1
</span>
}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<Icon type="laptop" />
subnav 2
</span>
}
>
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
title={
<span>
<Icon type="notification" />
subnav 3
</span>
}
>
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
}
}
\ No newline at end of file
src/component/loading/index.js 0 → 100644
import React from "react";
const Load=(props)=>{
return <div>loading...</div>
}
export default Load
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './less/index.less';
import App from './component/layout/App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
......
src/less/index.css 0 → 100644
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.h100 {
height: 100%;
}
src/index.css → src/less/index.less
*{ margin:0;padding:0;box-sizing: border-box;}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
......@@ -5,9 +6,11 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
code {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
}
.h100{ height:100%;}
\ No newline at end of file
src/router/App.js 0 → 100644
import{lazy} from 'react';
export default [
{ path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}
]
\ No newline at end of file
src/router/index.js 0 → 100644
import React,{Component,lazy,Suspense} from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import Load from "../component/loading/index.js";
//import Demo from "../view/index/index";
//const Demo = lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))
import App from "./App.js";
let List = [ { path:"/",component:lazy(()=>import(/* webpackChunkName: "Index" */ "../view/index/index.js"))}];
class Routers extends Component{
state={
List:[]
}
componentWillMount(){
let List = [
...this.state.List,
...App //当前模块，含入口
]
this.setState({List})
}
render(){
const {List} = this.state;
return <Router>
<Switch>
{
List.map((item,ind)=>{
return <Route exact path={item.path} key={ind}
render={(props)=>(
<Suspense fallback={Load()}>
<item.component {...props} />
</Suspense>
)}
>
</Route>
})
}
{/* <Route exact path="/">
<Suspense fallback={Load()}>
<Demo />
</Suspense>
</Route> */}
</Switch>
</Router>
}
}
export default Routers
\ No newline at end of file
src/store/EVENT.js 0 → 100644
export default Object.freeze({
LAYOUT:"LAYOUT",
LOGIN:"LOGIN",
DYNC_MODIFY_NAME:"DYNC_MODIFY_NAME"
})
\ No newline at end of file
src/store/actions.js 0 → 100644
const statics = {
ADD_TODO:"ADD_TODO",
DELETE_TODO:"DELETE_TODO",
CHANGE_TODO_TO_DOING:"CHANGE_TODO_TO_DOING",
CHANGE_TODO_TO_DOING:"CHANGE_TODO_TO_DOING",
CHANGE_DOING_TO_TODO:"CHANGE_DOING_TO_TODO",
CAHNGE_DONE_TO_DOING:"CAHNGE_DONE_TO_DOING",
SEARCH:"SEARCH"
}
export {
...statics
}
\ No newline at end of file
src/store/index.js 0 → 100644
import { combineReducers,createStore } from 'redux';
import layout from './layout';
import login from "./login"
// import visibilityFilter from './visibilityFilter';
const reducer = combineReducers({
layout,login
});
const store = createStore(reducer)
export default store;
\ No newline at end of file
src/store/layout.js 0 → 100644
import EVENT from "./EVENT";
class Private{
SetList(state,payload){
let {menuList} = state;
menuList.push(payload);
return {...state,menuList}
}
}
const pv = new Private();
let stores={
menuList:[{path:"/",title:"首页"}]
}
// (() => {
// if (localStorage.todos) {
// todos = JSON.parse(localStorage.todos);
// } else {
// todos = [];
// }
// })();
function layout(state = stores, action){
let{ payload } = action;
switch (action.type) {
/**
* @name 修改Lyout相关
*/
case EVENT.LAYOUT:return pv.SetList(state,payload);break
default:return state
}
}
export default layout;
src/store/login.js 0 → 100644
import EVENT from "./EVENT";
import store from "./index";
class Privates{
DyncEvent(state,payload){
setTimeout(()=>{
store.dispatch({type:EVENT.DYNC_MODIFY_NAME,payload})
},5000)
return state;
}
SetNewName(state,payload){
let name = {state};
name = payload.name;
return {...state,name}
}
}
const pv = new Privates();
let user = {
name:"mazhenxiao"
}
const LOGIN=(state=user,action)=>{
let {payload} = action;
switch(action.type){
case EVENT.LOGIN:return pv.DyncEvent(state,payload);break;
case EVENT.DYNC_MODIFY_NAME:return pv.SetNewName(state,payload);break;
default:return state
}
}
export default LOGIN;
\ No newline at end of file
src/view/index/index.js 0 → 100644
import React,{Component} from 'react';
import PropTypes from 'prop-types';
import{connect} from "react-redux";
import EVENT from "../../store/EVENT"
@connect((state)=>{
// debugger
let {layout,login} = state
return {layout,login};
})
class Demo extends Component{
componentDidMount(){
// debugger
console.log(this)
}
/**
* @name 同步修改
*/
EventClick(item){
this.props.dispatch({
type:EVENT.LAYOUT,
payload:{
path:"/",title:"更改"
}
})
}
/**
* @name 异步修改
*/
EventDyncClick(){
this.props.dispatch({
type:EVENT.LOGIN,
payload:{
name:"hehehe"
}
})
}
render(){
let { layout,login} = this.props;
console.log(layout,login)
return <article>
<p>同步修改</p>
{
layout.menuList.map((d,ind)=>{
return <span key={ind} onClick={this.EventClick.bind(this,d)}>{JSON.stringify(d)}</span>
})
}
<p>异步修改</p>
{
<span onClick={this.EventDyncClick.bind(this)}>{login.name}</span>
}
</article>
}
}
// Demo.PropTypes={
// layout:PropTypes.object
// }
// Demo.defaultProps={
// layout:{
// menuList:[]
// }
// }
export default Demo;
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!