394 lines
9.3 KiB
Markdown
394 lines
9.3 KiB
Markdown
---
|
|
title: React.js
|
|
category: React
|
|
layout: 2017/sheet
|
|
---
|
|
|
|
{%raw%}
|
|
|
|
Getting started
|
|
---------------
|
|
|
|
{:.-three-column}
|
|
|
|
<!-- .-three-column -->
|
|
|
|
### Getting started
|
|
|
|
```jsx
|
|
class MyComponent extends React.Component {
|
|
render () {
|
|
return <div className='message-box'>
|
|
Hello {this.props.name}
|
|
</div>
|
|
}
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
const el = document.body
|
|
ReactDOM.render(<MyComponent name='John' />, el)
|
|
```
|
|
|
|
Use the [React.js jsfiddle](http://jsfiddle.net/reactjs/69z2wepo/) to start hacking. (or the unofficial [jsbin](http://jsbin.com/yafixat/edit?js,output)).
|
|
|
|
### Functional components
|
|
|
|
```jsx
|
|
function MyComponent ({ name }) {
|
|
return <div className='message-box'>
|
|
Hello {name}
|
|
</div>
|
|
}
|
|
```
|
|
|
|
### Nesting
|
|
|
|
```jsx
|
|
class Info extends React.Component {
|
|
render () {
|
|
const { avatar, username } = this.props
|
|
|
|
return <div>
|
|
<UserAvatar src={avatar} />
|
|
<UserProfile username={username} />
|
|
</div>
|
|
}
|
|
}
|
|
```
|
|
|
|
Nest components to separate concerns. See: [multiple components](http://facebook.github.io/react/docs/multiple-components.html)
|
|
|
|
|
|
### Component API
|
|
|
|
```jsx
|
|
this.forceUpdate()
|
|
this.isMounted()
|
|
|
|
this.setState({ ... })
|
|
this.replaceState({ ... })
|
|
|
|
this.state
|
|
this.props
|
|
```
|
|
|
|
These are methods available for `Component` instances. See [Component API](http://facebook.github.io/react/docs/component-api.html).
|
|
|
|
|
|
### Component specs
|
|
|
|
| Method | What |
|
|
| ---- | ---- |
|
|
| [`render()`](http://facebook.github.io/react/docs/component-specs.html#render) | |
|
|
| ---- | ---- |
|
|
| [`getInitialState()`](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) | |
|
|
| [`getDefaultProps()`](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) | |
|
|
| ---- | ---- |
|
|
| [`mixins: [ ... ]`](http://facebook.github.io/react/docs/component-specs.html#mixins) | Mixins ... [more](#mixins) |
|
|
| [`propTypes: { ... }`](http://facebook.github.io/react/docs/component-specs.html#proptypes) | Validation ... [more](#property-validation) |
|
|
| [`statics: { ... }`](http://facebook.github.io/react/docs/component-specs.html#statics) | Static methods |
|
|
| [`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).
|
|
|
|
### States & properties
|
|
|
|
```html
|
|
<MyComponent fullscreen={true} />
|
|
```
|
|
|
|
```jsx
|
|
// props
|
|
this.props.fullscreen //=> true
|
|
|
|
// state
|
|
this.setState({ username: 'rstacruz' });
|
|
this.replaceState({ ... });
|
|
this.state.username //=> 'rstacruz'
|
|
```
|
|
|
|
```jsx
|
|
render: function () {
|
|
return <div className={this.props.fullscreen ? 'full' : ''}>
|
|
Welcome, {this.state.username}
|
|
</div>;
|
|
}
|
|
```
|
|
|
|
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
|
|
|
|
```jsx
|
|
React.createClass({
|
|
getInitialState: function () {
|
|
return { comments: [] };
|
|
},
|
|
|
|
getDefaultProps: function () {
|
|
return { name: "Hello" };
|
|
}
|
|
);
|
|
```
|
|
|
|
Pre-populates `this.state.comments` and `this.props.name`.
|
|
|
|
Lifecycle
|
|
---------
|
|
|
|
{:.-two-column}
|
|
|
|
### Mounting
|
|
|
|
| `componentWillMount()` | Before rendering (no DOM yet) |
|
|
| `componentDidMount()` | After rendering |
|
|
| `componentWillUnmount()` | Invoked before DOM removal |
|
|
|
|
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).
|
|
|
|
Clear your DOM stuff in componentWillMount (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
|
|
|
|
### Updating
|
|
|
|
| `componentWillReceiveProps`*(newProps={})* | Use `setState()` here |
|
|
| `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false |
|
|
| `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here |
|
|
| `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
|
|
|
|
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).
|
|
|
|
DOM nodes
|
|
---------
|
|
|
|
{:.-two-column}
|
|
|
|
### References
|
|
|
|
```html
|
|
<input ref="myInput">
|
|
```
|
|
|
|
```jsx
|
|
this.refs.myInput
|
|
ReactDOM.findDOMNode(this.refs.myInput).focus()
|
|
ReactDOM.findDOMNode(this.refs.myInput).value
|
|
```
|
|
|
|
Allows access to DOM nodes. See [References](http://facebook.github.io/react/docs/more-about-refs.html).
|
|
|
|
### DOM Events
|
|
|
|
```html
|
|
<input type="text"
|
|
value={this.state.value}
|
|
onChange={this.handleChange} />
|
|
```
|
|
{:.light}
|
|
|
|
```jsx
|
|
handleChange: function(event) {
|
|
this.setState({ value: event.target.value });
|
|
}
|
|
```
|
|
|
|
Add attributes like `onChange`. See [events](https://facebook.github.io/react/docs/events.html).
|
|
|
|
Property validation
|
|
-------------------
|
|
|
|
### React.PropTypes
|
|
|
|
| PropType | Description |
|
|
| --- | --- |
|
|
| `any` | Anything |
|
|
| --- | --- |
|
|
| `string` | |
|
|
| `number` | |
|
|
| `func` | Function |
|
|
| `bool` | True or false |
|
|
| --- | --- |
|
|
| `oneOf`_(any)_ | Enum types |
|
|
| `oneOfType`_(type array)_ | Union |
|
|
| --- | --- |
|
|
| `array` | |
|
|
| `arrayOf`_(...)_ | |
|
|
| --- | --- |
|
|
| `object` | |
|
|
| `objectOf`_(...)_ | |
|
|
| `instanceOf`_(...)_ | |
|
|
| `shape`_(...)_ | |
|
|
| --- | --- |
|
|
| `element` | React element |
|
|
| `node` | DOM node |
|
|
| --- | --- |
|
|
| `.isRequired` | Required |
|
|
|
|
See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
|
|
|
|
### Basic types
|
|
|
|
```jsx
|
|
MyComponent.propTypes = {
|
|
email: React.PropTypes.string,
|
|
seats: React.PropTypes.number,
|
|
callback: React.PropTypes.func,
|
|
isClosed: React.PropTypes.bool,
|
|
any: React.PropTypes.any
|
|
}
|
|
```
|
|
|
|
See [propTypes](http://facebook.github.io/react/docs/reusable-components.html#prop-validation).
|
|
|
|
### Required types
|
|
|
|
```jsx
|
|
MyComponent.propTypes = {
|
|
requiredFunc: React.PropTypes.func.isRequired,
|
|
requiredAny: React.PropTypes.any.isRequired
|
|
}
|
|
```
|
|
|
|
Add `.isRequired`.
|
|
|
|
### React elements
|
|
|
|
```jsx
|
|
MyComponent.propTypes = {
|
|
// React element
|
|
element: React.PropTypes.element,
|
|
|
|
// num, string, element, or an array of those
|
|
node: React.PropTypes.node
|
|
}
|
|
```
|
|
|
|
Use `.element`, `.node`.
|
|
|
|
### Enumerables
|
|
|
|
```
|
|
propTypes: {
|
|
enum: React.PropTypes.oneOf(['M','F']), // enum
|
|
union: React.PropTypes.oneOfType([ // any
|
|
React.PropTypes.string,
|
|
React.PropTypes.number ]),
|
|
```
|
|
|
|
Use `.oneOf`, `.oneOfType`.
|
|
|
|
### Arrays and objects
|
|
|
|
```jsx
|
|
propTypes: {
|
|
array: React.PropTypes.array,
|
|
arrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
|
|
object: React.PropTypes.object,
|
|
objectOf: React.PropTypes.objectOf(React.PropTypes.number),
|
|
|
|
message: React.PropTypes.instanceOf(Message),
|
|
|
|
object2: React.PropTypes.shape({
|
|
color: React.PropTypes.string,
|
|
size: React.PropTypes.number
|
|
}),
|
|
```
|
|
|
|
Use `.array[Of]`, `.object[Of]`, `.instanceOf`, `.shape`.
|
|
|
|
### Custom validation
|
|
|
|
```jsx
|
|
propTypes: {
|
|
customProp: function(props, propName, componentName) {
|
|
if (!/matchme/.test(props[propName])) {
|
|
return new Error('Validation failed!');
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Supply your own function.
|
|
|
|
## Other features
|
|
|
|
### Propagating properties
|
|
|
|
```html
|
|
<VideoPlayer src="video.mp4" />
|
|
```
|
|
|
|
```jsx
|
|
class VideoPlayer extends React.Component {
|
|
render () {
|
|
return <VideoEmbed {...this.props} />
|
|
}
|
|
}
|
|
```
|
|
|
|
Propagates `src="..."` down to the sub-component.
|
|
|
|
See [Transferring props](http://facebook.github.io/react/docs/transferring-props.html).
|
|
|
|
### Top-level API
|
|
|
|
```jsx
|
|
React.createClass({ ... })
|
|
|
|
React.isValidElement(c)
|
|
|
|
ReactDOM.findDOMNode(c) // 0.14+
|
|
ReactDOM.render(<Component />, domnode, [callback]) // 0.14+
|
|
ReactDOM.unmountComponentAtNode(domnode) // 0.14+
|
|
|
|
ReactDOMServer.renderToString(<Component />) // 0.14+
|
|
ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+
|
|
```
|
|
|
|
JSX patterns
|
|
------------
|
|
|
|
### Style shorthand
|
|
|
|
```jsx
|
|
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).
|
|
|
|
### Inner HTML
|
|
|
|
```jsx
|
|
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
|
|
|
|
```jsx
|
|
var TodoList = React.createClass({
|
|
render: function() {
|
|
function item(itemText) {
|
|
return <li>{itemText}</li>;
|
|
};
|
|
return <ul>{this.props.items.map(item)}</ul>;
|
|
}
|
|
});
|
|
```
|
|
|
|
See also
|
|
--------
|
|
|
|
{:.-two-column}
|
|
|
|
### Also see
|
|
|
|
* [Animations](http://facebook.github.io/react/docs/animation.html)
|
|
|
|
{%endraw%}
|