react學習筆記一-----react前端框架的初步搭建

時間 2020-05-05

標籤 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