react short book project

Header

For fear of style conflicts among components, install the following for management

npm install styled-components

First, change index.css to style.js. If you want to set global variables, such as reset, then

import {injectGlobal} from 'styled-components';

injectGlobal`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
`;

style.js under Header

import styled from 'styled-components';
import logoPic from '../../static/logo.png';  //The picture should be introduced in this way

export const HeaderWrapper = styled.div`
    position:relative;
    height: 56px;
    border-bottom:1px solid #f0f0f0;
`

export const Logo = styled.a.attrs({
    href:'/'
})`   //You can add attributes to a label
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 56px;
    width:100px;
    background: url(${logoPic});  //Picture reference
    background-size: contain;
`

NavItem has different styles

export const NavItem = styled.div`
    &.left {
        float: left;
    }
    &.right {
        float: right;
    }
`

box-sizing: border-box;

Any inner margins and borders specified for the element will be drawn within the set width and height

Change the style of the properties below the component, placeholder, &: placeholder

export const NavSearch = styled.input.attrs({
    placeholder: 'search'
})`
    width: 160px;
    height: 38px;
    margin-top: 9px;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    border-radius: 19px;
    outline:none;
    background: #eee;
    font-size: 14px;
    margin-left:20px;
    &::placeholder{
        color: #999;
    }
`

state is immutable

npm install immutable

import {fromJS} from 'immutable';

{fromJS} change js object into immutable object

const defaultState = fromJS({
    focused: false,
});

At this time, if you change the state through dispatch, you will get an error, thinking that the state is already an immutable object. You need to use the following methods

if(action.type === constants.SEARCH_FOUCUS){
    return state.set('focused',true);
}

The set method of immutable will return a new object in combination with the immutable object and the set value, without changing the original data.

npm install redux-immutable
import {combineReducers} from 'redux-immutable';

const mapStateToProps = (state) => {
    return{
        focused: state.get('header').get('focused'),
    }
}

To change it to state.get('header').get('focused') because the header has become an immutable object, you need to get it with get()
Equivalent to focused: state.getIn(['header','focused '])

Getting ajax data

npm install redux-thunk axios

Page part

Route

npm install react-router-dom

import {BrowserRouter, Route} from 'react-router-dom';
<BrowserRouter>
     <div>
        <Route path='/' exact render={()=><div>home</div>}></Route>
        <Route path='/detail' exact render={()=><div>detail</div>}></Route>
     </div>
</BrowserRouter>

Exact means the exact path

Change {Component} to {PureComponent}

{PureComponent} automatically has the shouldComponentUpDate() method to improve performance. The premise of using is that the project uses immutable.js to manage data. If not, it will encounter problems.

Load the code for each page separately

npm install react-loadable

Posted by comicrage on Sat, 04 Jan 2020 02:42:24 -0800

Programmer Group