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

View File

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

View File

@ -1,14 +1,15 @@
---
title: React.js (v0.14)
category: React
layout: default-ad
layout: 2017/sheet
deprecated: true
intro: |
**Deprecated:** this guide targets an old version of React (v0.14). See the [updated React cheatsheet](react) for new versions.
---
{%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))
{:.brief-intro.center}
### Components
```js
var Component = React.createClass({
@ -23,9 +24,9 @@ ReactDOM.render(<Component name="John" />, document.body);
```
{:.light}
## Nesting
Nest components to separate concerns. See [multiple components](http://facebook.github.io/react/docs/multiple-components.html).
{:.center}
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output))
### Nesting
```js
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
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}
### States and props
```html
<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
Pre-populates `this.state.comments` and `this.props.name`.
```js
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).
{:.center}
## Components
### Component API
```js
ReactDOM.findDOMNode(c) // 0.14+
@ -115,8 +121,9 @@ c.replaceProps({ ... }) // for deprecation
c.refs
```
These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
### Component specs
Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
| 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 |
{:.greycode.no-head}
Methods and properties you can override. See [component specs](http://facebook.github.io/react/docs/component-specs.html).
## Lifecycle
### 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) |
| `componentDidMount()` | After rendering |
{:.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
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 |
| `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 |
{:.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
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 |
{:.greycode.no-head.lc}
<style>
table.lc { table-layout: fixed; }
table.lc tr>:nth-child(1) { width: 50%; }
table.lc tr>:nth-child(2) { text-align: right; }
</style>
Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
<br>
## Examples
### Example: loading data
See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
```js
React.createClass({
@ -184,10 +185,11 @@ React.createClass({
});
```
See [initial AJAX data](http://facebook.github.io/react/tips/initial-ajax.html).
## DOM nodes
### References
Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
```html
<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
Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
```html
Email: <input type="text" valueLink={this.linkState('email')} />
@ -234,10 +237,11 @@ React.createClass({
this.state.email
```
Use [LinkedStateMixin](http://facebook.github.io/react/docs/two-way-binding-helpers.html) for easier two-way binding.
## Property validation
### Basic types
Primitive types: `.string`, `.number`, `.func`, and `.bool`. See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
```js
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
Add `.isRequired`.
```js
propTypes: {
@ -261,8 +265,9 @@ propTypes: {
requiredAny: React.PropTypes.any.isRequired,
```
Add `.isRequired`.
### React elements
Use `.element`, `.node`.
```js
propTypes: {
@ -271,8 +276,9 @@ propTypes: {
// ...or array of those
```
Use `.element`, `.node`.
### Enumerables
Use `.oneOf`, `.oneOfType`.
```
propTypes: {
@ -282,8 +288,9 @@ propTypes: {
React.PropTypes.number ]),
```
Use `.oneOf`, `.oneOfType`.
### Arrays and objects
Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
```js
propTypes: {
@ -300,8 +307,9 @@ propTypes: {
}),
```
Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
### Custom validation
Supply your own function.
```js
propTypes: {
@ -313,10 +321,11 @@ propTypes: {
}
```
Supply your own function.
## Other features
### 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
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
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
```html
<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
See [addons](https://facebook.github.io/react/docs/addons.html) for some built-in mixins.
```js
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)
```js
@ -383,21 +396,23 @@ ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+
## JSX patterns
### Style shorthand
See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
```js
var style = { backgroundImage: 'url(x.jpg)', height: 10 };
return <div style={style}></div>;
```
See [inline styles](https://facebook.github.io/react/tips/inline-styles.html).
### InnerHTML
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
```js
function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />
```
See [dangerously set innerHTML](https://facebook.github.io/react/tips/dangerously-set-inner-html.html).
### Lists
```js