diff --git a/13-React基础/06-React中与on相关的属性.md b/13-React基础/06-React的单向数据绑定.md similarity index 75% rename from 13-React基础/06-React中与on相关的属性.md rename to 13-React基础/06-React的单向数据绑定.md index bc17ccc..41f5dc1 100644 --- a/13-React基础/06-React中与on相关的属性.md +++ b/13-React基础/06-React的单向数据绑定.md @@ -58,7 +58,53 @@ Warning: Failed prop type: You provided a `value` prop to a form field without a ``` -绑定 onChange 的举例如下：（通过onChange方法，实现双向数据绑定） +**绑定 onChange 的举例如下**：（通过onChange方法，实现双向数据绑定） + +(1)index.html: + +```html + + + + + + + + Document + + + + +
+ + + + +``` + + +（2）main.js: + +```javascript +// 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）components/MyComponent.jsx ```javascript import React from "react"; @@ -103,3 +149,17 @@ export default class MyComponent extends React.Component { ``` +工程文件： + +- [2019-02-13-ReactDemo.zip]() + + + + + + + + + + + diff --git a/13-React基础/07-React路由的使用.md b/13-React基础/07-React路由的使用.md new file mode 100644 index 0000000..eb24489 --- /dev/null +++ b/13-React基础/07-React路由的使用.md @@ -0,0 +1,249 @@ + +## React路由的使用 + +使用React路由之前，我们需要先安装 `react-router-dom`这个包。比如： + +``` +yarn add react-router-dom +``` + +代码举例： + +（1）index.html + +```html + + + + + + + + Document + + + + +
+ + + + +``` + +（2）main.js： + +```javascript +// JS打包入口文件 +// 1. 导入包 +import React from "react"; +import ReactDOM from "react-dom"; + +import App from "./App.jsx"; + +// 使用 render 函数渲染 虚拟DOM +ReactDOM.render(, document.getElementById("app")); + +``` + +（3）app.jsx: + +```java +import React from "react"; + +// 如果要使用 路由模块，第一步，运行 yarn add react-router-dom +// 第二步，导入 路由模块 + +// HashRouter 表示一个路由的跟容器，将来，所有的路由相关的东西，都要包裹在 HashRouter 里面，而且，一个网站中，只需要使用一次 HashRouter 就好了； +// Route 表示一个路由规则， 在 Route 上，有两个比较重要的属性， path component +// Link 表示一个路由的链接 ，就好比 vue 中的 +import { HashRouter, Route, Link } from "react-router-dom"; + +import Home from "./components/Home.jsx"; +import Movie from "./components/Movie.jsx"; +import About from "./components/About.jsx"; + +export default class App extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + // 当 使用 HashRouter 把 App 根组件的元素包裹起来之后，网站就已经启用路由了 + // 在一个 HashRouter 中，只能有唯一的一个根元素 + // 在一个网站中，只需要使用 唯一的一次 即可 + return ( + +
+

这是网站的APP根组件

