1. We introduced index.css in index.js, set the class name in the CSS file to a dom in App.js, and found that style worked, but we did not introduce it in app.js.

Reason: Once a css file is introduced in a file, it is globally valid.

So there's a problem with writing CSS like this: one page has a lot of content, one page has a lot of css, and the other page has a lot of css, all of which were introduced into the CSS file, which may cause a conflict of Css styles in the two files.

Solution: Usually a third-party module is used to help us eliminate this problem: styled-components.

• Installation: yarn add styled-components
• Place the style file in styled.js:

//styled-components require that createGlobalStyle be introduced when writing global styles
import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    background: green;
  }
`

• Introduction in App.js

import React from 'react';
import { GlobalStyle } from './styled.js';

function App() {
  return (
    <div>
      <GlobalStyle />
      111
    </div>
  );
}

export default App;

Now the body part turns green.

Purpose of joining reset.css: Many browsers have different default styles, such as margin and padding values

 

2. How to set the background picture reference path using styled-components

import logoPic from '../../statics/logo.png';  //This syntax allows webpack to automatically find this picture and package it into this file

export const Logo = styled.a.attrs({  //You can also set href="/" for Logo when it is used directly
  href: '/'
})`
  display: inline-block;
  height: 56px;
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(${logoPic});
  background-size: contain;
`

 

3. How to add class names to style components

• Style Component

• styles.js:

export const NavItem = styled.div`
  line-height: 56px;
  padding: 0 15px;
  font-size: 17px;
  color: #333
  &.left {   //&Represents the current component
    float: left;
  }
  &.active {
    color: #ea6f5a;
  }
  &.right {
    float: right;
    color: #969696;
  }
`

4. How to style the placeholder font of input separately

• styles.js

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

 

5. Use combineReducers to complete data split management

When a project is very large, there must be a lot of code in reducer, which is very inconvenient to maintain.You can use combineReducers to help us manage reduver code by breaking it into smaller pieces.

• A store folder is also created in the subcomponents, where all files except index.js are not written, and then reducer in the outermost store introduces the reducer of the subcomponents, merges them, and exports them.Outermost reducer.js:

import { combineReducers } from 'redux';   //Integrate small reducer s
import {Reducer as headReducer} from '../common/header/store/index';

const reducer =  combineReducers({
  header: headReducer
})

export default reducer;

 

6. Benefits of import * as actionCreators from'. /actionCreators'

In this case, we only need to call the methods inside each time, instead of introducing each one, to improve the efficiency of development.

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputFocus() {
      dispatch(actionCreators.getHandleInputFocus());
    },
    handleInputBlur() {
      dispatch(actionCreators.getHandleInputBlur());
    }
  }
}

 

7. It is recommended to introduce actionTypes, reducer, actionCreators into index.js and export them through index.js so that they can be used externally by simply introducing index.js instead of one by one.

import Reducer from './reducer';
import * as constants from './actionTypes';
import * as actionCreators from './actionCreators';

export { Reducer, constants, actionCreators };

 

8. Use Immutable.js to manage data in store s

React stipulates that you can't change the state directly, so to avoid changing the state during use, facebook introduced Immutable.js.

Immutable.js can help us generate an Immutable object that is immutable.We just need to make the state an Immutable object.

• Install Immutable.js:yarn add immutable
• reducer.js:

import * as constants from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({  //Convert state to an immutable object
  focused: false,
});

export default (state = defaultState, action) => {
  switch(action.type) {
    case constants.SEARCH_FOCUS:
      return state.set('focused', true)  
      //Immutable cannot be changed, but its set method combines the values of the previous immutable object with the values set.
      //Return an entirely new object
    case constants.SEARCH_BLUR:
        return state.set('focused', false)
    default:
      return state;
  }
}

• You can't get values inside a state like you did before, you should:

const mapStateToProps = (state) => {
  return {
    focused: state.header.get('focused'),  //immutable This object cannot be changed, but a get method is provided to get it
  }
}

 

9. Use redux-immutable unified data format

const mapStateToProps = (state) => {
  return {
    focused: state.header.get('focused'),  //immutable This object cannot be changed, but a get method is provided to get it
  }
}

This kind of get property above is actually inappropriate, because it is obtained by js object before it is obtained by installing immutable object.This is not very reliable. We want to unify it.We want state to be an immutable object too, so we need to help with redux-immutable.

• Install redux-immutable: yarn add redux-immutable
• Outer reducer.js:

import { combineReducers } from 'redux-immutable';
import {Reducer as headReducer} from '../common/header/store/index';

const reducer =  combineReducers({
  header: headReducer
})

export default reducer;

• Used in components:

const mapStateToProps = (state) => {
  return {
    focused: state.get('header').get('focused'),  
    // At this point the state also becomes an immutable object, which can also be written as state.getIn (['header','focused').
  }
}

10. Simulate fake data using features provided by create-react-app

Instead of using mockjs to simulate fake data, we can create an API folder under public with some fake data we simulated. We request a routing format of'/api/data.json'to simulate the data.Delete the API folder before going online.