diff --git a/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md b/00-前端工具/02-VS Code的使用.md similarity index 97% rename from 00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md rename to 00-前端工具/02-VS Code的使用.md index ccf44ff..f013a0f 100644 --- a/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md +++ b/00-前端工具/02-VS Code的使用.md @@ -1,6 +1,5 @@ - ## 前言 VS Code 的全称是 Visual Studio Code,是微软推出的一款免费的、开源的跨平台编辑器。 @@ -8,19 +7,15 @@ VS Code 的全称是 Visual Studio Code,是微软推出的一款免费的、 VS Code 是一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做的很不错。 - - ## 常用插件推荐 - -### Settings Sync +### Settings Sync - 地址: - 作用:多台设备之间,同步 VS Code 配置。[荐] - ### vscode-syncing -- - 地址: @@ -33,7 +28,6 @@ VS Code 是一款免费的、开源的、高性能的、跨平台的、轻量级 ## 常见主题推荐 - ## 常用快捷键 @@ -50,3 +44,4 @@ VS Code 是一款免费的、开源的、高性能的、跨平台的、轻量级 |**option + delete**|删除光标之前的一个单词|英文有效| |**command + delete**|删除光标之前的整行内容|【荐】| + diff --git a/00-前端工具/06-chrome浏览器.md b/00-前端工具/06-chrome浏览器.md new file mode 100644 index 0000000..fc665ba --- /dev/null +++ b/00-前端工具/06-chrome浏览器.md @@ -0,0 +1,26 @@ + + + +## 控制台的使用 + +### 控制台查看源码 + +控制台的`Sources`标签可以查看源码。按住快捷键「cmd + P」,可以根据文件名查找源码文件。 + + + +## 其他 + +### show user agent shadow DOM + +![](http://img.smyhvae.com/20180206_1610.png) + + +![](http://img.smyhvae.com/20180206_1616.png) + +把上图中的红框部分打钩。 + + + + + diff --git a/00-前端工具/chrome浏览器.md b/00-前端工具/chrome浏览器.md deleted file mode 100644 index 7846a24..0000000 --- a/00-前端工具/chrome浏览器.md +++ /dev/null @@ -1,15 +0,0 @@ - - -### show user agent shadow DOM - -![](http://img.smyhvae.com/20180206_1610.png) - - -![](http://img.smyhvae.com/20180206_1616.png) - -把上图中的红框部分打钩。 - - - - - diff --git a/13-React基础/01-React介绍.md b/13-React基础/01-React介绍.md index e114eb6..f43b843 100644 --- a/13-React基础/01-React介绍.md +++ b/13-React基础/01-React介绍.md @@ -1,13 +1,10 @@ - - ## 虚拟DOM和diff算法 > 在学习 React 之前,我们需要先了解两个概念:虚拟DOM、diff算法。 - ### 虚拟DOM **问题描述**: @@ -54,8 +51,6 @@ React内部已经帮我们实现了虚拟DOM,初学者掌握如何调用即可 - key:key这个属性,可以把 页面上的 DOM节点 和 虚拟DOM中的对象,做一层关联关系。 -如何对比两颗新旧 - ## React 介绍 ### React 是什么 @@ -72,7 +67,7 @@ React内部已经帮我们实现了虚拟DOM,初学者掌握如何调用即可 - Learn Once, Write Anywhere(支持客户端、服务器端渲染) -- 高效 +- 高效的DOM Diff算法,最小化页面重绘 - 单向数据流 @@ -96,6 +91,13 @@ React内部已经帮我们实现了虚拟DOM,初学者掌握如何调用即可 上方截图中,有一个特性是“Learn Once, Write Anywhere”。这里的 “Anywhere” 其实指的是两个地方:一个是浏览器端,一个是服务器端。后者指的是,**React支持在服务器端渲染页面**。 +### 生态介绍 + +- Vue生态:Vue + Vue-Router + Vuex + Axios + Babel + Webpack + +- React生态:React + React-Router + Redux + Axios + Babel + Webpack + + ## React 模块化、组件化 ### 模块 diff --git a/13-React基础/03-React组件(一):生命周期.md b/13-React基础/03-React组件(一):生命周期.md index 0b7c878..a4b3f33 100644 --- a/13-React基础/03-React组件(一):生命周期.md +++ b/13-React基础/03-React组件(一):生命周期.md @@ -88,7 +88,7 @@ React 生命周期的截图如下: ## 组件生命周期的执行顺序 -1、Mounting: +**1、Mounting**: - constructor() @@ -98,11 +98,11 @@ React 生命周期的截图如下: - componentDidMount() -2、Updating: +**2、Updating**: -- componentWillReceiveProps(nextProps) +- componentWillReceiveProps(nextProps):接收父组件传递过来的属性 -- shouldComponentUpdate(nextProps, nextState) +- shouldComponentUpdate(nextProps, nextState):一旦调用 setState,就会触发这个方法。方法默认 return true;如果 return false,后续的方法就不会走了。 - componentWillUpdate(nextProps, nextState) @@ -110,7 +110,7 @@ React 生命周期的截图如下: - componentDidUpdate(prevProps, prevState) -3、Unmounting: +**3、Unmounting**: - componentWillUnmount() diff --git a/13-React基础/04-React组件(二):常见属性和函数.md b/13-React基础/04-React组件(二):常见属性和函数.md index 7505678..16b11c7 100644 --- a/13-React基础/04-React组件(二):常见属性和函数.md +++ b/13-React基础/04-React组件(二):常见属性和函数.md @@ -485,7 +485,7 @@ export default class Counter extends React.Component { ``` -(2)main.js: +(2)main.js:(引入组件) ```javascript @@ -507,7 +507,7 @@ ReactDOM.render( ``` -(3)TestReceiveProps.jsx +(3)TestReceiveProps.jsx:(组件的定义) ```javascript import React from "react"; diff --git a/13-React基础/05-React中绑定this并给函数传参的几种方式.md b/13-React基础/05-React中绑定this并给函数传参的几种方式.md index 9315fc9..edf91a1 100644 --- a/13-React基础/05-React中绑定this并给函数传参的几种方式.md +++ b/13-React基础/05-React中绑定this并给函数传参的几种方式.md @@ -191,7 +191,9 @@ export default class MyComponent extends React.Component { 上方代码中,需要注意的是:当一个函数调用 bind 改变了this指向后,bind 函数调用的结果,有一个【返回值】,这个值,就是被改变this指向后的函数的引用。也就是说: bind 不会修改 原函数的 this 指向,而是改变了 “函数拷贝”的this指向。 -## 绑定 this 并给函数传参 的方式三:箭头函数 +## 绑定 this 并给函数传参 的方式三:箭头函数【荐】 + +第三种方式用得最多。 代码举例: diff --git a/13-React基础/07-React路由的使用.md b/13-React基础/07-React路由的使用.md index eb24489..f202440 100644 --- a/13-React基础/07-React路由的使用.md +++ b/13-React基础/07-React路由的使用.md @@ -247,3 +247,7 @@ export default class Movie extends React.Component { 2019-02-14-ReactDemo.zip +## 参考链接 + + + diff --git a/13-React基础/08-Ant Design的基本使用.md b/13-React基础/08-Ant Design的基本使用.md new file mode 100644 index 0000000..c906171 --- /dev/null +++ b/13-React基础/08-Ant Design的基本使用.md @@ -0,0 +1,135 @@ + +## andt 的介绍 + +Ant Design 是基于 React 实现,开发和服务于企业级后台产品。 + +### 支持环境 + +- 现代浏览器和 IE9 及以上(需要 polyfills)。 + +- 支持服务端渲染。 + +- [Electron](https://electronjs.org/) + + +### 相关链接 + +- 官方文档: + + +### 关于 Electron + +Electron(原名为Atom Shell)是GitHub开发的一个开源框架。 它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。 + +很多客户端软件都是基于 Electron 开发的。比如 VS Code。我们打开 VS Code 菜单栏的 “帮助 --> 切换开发人员工具”,就会看到类似于 chrome的调试工具。 + + +## andt 的使用 + + + +### 环境安装 + +``` +npm install antd --save +``` + +### 代码示例 + +我们需要什么组件,就导入该组件即可。 + + +(1)index.html: + +```html + + + + + + + + Document + + + + +
+ + + +``` + + +(2)main.js: + +```java +// JS打包入口文件 +// 1. 导入包 +import React from "react"; +import ReactDOM from "react-dom"; + +import MyComponent from "./components/MyComponent.jsx"; + +// 使用 render 函数渲染 虚拟DOM +ReactDOM.render(, document.getElementById("app")); + +``` + + + +(3)MyComponent.jsx: + +```java +import React from "react"; + +// 导入 日期选择组件 +import { DatePicker } from "antd"; + +export default class MyComponent extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( +
+

在组件中引入 andt

+ + +
+ ); + } +} + +``` + + +代码运行效果: + +20190217_1500.png + + +## AntD组件:表格 + + +`pagination`属性可以用来分页。 + + +### loading框 + +在数据显示之前,展示 loading;在数据显示之后,关闭loading。 + + +## 相关问题的链接 + +- 面包屑层级显示问题:https://github.com/ant-design/ant-design-pro/issues/1584 + + + + + + + + diff --git a/README.md b/README.md index 1519ad7..5edf1bc 100644 --- a/README.md +++ b/README.md @@ -17,12 +17,3 @@ 如果你发现本项目有内容上的错误,欢迎提交 issues 进行指正。 -### 学习交流 - -我建了一个“前端学习”的微信交流群,目前看来,群里的学习氛围很不错。加我微信(bootmei),拉你进群: - -- 进群暗号:前端学习 - -- 进群要求:热爱分享(长期潜水的,就不必了) - -