react hook仿造掘金博客项目

[

“import”,

{

“libraryName”: “antd”,

“style”: “css”

}

],

],

“presets”: [

“react-app”

]

}

}

6. 然后移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’; 直接引入组件使用就会有对应的css

import { Button } from ‘antd’;

Primary

添加路由表

---

我们先在router/router.js 写好我们的路由表

import Root from ‘pages/App’

import Home from ‘pages/Home’

import Test from ‘pages/Home/test’

import Detail from ‘pages/Detail’

const routes = [

{

path: ‘/’,

label: ‘首页’,

exact: true,

component: Root

},

{

path: ‘/detail’,

label: ‘书籍’,

component: Detail

},

{

path: ‘/home’,

label: ‘书籍’,

component: Home,

routes: [

{

path: ‘/home/test’,

label: ‘书籍test’,

component: Test

}

]

},

]

export default routes

安装 react-router-config

npm install --save react-router-config

在index.js中引入并且使用

import ReactDOM from ‘react-dom’;

// import ‘antd/dist/antd.css’;

import { BrowserRouter as Router } from ‘react-router-dom’;

import routes from ‘router/router.js’

import { renderRoutes } from ‘react-router-config’

console.log(routes);

console.log(renderRoutes(routes));

ReactDOM.render(

{renderRoutes(routes)}

, document.getElementById(‘root’)

);

需要注意的是，Home有嵌套路由，则需要在Home中再写一遍renderRoutes，并且 renderRoutes(routes)的routes是在props中获取的，即应该写成renderRoutes(props.route.routes)。

import { Button } from “antd”

import { renderRoutes } from ‘react-router-config’

function Home(props: any) {

console.log(props);

const { routes } = props.route

return (

Home

{

renderRoutes(routes)

}

);

}

export default Home;

这样就实现了

按需加载组件

---

安装 react-loadable

npm i react-loadable @type/react-loadable

使用方式，官方文档已经给出

根据例子创建LoadableComponent.tsx文件

import * as React from ‘react’;

import Loadable from ‘react-loadable’;

import {LoadingComponentProps} from ‘react-loadable’;

import {PageLoading} from ‘components/Loading’;

function Loading(props: LoadingComponentProps) {

if (props.error) {

return “Error! Component failed to load”;

} else {

return ;

}

}

const LoadableComponent = (component: any) => Loadable({

loader: component,

loading: Loading,

});

export default LoadableComponent;

其中components/Loading

// components/Loading

import { Spin } from ‘antd’;

import ‘./style.less’;

export function PageLoading() {

return

;

}

//./style.less

.m-page-loading {

text-align: center;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

现在就可以引入 router/router.js中引用

// import Root from ‘pages/App’

// import Home from ‘pages/Home’

import Test from ‘pages/Home/test’

import Detail from ‘pages/Detail’

import LoadableComponent from ‘LoadableComponent’;

const routes = [

{

path: ‘/’,

label: ‘首页’,

exact: true,

component: LoadableComponent(() => import(‘pages/App’)),

},

{

path: ‘/detail’,

label: ‘书籍’,

component: Detail

},

{

path: ‘/home’,

label: ‘书籍’,

component: LoadableComponent(() => import(‘pages/Home’)),

routes: [

{

path: ‘/home/test’,

label: ‘书籍test’,

component: Test

}

]

},

]

export default routes

我们这里Home 使用了按需加载模式，Detail没有，来试一下有没有成功

Home

import { Button } from “antd”

import { renderRoutes } from ‘react-router-config’

console.log(“home”);

function Home(props: any) {

const { routes, } = props.route

console.log(props);

return (

Home

{

renderRoutes(routes)

}

);

}

export default Home;

在Home和Detail文件加个console.log看看。

发现只打印了detail，没打印home，说明按需加载成功。

创建reset.less文件

---

/**

• Global Reset of all HTML Elements

• Resetting all of our HTML Elements ensures a smoother

• visual transition between browsers. f you don’t believe me,

• try temporarily commenting out this block of code, then go

• and look at Mozilla versus Safari, both good browsers with

• a good implementation of CSS. The thing is, all browser CSS

• defaults are different and at the end of the day if visual

• consistency is what we’re shooting for, then we need to

• make sure we’re resetting all spacing elements.

*/

html,

body {

border: 0;

font-family: “Helvetica-Neue”, “Helvetica”, Arial, sans-serif;

line-height: 1.5;

margin: 0;

padding: 0;

}

div,

span,

object,

iframe,

img,

table,

caption,

thead,

tbody,

tfoot,

tr,

td,

article,

aside,

canvas,

details,

figure,

hgroup,

menu,

nav,

footer,

header,

section,

summary,

mark,

audio,

video {

border: 0;

margin: 0;

padding: 0;

}

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

address,

code,

del,

dfn,

em,

ins,

q,

samp,

small,

strong,

sub,

sup,

b,

i,

hr,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

legend,

label {

border: 0;

font-size: 100%;

vertical-align: baseline;

margin: 0;

padding: 0;

}

article,

aside,

canvas,

figure,

figure img,

figcaption,

hgroup,

footer,

header,

nav,

section,

audio,

video {

display: block;

}

table {

border-collapse: separate;

border-spacing: 0;

caption,

th,

td {

text-align: left;

vertical-align: middle;

}

}

a img {

border: 0;

}

// project custom

• {

word-break: break-all;

}

h2 {

font-size: 28px;

margin-bottom: 35px;

}

h3 {

font-size: 24px;

margin-bottom: 20px;

}

h4 {

font-size: 20px;

margin-bottom: 10px;

}

h5 {

font-size: 16px;

margin-bottom: 6px;

}

/* scrollbar */

::-webkit-scrollbar {

width: 8px;

height: 8px;

background: transparent;

z-index: 999;

}

::-webkit-scrollbar-track {

//background: #31a0ee;

}

::-webkit-scrollbar-thumb {

background: rgba(144, 147, 153, 0.3);

border-radius: 4px;

}

#root {

height: 100vh;

min-height: 100vh;

}

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总