+
+ + 首页   + 电影   + 关于 +
+ + {/* Route 创建的标签，就是路由规则，其中 path 表示要匹配的路由，component 表示要展示的组件 */} + {/* 在 vue 中有个 router-view 的路由标签，专门用来放置，匹配到的路由组件的，但是，在 react-router 中，并没有类似于这样的标签，而是 ，直接把 Route 标签，当作的 坑（占位符） */} + {/* Route 具有两种身份：1. 它是一个路由匹配规则； 2. 它是 一个占位符，表示将来匹配到的组件都放到这个位置 */} + +
+ +
+ +
+ + ); + } +} + +``` + +（4）ReactDemo/src/components/Home.jsx + +```java +import React from "react"; + +export default class Home extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return
Home组件
; + } +} + +``` + +（5）ReactDemo/src/components/Movie.jsx + +```java + +import React from "react"; + +export default class Movie extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return
Movie组件
; + } +} + +``` + +（6）ReactDemo/src/components/About.jsx + +```java +import React from "react"; + +export default class About extends React.Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return
About组件
; + } +} + +``` + +运行结果： + +20190214_1000.png + +## 匹配路由参数 + +### 模糊匹配与精准匹配 + +我们在上面的代码中，进一步修改。假设 Movie 这个组件修改成这种路由匹配方式： + +```html +电影 + + + +``` + +上面这种匹配方式，也是可以成功匹配到的。这是为啥呢？ + +这是因为：默认情况下，路由中的匹配规则，是**模糊匹配**的。如果 路由可以部分匹配成功，就会展示这个路由对应的组件。 + +如果想让路由规则，进行**精确匹配**，可以为Route添加 `exact` 属性。比如下面这种写法，因为是开启了精准匹配，所以是匹配不到的：（无法匹配） + +```html +电影 + + +``` + + +另外，如果要匹配参数，可以在匹配规则中，使用 `:` 修饰符，表示这个位置匹配到的是参数。举例如下：（匹配正常） + +```html +电影   + + +``` + + +### 获取路由参数 + +继续修改上面的代码。如果我想在 Movie 组件中显示路由中的参数，怎么做呢？ + +我们可以通过 `props.match.params`获取路由中的参数。举例做法如下： + +app.jsx中的匹配规则如下： + + +```html +电影   + + +``` + + +Moivie 组件的写法如下： + +```java +import React from "react"; + +export default class Movie extends React.Component { + constructor(props) { + super(props); + this.state = { + routeParams: props.match.params // 把路由中的参数保存到 state 中 + }; + } + + render() { + console.log(this); + // 如果想要从路由规则中，提取匹配到的参数，进行使用，可以使用 this.props.match.params.*** 来访问 + return ( +
+ {/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */} + Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id} +
+ ); + } +} + + +``` + +打印结果如下： + +20190214_1030.png + + +工程文件： + +2019-02-14-ReactDemo.zip + diff --git a/17-前端综合/2019年Web前端自学路线.md b/17-前端综合/2019年Web前端自学路线.md index fdc65c9..d3f4970 100644 --- a/17-前端综合/2019年Web前端自学路线.md +++ b/17-前端综合/2019年Web前端自学路线.md @@ -34,53 +34,14 @@ 十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：新手一般用 WebStorm，入门之后，用 VS Code 的人更多。 - -## 推荐的学习视频 - -> 我看过的学习视频，多的数不清。传智播客、尚硅谷、慕课网、极客学院等等，这些只是冰山一角。下面推荐一些。 - -温馨提示：不一定是从头到尾看，可以选择性地看。另外，要倍速播放，我一般是用1.5倍的速度播放。 - - -### 传智播客 - -传智黑马2018 Web前端全套： - -- 学习路线图： - -- 视频资源： - -- 官方视频库： - -PS：上面这三个链接，指向的的是同一个学习资源。 - -黑马的视频很新，可以找官方的QQ要配套的PPT和源码。 - - - -### 尚硅谷 - -尚硅谷 2018 Web前端全套： - -- 视频资源： - -- 官方视频库： - -PS：上面这两个链接，指向的的是同一个学习资源。 - -尚硅谷的视频里，讲JS语法和ES6的部分很不错。 - - ## 推荐的图文教程 -看视频还是比较花时间的，你也可以看看图文教程。我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是： +我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是： > 非常详细和贴心，你值得star。 - - ## 推荐的技术博客 - [阮一峰](http://www.ruanyifeng.com/blog/) @@ -91,10 +52,8 @@ PS：上面这两个链接，指向的的是同一个学习资源。 - 《[你不知道的JavaScript](https://book.douban.com/subject/26351021/)》 - 上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。 - - 《[网络是怎样连接的](https://book.douban.com/subject/26941639/)》 程序员面试的时候，经常会被问的一个问题是：“在浏览器的地址栏输入url，按下回车后，发生了什么？” @@ -103,15 +62,12 @@ PS：上面这两个链接，指向的的是同一个学习资源。 - - ## 推荐的链接 待更新。 - PS：今天先写到这里。本文内容不定期更新。 - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。