React学习之路

react学习第四天笔记之简历项目

2018-12-31  本文已影响0人  果木山

项目架构

蚂蚁设计模块antd

字体Icon的引入

让模块有css3的运动效果

折叠菜单的效果

知识点

简书链接

代码

 const webpack=require("webpack");
 const path=require("path");
 const HtmlWebpackPlugin=require("html-webpack-plugin");
 const ExtractWebpackPlugin=require("extract-text-webpack-plugin");
 
 module.exports={
     entry:path.resolve(__dirname,"src/main.js"),
     output:{
         path:path.resolve(__dirname,"dist"),
         filename:"my-third-bundle.js"
     },
     module:{
         rules:[
             {
                 test:/\.js(x)?$/,
                 use:"babel-loader",
                 exclude:/node_modules/
             },
             {
                 test:/\.css$/,
                 use:ExtractWebpackPlugin.extract({
                     fallback:"style-loader",
                     use:"css-loader"
                 })
             },
             {
                 test:/\.(eot|svg|ttf|woff)(\?\w*)?$/,
                 use:"url-loader?limit=50000"
             },
             {
                 test:/\.(png|git|jpg|jepg)$/,
                 use:"url-loader?limit=50000"
             }
         ]
     },
     devServer: {
         disableHostCheck: true, //  新增该配置项，防止浏览器控制台报错；
     },
     plugins:[
         new ExtractWebpackPlugin({
            filename:"style.css"
         }),
         new HtmlWebpackPlugin({
             template:path.resolve(__dirname,"src/Index.html")
         })
     ],
     mode:"development"
 };

 {
   "name": "day4",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack-dev-server --progress --colors --content-base dist --history-api-fallback",
     "build": "webpack --progress --colors"
   },
   "keywords": [],
   "author": "guomushan",
   "license": "ISC",
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^2.1.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "html-webpack-plugin": "^3.2.0",
     "prop-types": "^15.6.2",
     "react-addons-css-transition-group": "^15.6.2",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.28.3",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
     "antd": "^3.11.6",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-router": "^3.0.5"
   }
 }


 import React,{Component} from "react";
 import ReactDom,{render} from "react-dom";
 
 import route from "./routes";//引入文件夹，就默认引入文件夹下的index.js文件；
 //引入蚂蚁设计的css样式；
 import "antd/dist/antd.css"
 //引入字体图标的css
 import "./assets/fonts/iconfont.css";
 //引入自己的css样式，用于覆盖其他样式
 import "./main-index.css";
 
 render(route,document.getElementById("app"));

 //路由设置
 import React,{Component} from "react";
 import {Router,Route,browserHistory,IndexRoute} from "react-router";
 
 import App from "../layouts/App";
 import Home from "../containers/Home";
 import About from "../containers/About";
 import Contact from "../containers/Contact";
 import Project from "../containers/Project";
 import Skill from "../containers/Skill";
 
 const route=(
     <Router history={browserHistory}>
         <Route path="/" component={App}>
             <IndexRoute component={Home}/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
             <Route path="/project" component={Project}/>
             <Route path="/skill" component={Skill}/>
         </Route>
     </Router>
 );
 export default route;

 import React,{Component} from "react";
 import {Link,IndexLink} from "react-router";
 import ReactCSSTransitionGroup from "react-addons-css-transition-group"
 
 import MenuList from "../Menu";
 
 import "./index.css"
 
 export default class App extends Component{
     constructor(){
         super();
         this.state={
             collapse:true
         }
     }
     //箭头函数保证this指向；
     changeCollapse=()=>{
         this.setState({
             collapse:!this.state.collapse
         })
     };
     render(){
         var {collapse}=this.state;//解构赋值
         return(
             <div className="appWrap">
                 <div className={collapse?"appWrap-menu appWrap-menu-collapse":"appWrap-menu"}>
                     <MenuList collapse={collapse} changeCollapse={this.changeCollapse}/>
                 </div>
                 <div className={collapse?"appWrap-container appWrap-container-collapse":"appWrap-container"}>
                     <ReactCSSTransitionGroup
                         className="appCompo"
                         component="div"
                         transitionName="appCom"
                         transitionEnterTimeout={500}
                         transitionLeaveTimeout={200}>
                         <div className="appCompoInner" key={this.props.location.pathname}>
                             {this.props.children}
                         </div>
                     </ReactCSSTransitionGroup>
                 </div>
             </div>
         )
     }
 }

 import React,{Component} from "react";
 import {Link} from "react-router";
 import {Menu,Icon} from "antd"
 
 import "./index.css"
 export default class MenuList extends Component{
     showMenuItem(data){
         var {collapse}=this.props;
         //遍历数据data，箭头函数匿名函数的模式 p=>(),其中p为形参；
         return data.map(item=>(
             <Menu.Item key={item.path}>
                 <Link to={item.path==="home"?"/":item.path}>
                     <i className={"iconn icon iconfont "+item.icon}/>
                     {collapse?"":<span className="msg">{item.msg}</span>}
                 </Link>
             </Menu.Item>
         ))
     }
     render(){
         var {collapse,changeCollapse}=this.props;
         var data=[
             {"path":"home","msg":"首页","icon":"icon-home"},
             {"path":"about","msg":"关于我","icon":"icon-guanyuwomen"},
             {"path":"project","msg":"技能知识","icon":"icon-zhuanyezhishijineng"},
             {"path":"skill","msg":"项目经验","icon":"icon-xiangmu"},
             {"path":"contact","msg":"联系我们","icon":"icon-lianxiwomen"}
         ];
         return(
             <div className="menu">
                 <p className={collapse?"menu-user menu-user-collapse":"menu-user"}><Icon type="codepen-circle"/><span>{collapse?"":"果木山"}</span></p>
                 <Menu
                     defaultSelectedKeys={["home"]}
                     mode="inline"
                     theme="dark"
                 >
                     {this.showMenuItem(data)}
                 </Menu>
                 <span className="jian" onClick={changeCollapse}><Icon type={collapse?"right":"left"}/></span>
             </div>
         )
     }
 }

简历项目实战复习

上一篇 下一篇

猜你喜欢

热点阅读