react学习笔记一-----react前端框架的初步搭建
前言
- 本人也是新手,刚开始研究学习react
- 初步搭建一个页面框架,没有用到特别高深的技术,其实是不会呀!哈哈
- 仅仅作为学习的记录,有写的不好的地方请见谅,如果有错误或者更好的建议可以留言,大家一起学习。
- 该笔记会不断更新,但是由于工作原因,可能更新的较慢,见谅。
正文
- 学习过程
就是官方文档、各种案例尝试写了一遍
- react配置和安装方式:create-react-app
采用的是create-react-app配置安装,并才考了一下文章进行初始化配置
文章地址:https://blog.csdn.net/Cress_z...
代码环境
- 因为是第一次学习react,对全家桶不熟悉,所以,第一个项目暂时不会用到全家桶的其他组件,后续用上的时候会做说明。
使用组件:react+react-router4.0+antd
预览(暂时只是demo,静态的)
说明
- 由于没有使用全家桶,所以组件之间相互通信采用的是props和state。
- 由于对vuejs有简单的了解,所以在布局上请参看Appjs部分,页面布局保持App入口文件不变
- react-router4.0和2.x好像不太一样,网上大部分都是2.x的版本,因为本人也是刚开始学习,不太了解,看了一下文档后初步使用见根目录indexjs和router/index.js文件。
- 该demo仅供参考。
主要代码部分
相信看到该文档的各位,其实对react已经有了了解或者比较熟悉了。u 所以这里只是放一些主要的部分,其他部分请github上下载查看。
- index.js部分
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'; import registerServiceWorker from './registerServiceWorker'; import App from "./components/App/App"; import Login from "./components/login"; ReactDOM.render( <div> <Router> <Switch> <Route path="/login" component={Login} /> <Route path="/" component={App} /> </Switch> </Router> </div> , document.getElementById('root') ); registerServiceWorker();
- App.js部分
import React, { Component } from 'react'; import './App.css'; import { Layout,Icon } from 'antd'; import RouteConfig from './../../router/index' import HomeMenu from './../Menu/homeMenu' import HeaderMenu from '../Header/header' //const { Header } = Layout; /** 0、获取和传递组件值,用props 1、selHeaderMenu:同子组件headerjs进行通信的函数,不需要在自身组件中定义,只需要在子组件中定义 2、子组件传递过来的menu值,通过selHeader函数进行改变 3、Appjs自身作为父组件,向子组件homeMenujs传递menu值 **/ class App extends Component { state = { headerMenu : '', sliderMenu : '' } selHeader(menu,slider){ this.setState({headerMenu: menu,sliderMenu : slider}); } render() { var h = document.documentElement.clientHeight || document.body.clientHeight; var mainStyle = { height:h-60, overflowY:'auto' }; return ( <div> <Layout> <HeaderMenu selHeadrMenu={(menu,slider)=>this.selHeader(menu,slider)}></HeaderMenu> <div className='app-content' style={mainStyle}> <div className='app-left-menu'> <HomeMenu sliderMenu={this.state.headerMenu} sliderLeftMenu={this.state.sliderMenu}></HomeMenu> </div> <div className='app-right-menu'> <div style={{width:'75%'}}> <RouteConfig></RouteConfig> </div> {/*右侧快捷菜单*/} <div className='app-right-left-content'> <div className='item-title'> 最近更新 </div> <div className='item-value'> <Icon type="file" />xxxxxxxxxxx </div> <div className='item-value'> <Icon type="file" />xxxxxxxxxxx </div> <div className='item-value'> <Icon type="file" />xxxxxxxxxxx </div> </div> </div> <div style={{clear:'both'}}></div> </div> </Layout> </div> ); } } export default App;
- menu.js部分
import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import { Icon } from 'antd'; import './homeMenu.css' /** * 0、获取和传递组件值,用props * 1、 */ class HomeMenu extends Component { state = { sliderMenu : '' } selSilder(silder) { this.setState({sliderMenu: silder}); //保存选中的位置记录 localStorage.setItem("silderMenu", silder); } initState(){ let silder = localStorage.getItem("silderMenu"); this.setState({sliderMenu: silder ? silder : 'home'}); } render() { return ( <div style={{textAlign:'left',marginLeft:'70px'}}> {this.props.sliderMenu === 'menu1' && <ul className='menu-ul'> <Link to="/" className={this.state.sliderMenu === 'home' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('home')}> <li> <Icon type="home" className='menu-ul-icon'/>IT技术 </li> </Link> <Link to="/photography" className={this.state.sliderMenu === 'photography' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('photography')}> <li> <Icon type="home" className='menu-ul-icon'/>摄影、游记 </li> </Link> <Link to="/music" className={this.state.sliderMenu === 'music' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('music')}> <li> <Icon type="home" className='menu-ul-icon'/>音乐笔记 </li> </Link> </ul>} {this.props.sliderMenu === 'menu2' && <ul className='menu-ul'> <Link to="/Home2" className={this.state.sliderMenu === 'home2' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('home2')}> <li> <Icon type="home" className='menu-ul-icon'/>主页2 </li> </Link> <Link to="/About2" className={this.state.sliderMenu === 'about2' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('about2')}> <li> <Icon type="home" className='menu-ul-icon'/>关于我们2 </li> </Link> <Link to="/News2" className={this.state.sliderMenu === 'news2' ? 'color-a5a5a5 font-size12 menu-active' : 'color-a5a5a5 font-size12'} onClick={() => this.selSilder('news2')}> <li> <Icon type="home" className='menu-ul-icon'/>新闻页面2 </li> </Link> </ul>} </div> ); } //DOM加载完成后执行,同上面的注释 componentDidMount() { this.initState(); } componentWillReceiveProps(){ this.initState(); } } export default HomeMenu
- header.js
import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import './header.css'; class HeaderMenu extends Component { state = { headActive:'menu1' }; selMenu(menu,silder){ /** * 获取和传递组件值,用props * 流程为:header选中后,得到相应的值,通知父组件Appjs作出改变---->切换到Appjs中查看 * this.props.selHeadrMenu:表示向父组件Appjs的函数selHeadrMenu传递相关值 * this.setState({headActive: menu}):修改state的headActive选中值 */ this.props.selHeadrMenu(menu,silder); this.setState({headActive: menu}); //保存header选中的位置记录 localStorage.setItem("headerMenu",menu); localStorage.setItem("silderMenu",silder); } render() { return ( <div className='head-class'> <div className='head-logo text-center'> logo </div> <div className='head-menu-main'> <div className='head-menu-item'> <Link to="/" > <span className={this.state.headActive === 'menu1' ? 'head-active head-menu-child-item' : 'head-menu-child-item'} onClick={() => this.selMenu('menu1','home')}> 菜单一 </span> </Link> <Link to="/home2"> <span className={this.state.headActive === 'menu2' ? 'head-active head-menu-child-item' : 'head-menu-child-item'} onClick={() => this.selMenu('menu2','home2')}> 菜单二 </span> </Link> </div> <div style={{position:'absolute',right:'20px',top:'0px',color:'#a5a5a5'}}> admin </div> </div> <div style={{clear:'both'}}></div> </div> ); } //DOM加载完成后执行,同上面的注释 componentDidMount() { let menu = localStorage.getItem("headerMenu"); let silder = localStorage.getItem("silderMenu"); this.props.selHeadrMenu(menu ? menu : 'menu1',silder ? silder : 'home'); this.setState({headActive: menu ? menu : 'menu1'}); } } export default HeaderMenu
总结
主要代码部分为以上4个文件,其实很简单,具体github地址:
https://github.com/522011796/...
相关推荐
wwzaqw 2020-09-04
游走的豚鼠君 2020-11-10
81417707 2020-10-30
ctg 2020-10-14
小飞侠V 2020-09-25
PncLogon 2020-09-24
jipengx 2020-09-10
颤抖吧腿子 2020-09-04
maple00 2020-09-02
青蓝 2020-08-26
罗忠浩 2020-08-16
liduote 2020-08-13
不知道该写啥QAQ 2020-08-02
pengruiyu 2020-08-01
wmd看海 2020-07-27
孝平 2020-07-18
Eduenth 2020-07-05
iftrueIloveit 2020-07-04