Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub
Forked from xyzdata/React Event.md
Created June 30, 2017 14:28
Show Gist options
  • Save xgqfrms-GitHub/e59f6eca03da7c1960013cc94e04e84f to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/e59f6eca03da7c1960013cc94e04e84f to your computer and use it in GitHub Desktop.
React Event
@xgqfrms-GitHub
Copy link
Author

Are you ready to start the test for Javascript Developer?

https://beta.hundred5.com/5MKYVRL629JOLMQSJ2/welcome

@xgqfrms-GitHub
Copy link
Author

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jul 1, 2017

ref={(input) => {return this.userNameInput = input;}}

this.userNameInput.value

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jul 1, 2017

GitHub API

https://api.github.com/users/xgqfrms

{
    "login": "xgqfrms",
    "id": 7291672,
    "avatar_url": "https://avatars1.githubusercontent.com/u/7291672?v=3",
    "gravatar_id": "",
    "url": "https://api.github.com/users/xgqfrms",
    "html_url": "https://github.com/xgqfrms",
    "followers_url": "https://api.github.com/users/xgqfrms/followers",
    "following_url": "https://api.github.com/users/xgqfrms/following{/other_user}",
    "gists_url": "https://api.github.com/users/xgqfrms/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/xgqfrms/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/xgqfrms/subscriptions",
    "organizations_url": "https://api.github.com/users/xgqfrms/orgs",
    "repos_url": "https://api.github.com/users/xgqfrms/repos",
    "events_url": "https://api.github.com/users/xgqfrms/events{/privacy}",
    "received_events_url": "https://api.github.com/users/xgqfrms/received_events",
    "type": "User",
    "site_admin": false,
    "name": "xgqfrms",
    "company": "xray",
    "blog": "https://www.xgqfrms.xyz",
    "location": "shanghai",
    "email": null,
    "hireable": true,
    "bio": "Hello World!",
    "public_repos": 202,
    "public_gists": 3,
    "followers": 28,
    "following": 1,
    "created_at": "2014-04-14T15:12:30Z",
    "updated_at": "2017-06-10T09:04:07Z"
}

test website

No CSP / CORS

https://cdn.xgqfrms.xyz/index.html

Fetch

fetch(`https://api.github.com/users/xgqfrms`)
.then(
    (response) => {
        console.log(`response`, response);
        let json = response.json();
        console.log(`json`, json);
        return json;
    }
)
.then(
    (data) => {
        console.log(`data`, data);
    }
);

Axios

Getting Started With Axios (Accessing REST Web Services HTTP APIs in JavaScript) [Full HD,1920x1080].mp4

axios.get(`https://api.github.com/users/xgqfrms`)
.then(
    res => {
        console.log(`response`, res);
        // no need response.json();
        return res;
    }
)
.then(
    (data) => {
        console.log(`data`, data);
    }
);

@xgqfrms-GitHub
Copy link
Author

React & Axios

axios.get(url)
.then(
    res => {
        console.log(`response =`, res);
        // no need response.json();
        this.props.onSubmit(res.data);
        console.log(`response.data = `, res.data);
        return res.data;
    }
);

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented Jul 1, 2017

React 单项数据流

将父组件的方法作为 props 传递给子组件使用,

子组件在自己的方法中调用 props 接收到的方法,并为其传递参数,从而执行父组件的方法,修改父组件的 state 值!

子组件不可以直接修改 父组件的 state !

image

@xgqfrms-GitHub
Copy link
Author

concat

concat

CSS3: High-level advice and guidelines

https://css3.webgeeker.xyz/

High-level advice and guidelines for writing sane, manageable, scalable CSS

https://cssguidelin.es/

https://react2.webgeeker.xyz/acknowledgements.html

3D GIS

https://gis.webgeeker.xyz/

https://xgqfrms.maps.arcgis.com/home/index.html

@xgqfrms-GitHub
Copy link
Author

@xgqfrms-GitHub
Copy link
Author

state = {
    cards: []
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment