杰灵的博客

发表于 分类于

路由简介

React 中的路由可以理解为：根据浏览器中的 URL 匹配对应的资源。需要用到路由最常见的场景就是导航，根据不同的 url 展示不同的页面。

在 React 中，路由需要使用到两个组件 Router 和 Route ，其中一个 Route 包含多个 Router 组件 。结构如下：

阅读全文 »

发表于 分类于

axios简介

axios 是一个 JavaSctipt 的 http 客户端请求工具，同时也支持 Node.js 。axios 有以下特性：

  • 向浏览器发送异步请求(ajax请求)。
  • 支持 Promise API。
  • 可以对请求(request) 和 响应(response)进行拦截。
  • 可以将请求数据(request data) 和响应数据(response data)进行转换。
  • 支持取消请求。
  • 自动转换为 JSON 数据。
  • 支持多种浏览器：Chrome、FireFox、Safari、MicroSoft Edge、IE11(基本没人使用)
阅读全文 »

发表于 分类于

state

每个类组件上都有 state 属性，state属性表示对应组件的状态。state 的使用如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Person extends React.Component {
  constructor(props){
    super(props);
    this.state = {hide: false}
    this.modifyName = this.modifyName.bind(this);
  }

  render(){
    /*
    * 1. onClinck 不能写 onclick , React 封装过的点击事件，不是 html 的点击事件
    * 2.不能写 modifyName() 这种形式
    */
    return <h1 onClick={this.modifyName}>我的名字叫{this.state.hide ? '张三': '***'}</h1>;
  }

  modifyName(){
    const hide = this.state.hide;
    this.setState({hide: !hide})
  }
}
阅读全文 »

发表于 分类于

React的HelloWorld

使用任何语言都先来一个 HelloWorld 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
    </head>
    <body>
        <div id="test"></div>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>

        <script type="text/babel">
            const VDOM = <h1>Hello React!</h1>;
            ReactDOM.render(VDOM, document.getElementById("test"));
        </script>
    </body>
</html>
阅读全文 »

发表于 分类于

前言

我为什么要学 React

之前一直计划着和朋友一起开发一款基于 Netty 的推送系统，当时的计划是支持 WebSocket 的推送，很无奈我和他都是后端，这就导致 没有人做前端的工作。此时我就想着，自己能不能也学下前端，自己来开发。

阅读全文 »
0%