react学习笔记一-----react前端框架的初步搭建

前言

• 本人也是新手，刚开始研究学习react
• 初步搭建一个页面框架，没有用到特别高深的技术，其实是不会呀！哈哈
• 仅仅作为学习的记录，有写的不好的地方请见谅，如果有错误或者更好的建议可以留言，大家一起学习。
• 该笔记会不断更新，但是由于工作原因，可能更新的较慢，见谅。

正文

• 学习过程

就是官方文档、各种案例尝试写了一遍

• react配置和安装方式：create-react-app

采用的是create-react-app配置安装，并才考了一下文章进行初始化配置
文章地址：https://blog.csdn.net/Cress_zhang/article/details/80656707

代码环境

• 因为是第一次学习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(
    

        
            
                
                
            
        
    
    , 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 (
      

          
              this.selHeader(menu,slider)}>
              

                

                    
                
                

                    

                        
                    
                    {/*右侧快捷菜单*/}
                    

                        

                            最近更新
                        
                        

                            xxxxxxxxxxx
                        
                        

                            xxxxxxxxxxx
                        
                        

                            xxxxxxxxxxx
                        
                    
                
                

              
          
      
    );
  }
}
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 (
            

                {this.props.sliderMenu === 'menu1' &&
                    

                         this.selSilder('home')}>
                            

                                IT技术
                            
                        
                         this.selSilder('photography')}>
                            

                                摄影、游记
                            
                        
                         this.selSilder('music')}>
                            

                                音乐笔记
                            
                        
                    
}
                {this.props.sliderMenu === 'menu2' &&
                    

                         this.selSilder('home2')}>
                            

                                主页2
                            
                        
                         this.selSilder('about2')}>
                            

                                关于我们2
                            
                        
                         this.selSilder('news2')}>
                            

                                新闻页面2
                            
                        
                    
}
            
        );
    }

    //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 (
            

                

                    logo
                
                

                    

                        
                             this.selMenu('menu1','home')}>
                                菜单一
                            
                        

                        
                             this.selMenu('menu2','home2')}>
                                菜单二
                            
                        
                    
                    

                        admin
                    
                
                

            
        );
    }

    //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/react-demo