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上下载查看。css
- 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
一、selHeaderMenu：同子组件headerjs进行通讯的函数，不须要在自身组件中定义，只须要在子组件中定义
二、子组件传递过来的menu值，经过selHeader函数进行改变
三、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
* 一、
*/
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/...vue
相关文章
- 1. React学习笔记（一）- 环境搭建
- 2. 前端框架 React
- 3. react框架学习一 环境搭建(create-react-app)
- 4. 前端框架学习react还是vue？
- 5. 学习react前端框架dva
- 6. 前端框架搭建-搭建vue环境(学习笔记）
- 7. React学习笔记——初识React Hooks篇
- 8. react初入学习笔记
- 9. React学习笔记一 ,初始环境搭建
- 10. React Native框架探索学习笔记
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi来袭
- 2. 机器学习-补充03 神经网络之**函数(Activation Function)
- 3. git上开源maven项目部署 多module maven项目（多module maven+redis+tomcat+mysql）后台部署流程学习记录
- 4. ecliple-tomcat部署maven项目方式之一
- 5. eclipse新导入的项目经常可以看到“XX cannot be resolved to a type”的报错信息
- 6. Spark RDD的依赖于DAG的工作原理
- 7. VMware安装CentOS-8教程详解
- 8. YDOOK：Java 项目 Spring 项目导入基本四大 jar 包 导入依赖，怎样在 IDEA 的项目结构中导入 jar 包 导入依赖
- 9. 简单方法使得putty（windows10上）可以免密登录树莓派
- 10. idea怎么用本地maven
欢迎关注本站公众号,获取更多信息
