仿简书网站技术栈总结-练习

一、项目技术

1、适配PC半浏览器兼容样式                                              
https://meyerweb.com/eric/tools/css/reset/                  
2、引入依赖                                                      
yarn add redux                                              
yarn add styled-components                                  
yarn add react-redux                                        
yarn add redux-thunk                                        
yarn add immutable                                          
yarn add redux-immutable                                    
yarn add axios                                              
yarn add react-transition-group                             
yarn add react-router-dom                                   
yarn add react-loadable                                     
                                                            
3、发布注意                                                      
（1）package.json添加："homepage":"./",                          
（2）将BrowserRouter改为HashRouter                               

二、要点总结

1、index.js入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import {Provider} from 'react-redux'
import store from "./store";
import {GlobalStyle} from "./style";

ReactDOM.render(
        <Provider store={store}>
            <GlobalStyle/>
            <App/>
        </Provider>,
    document.getElementById('root')
);

2、App.js

import Header from "./common/header";
import React from "react";
import {HashRouter, Route} from "react-router-dom";
import Home from './pages/home'
import Detail from './pages/detail/loadable' //异步组件
import Login from './pages/login'
import Write from './pages/write'

function App() {
    return (
        <div>
            <HashRouter>
                <div>
                    <Header/>
                    <Route path={'/'} exact component={Home}></Route>
                    <Route path={'/detail/:id'} component={Detail}></Route>
                    <Route path={'/login'} component={Login}></Route>
                    <Route path={'/write'} component={Write}></Route>
                </div>
            </HashRouter>
        </div>
    );
}

export default App;

3、style.js

import {createGlobalStyle} from 'styled-components'

/**
 * https://meyerweb.com/eric/tools/css/reset/
 **/
export const GlobalStyle = createGlobalStyle`
    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;
}
`

4、项目结构

5、效果图