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 [email protected] --dev 安装 webpack ，新建webapck.config.js
新建 src/app.js 随便在app.js 中写点东西 执行命令： node_modules/.bin/webpack ;
yarn add [email protected] --dev
yarn add [email protected] [email protected] [email protected] --dev
yarn add [email protected] --dev
yarn add [email protected] [email protected]
yarn add [email protected] [email protected] --dev
yarn add [email protected] --dev
yarn add [email protected] --dev
yarn add [email protected] --dev
yarn add [email protected] [email protected] --dev
在webpack.config.js 文件中添加
{
"name": "reactAdmin",
"version": "1.0.0",
"main": "index.js",
"repository": "[email protected]:xiajibaguo/reactAdmin.git",
"author": "郑宏扬 <[email protected]>",
"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 [email protected] --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 = [email protected] [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文件中要对字体进行处理
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 [email protected]
19. react 使用 bootstrap 与 font-awesome 直接在index.html 下引用cdn的源文件就行，所以之前安装的font-awesome卸载掉
yarn remove font-awesome
20. jsx 文件注释用 {/* .... */}