ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

react@0.14: add deprecation warning

This commit is contained in:
Rico Sta. Cruz 2017-10-03 01:57:50 +08:00
parent dbe4dc8651
commit 837b2d2590
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
2 changed files with 120 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
ansible-modules.md
View File

@ -1,71 +1,99 @@
--- ---
title: Ansible modules title: Ansible modules
category: Ansible category: Ansible
layout: 2017/s##heet
--- ---
### Aptitude ### Aptitude
- apt_key: id=AC40B2F7 url="http://..." ```yml
state=present - apt_key: id=AC40B2F7 url="http://..."
state=present
```
- apt: pkg=nodejs state=present ```yml
state=present # absent | latest - apt: pkg=nodejs state=present
update_cache=yes state=present # absent | latest
force=no update_cache=yes
force=no
```
- apt: deb=https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb ```yml
- apt: deb=https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb
```
- apt_repository: repo='deb https://... raring main' ```yml
state=present - apt_repository: repo='deb https://... raring main'
state=present
```
### file ### file
- file: ```yml
state=directory # file | link | hard | touch | absent - file:
path=/etc/dir state=directory # file | link | hard | touch | absent
owner=bin path=/etc/dir
group=wheel owner=bin
mode=0644 group=wheel
recurse=yes # mkdir -p mode=0644
force=yes # ln -nfs recurse=yes # mkdir -p
force=yes # ln -nfs
```
- copy: ```yml
src=/app/config/nginx.conf - copy:
dest=/etc/nginx/nginx.conf src=/app/config/nginx.conf
dest=/etc/nginx/nginx.conf
```
- template: ```yml
src=config/redis.j2 - template:
dest=/etc/redis.conf src=config/redis.j2
dest=/etc/redis.conf
```
### git ### git
- git: repo=git://github.com/ ```yml
dest=/srv/checkout - git: repo=git://github.com/
version=master dest=/srv/checkout
depth=10 version=master
bare=yes depth=10
bare=yes
```
### user ### user
- user: state=present name=git ```yml
system=yes - user: state=present name=git
shell=/bin/sh system=yes
comment="Git Version Control" shell=/bin/sh
groups=admin
comment="Git Version Control"
```
### service ### service
- service: name=nginx state=started [enabled=yes] ```yml
- service: name=nginx state=started [enabled=yes]
```
### shell ### shell
- shell: apt-get install nginx -y ```yml
- script: /x/y/script.sh - shell: apt-get install nginx -y
- script: /x/y/script.sh
```
### local_action ### local_action
- name: do something locally ```yml
local_action: shell echo hello - name: do something locally
local_action: shell echo hello
```
### debug ### debug
- debug: ```yml
msg: "Hello {{ var }}" - debug:
msg: "Hello {{ var }}"
```

91
react@0.14.md
View File

@ -1,14 +1,15 @@
--- ---
title: React.js (v0.14) title: React.js (v0.14)
category: React category: React
layout: default-ad layout: 2017/sheet
deprecated: true deprecated: true
intro: |
**Deprecated:** this guide targets an old version of React (v0.14). See the [updated React cheatsheet](react) for new versions.
--- ---
{%raw%} {%raw%}
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)) ### Components
{:.brief-intro.center}
```js ```js
var Component = React.createClass({ var Component = React.createClass({
@ -23,9 +24,9 @@ ReactDOM.render(<Component name="John" />, document.body);
``` ```
{:.light} {:.light}
## Nesting Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
{:.center} ### Nesting
```js ```js
var UserAvatar = React.createClass({...}); var UserAvatar = React.createClass({...});
@ -44,11 +45,13 @@ var Info = React.createClass({
}); });
``` ```
Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
## States & Properties ## States & Properties
Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
{:.center} {:.center}
### States and props
```html ```html
<MyComponent fullscreen={true} /> <MyComponent fullscreen={true} />
``` ```
@ -72,8 +75,10 @@ render: function () {
} }
``` ```
Use [props](https://facebook.github.io/react/docs/tutorial.html#using-props) (`this.props`) to access parameters passed from the parent.
Use [states](https://facebook.github.io/react/docs/tutorial.html#reactive-state) (`this.state`) to manage dynamic data.
### Setting defaults ### Setting defaults
Pre-populates `this.state.comments` and `this.props.name`.
```js ```js
React.createClass({ React.createClass({
@ -87,10 +92,11 @@ React.createClass({
); );
``` ```
## Component API Pre-populates `this.state.comments` and `this.props.name`.
These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html). ## Components
{:.center}
### Component API
```js ```js
ReactDOM.findDOMNode(c) // 0.14+ ReactDOM.findDOMNode(c) // 0.14+
@ -115,8 +121,9 @@ c.replaceProps({ ... }) // for deprecation
c.refs c.refs
``` ```
These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
### Component specs ### Component specs
Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
| Method | What | | Method | What |
| ---- | ---- | | ---- | ---- |
@ -131,19 +138,19 @@ Methods and properties you can override. See [component specs](http://facebook.g
| [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX | | [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX |
{:.greycode.no-head} {:.greycode.no-head}
Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
## Lifecycle ## Lifecycle
### Mounting ### Mounting
Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).
| `componentWillMount()` | Before rendering (no DOM yet) | | `componentWillMount()` | Before rendering (no DOM yet) |
| `componentDidMount()` | After rendering | | `componentDidMount()` | After rendering |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
<br> Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).
### Updating ### Updating
Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
| `componentWillReceiveProps`*(newProps={})* | Use `setState()` here | | `componentWillReceiveProps`*(newProps={})* | Use `setState()` here |
| `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false | | `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false |
@ -151,24 +158,18 @@ Called when parents change properties and `.setState()`. These are not called fo
| `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here | | `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
<br> Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
### Unmounting ### Unmounting
Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
| `componentWillUnmount()` | Invoked before DOM removal | | `componentWillUnmount()` | Invoked before DOM removal |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
<style> Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
table.lc { table-layout: fixed; }
table.lc tr>:nth-child(1) { width: 50%; }
table.lc tr>:nth-child(2) { text-align: right; }
</style>
<br> ## Examples
### Example: loading data ### Example: loading data
See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
```js ```js
React.createClass({ React.createClass({
@ -184,10 +185,11 @@ React.createClass({
}); });
``` ```
See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
## DOM nodes ## DOM nodes
### References ### References
Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
```html ```html
<input ref="myInput"> <input ref="myInput">
@ -216,8 +218,9 @@ handleChange: function(event) {
} }
``` ```
Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
### Two-way binding ### Two-way binding
Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
```html ```html
Email: <input type="text" valueLink={this.linkState('email')} /> Email: <input type="text" valueLink={this.linkState('email')} />
@ -234,10 +237,11 @@ React.createClass({
this.state.email this.state.email
``` ```
Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
## Property validation ## Property validation
### Basic types ### Basic types
Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
```js ```js
React.createClass({ React.createClass({
@ -251,9 +255,9 @@ React.createClass({
} }
}); });
``` ```
Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
### Required types ### Required types
Add `.isRequired`.
```js ```js
propTypes: { propTypes: {
@ -261,8 +265,9 @@ propTypes: {
requiredAny: React.PropTypes.any.isRequired, requiredAny: React.PropTypes.any.isRequired,
``` ```
Add `.isRequired`.
### React elements ### React elements
Use `.element`, `.node`.
```js ```js
propTypes: { propTypes: {
@ -271,8 +276,9 @@ propTypes: {
// ...or array of those // ...or array of those
``` ```
Use `.element`, `.node`.
### Enumerables ### Enumerables
Use `.oneOf`, `.oneOfType`.
``` ```
propTypes: { propTypes: {
@ -282,8 +288,9 @@ propTypes: {
React.PropTypes.number ]), React.PropTypes.number ]),
``` ```
Use `.oneOf`, `.oneOfType`.
### Arrays and objects ### Arrays and objects
Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
```js ```js
propTypes: { propTypes: {
@ -300,8 +307,9 @@ propTypes: {
}), }),
``` ```
Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
### Custom validation ### Custom validation
Supply your own function.
```js ```js
propTypes: { propTypes: {
@ -313,10 +321,11 @@ propTypes: {
} }
``` ```
Supply your own function.
## Other features ## Other features
### Class set ### Class set
Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
```js ```js
var cx = require('classnames'); var cx = require('classnames');
@ -332,8 +341,9 @@ render: function() {
} }
``` ```
Manipulate DOM classes with [classnames](https://www.npmjs.org/package/classnames), previously known as `React.addons.classSet`. See [Class set](http://facebook.github.io/react/docs/class-name-manipulation.html).
### Propagating properties ### Propagating properties
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
```html ```html
<VideoPlayer src="video.mp4" /> <VideoPlayer src="video.mp4" />
@ -349,8 +359,9 @@ var VideoPlayer = React.createClass({
}); });
``` ```
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
### Mixins ### Mixins
See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
```js ```js
var SetIntervalMixin = { var SetIntervalMixin = {
@ -365,6 +376,8 @@ var TickTock = React.createClass({
} }
``` ```
See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
## [Top level API](https://facebook.github.io/react/docs/top-level-api.html) ## [Top level API](https://facebook.github.io/react/docs/top-level-api.html)
```js ```js
@ -383,21 +396,23 @@ ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+
## JSX patterns ## JSX patterns
### Style shorthand ### Style shorthand
See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
```js ```js
var style = { backgroundImage: 'url(x.jpg)', height: 10 }; var style = { backgroundImage: 'url(x.jpg)', height: 10 };
return <div style={style}></div>; return <div style={style}></div>;
``` ```
See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
### InnerHTML ### InnerHTML
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
```js ```js
function markdownify() { return "<p>...</p>"; } function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} /> <div dangerouslySetInnerHTML={{__html: markdownify()}} />
``` ```
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
### Lists ### Lists
```js ```js