021--自找麻烦之 react

1. 页面加载过程： url解析-dns解析-资源请求-浏览器解析

2. url结构： 协议 + 域名 + 端口 + 路径 + 参数 + 哈希 （前端页面的锚点，如#title）

3. dns查询： 浏览器--dns缓存+dns服务器

4. dns-prefetch：有指定如下rel就可以主动缓存该url对应的ip地址（优化性能）

<link rel="dns-prefetch" href="//cdn.bootcss.com">

5. 资源请求： 浏览器（携带信息：请求头+参数（url或body））--后端服务器（返回：状态+ 响应头+ body）

6. 浏览器解析： DOM（js执行）-- 构建渲染树 -- 布局 -- 绘制

7. nodejs的偶数版本才是稳定版，奇数版本是测试版

8. Yarn 替代 npm ：速度快，版本锁定，缓存机制 

        npm i yarn -g

9. 在项目目录： yarn init   生成 package.json   , yarn add webpack@3.10.0 --dev  安装 webpack ，新建webapck.config.js

const path = require('path');

 

module.exports = {

entry: './src/app.js',

output: {

path: path.resolve(__dirname,'dist'),

filename: 'app.js'

}

}

新建 src/app.js 随便在app.js 中写点东西  执行命令： node_modules/.bin/webpack  ;

 

yarn add html-webpack-plugin@2.30.1 --dev

yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev

yarn add babel-preset-react@6.24.1 --dev

 

yarn add react@16.2.0 react-dom@16.2.0

yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

yarn add extract-text-webpack-plugin@3.0.2 --dev

yarn add sass-loader@6.0.6 --dev

yarn add node-sass@4.7.2 --dev

yarn add file-loader@1.1.6 url-loader@0.6.2 --dev

在webpack.config.js 文件中添加

{
  "name": "reactAdmin",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@gitee.com:xiajibaguo/reactAdmin.git",
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "dist": "node_modules/.bin/webpack -p" 
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "react": "16.2.0",
    "react-dom": "16.2.0"
  }
}

继续执行 node_modules/.bin/webpack

使用 webpack-dev-server 

 

yarn add webpack-dev-server@2.9.7 --dev

node_modules/.bin/webpack-dev-server

在package.json中配置完scripts后就 可以用 yarn run dev   yarn run dist

10. mac本地电脑安装完git后，要配置 .gitconfig 文件

        git --version  ， vim ~/.gitconfig 

[user]
	name = 郑
	email = zhenghongyang@dayugame.net
[alias]      // 这里配置命令的简写
	co = checkout
	br = branch
	ci = commit
	st = status
        pl = pull
        ps = push
        dt = difftool
        ca = commit -am

11. 本地电脑拉取git仓库后添加.gitignore文件

.DS_Store
node_modules
dist
*.log

 

12. font-awesome 一套绝佳的字体库

yarn add font-awesome

webpack.config.js文件中要对字体进行处理

{

test: /\.(eot|svg|ttf|woff|woff2|otf)$/,

use: [

{

loader:'url-loader',

options:{

limit: 8192

}

}

]

}

13. 用create-react-app 来构建一个react 项目

yarn global add create-react-app

create-react-app react-test

cd react-test

yarn start

执行 yarn eject 会把项目的配置文件夹暴露出来

 实践过，不好用，有点bug，不推荐使用

14.  终端执行 open .  就会打开当前文件目录

15. git 为了完整可用版本带标签： 

 

git tag tag-initial

git push origin tag-initial

16. 常见 Router ： 页面Router  ，Hash Router ，H5 Router

17. 页面路由--整个页面重新加载，

window.location.href = "http:www.baidu,com";

回退用： history.back();

哈希路由--就是在url后面加"#test"类似这种东西，页面不刷新，只是一种状态

window.location.href = "#test";

window.onhashchange = function (){   // 这个函数用来监听哈希值的变化，一变就触发
  console.log('current hash:',window.location.hash)
}

        H5路由 也是不刷新页面的

history.pushState('test','Title','/user/index')

history.replaceState('test','Title','/user/index')

window.onpopstate = function(){
  console.log(window.location.href);
  console.log(window.location.pathname);
  console.log(window.location.hash);
  console.log(window.location.search);
}

18. React-Router  : browserRouter 和 hashRouter 两种

 

yarn add react-router-dom@4.2.2

 

19. react 使用 bootstrap 与 font-awesome 直接在index.html 下引用cdn的源文件就行，所以之前安装的font-awesome卸载掉

 

 

yarn remove font-awesome

20. jsx 文件注释用 {/*  ....  */}