React.jscheatsheet

JSX
复制代码
import React from "react";
import ReactDOM from "react-dom";

JSX
复制代码
class Hello extends React.Component {
  render() {
    return <div className="message-box">Hello {this.props.name}</div>;
  }
}

JSX
复制代码
const el = document.body;
ReactDOM.render(<Hello name="John" />, el);

JSX
复制代码
import React, { Component } from "react";
import ReactDOM from "react-dom";

JSX
复制代码
class Hello extends Component {
  ...
}

HTML
复制代码
<video fullscreen="{true}" autoplay="{false}" />

JSX
复制代码
render () {
  this.props.fullscreen
  const { fullscreen, autoplay } = this.props
  ···
}

JSX
复制代码
constructor(props) {
  super(props)
  this.state = { username: undefined }
}

JSX
复制代码
this.setState({ username: "bai" });

JSX
复制代码
render () {
  this.state.username
  const { username } = this.state
  ···
}

JSX
复制代码
class Hello extends Component {
  state = { username: undefined };
  ...
}

JSX
复制代码
class Info extends Component {
  render() {
    const { avatar, username } = this.props;
    return (
      <div>
        <UserAvatar src={avatar} />
        <UserProfile username={username} />
      </div>
    );
  }
}

JSX
复制代码
import React, { Component, Fragment } from "react";
class Info extends Component {
  render() {
    const { avatar, username } = this.props;
    return (
      <Fragment>
        <UserAvatar src={avatar} />
        <UserProfile username={username} />
      </Fragment>
    );
  }
}

JSX
复制代码
<AlertBox>
  <h1>You have pending notifications</h1>
</AlertBox>

JSX
复制代码
class AlertBox extends Component {
  render() {
    return <div className="alert-box">{this.props.children}</div>;
  }
}

JSX
复制代码
Hello.defaultProps = {
  color: "blue",
};

JSX
复制代码
class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = { visible: true };
  }
}

JSX
复制代码
class Hello extends Component {
  state = { visible: true };
}

JSX
复制代码
function MyComponent({ name }) {
  return <div className="message-box">Hello {name}</div>;
}

JSX
复制代码
import React, { PureComponent } from 'react'
class MessageBox extends PureComponent {
  ···
}

..
复制代码
this.forceUpdate();

..
复制代码
this.setState({ ... })
this.setState(state => { ... })

JSX
复制代码
this.state;
this.props;

JSX
复制代码
class MyComponent extends Component {
  render() {
    return (
      <div>
        <input ref={(el) => (this.input = el)} />
      </div>
    );
  }
  componentDidMount() {
    this.input.focus();
  }
}

JSX
复制代码
class MyComponent extends Component {
  render() {
    <input
      type="text"
      value={this.state.value}
      onChange={(event) => this.onChange(event)}
    />;
  }
  onChange(event) {
    this.setState({ value: event.target.value });
  }
}

HTML
复制代码
<VideoPlayer src="video.mp4" />

JSX
复制代码
class VideoPlayer extends Component {
  render() {
    return <VideoEmbed {...this.props} />;
  }
}

..
复制代码
React.createClass({ ... })
React.isValidElement(c)

JSX
复制代码
ReactDOM.render(<Component />, domnode, [callback]);
ReactDOM.unmountComponentAtNode(domnode);

JSX
复制代码
ReactDOMServer.renderToString(<Component />);
ReactDOMServer.renderToStaticMarkup(<Component />);

JSX
复制代码
const style = { height: 10 };
return <div style={style}></div>;

JSX
复制代码
return <div style={{ margin: 0, padding: 0 }}></div>;

JSX
复制代码
function markdownify() {
  return "<p>...</p>";
}
<div dangerouslySetInnerHTML={{ __html: markdownify() }} />;

JSX
复制代码
class TodoList extends Component {
  render() {
    const { items } = this.props;
    return (
      <ul>
        {items.map((item) => (
          <TodoItem item={item} key={item.key} />
        ))}
      </ul>
    );
  }
}

JSX
复制代码
<Fragment>{showMyComponent ? <MyComponent /> : <OtherComponent />}</Fragment>

JSX
复制代码
<Fragment>
  {showPopup && <Popup />}
  ...
</Fragment>

JS
复制代码
render() {
  return 'Look ma, no spans!';
}

JS
复制代码
class MyComponent extends Component {
  ···
  componentDidCatch (error, info) {
    this.setState({ error })
  }
}

JS
复制代码
render () {
  return React.createPortal(
    this.props.children,
    document.getElementById('menu')
  )
}

JS
复制代码
const el = document.getElementById("app");
ReactDOM.hydrate(<App />, el);

JS
复制代码
import PropTypes from "prop-types";

JSX
复制代码
MyComponent.propTypes = {
  email: PropTypes.string,
  seats: PropTypes.number,
  callback: PropTypes.func,
  isClosed: PropTypes.bool,
  any: PropTypes.any,
};

JSX
复制代码
MyCo.propTypes = {
  name: PropTypes.string.isRequired,
};

JSX
复制代码
MyCo.propTypes = {
  element: PropTypes.element,
  node: PropTypes.node,
};

JSX
复制代码
MyCo.propTypes = {
  direction: PropTypes.oneOf(["left", "right"]),
};

JSX
复制代码
MyCo.propTypes = {
  list: PropTypes.array,
  ages: PropTypes.arrayOf(PropTypes.number),
  user: PropTypes.object,
  user: PropTypes.objectOf(PropTypes.number),
  message: PropTypes.instanceOf(Message),
};

JSX
复制代码
MyCo.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
};

JSX
复制代码
MyCo.propTypes = {
  customProp: (props, key, componentName) => {
    if (!/matchme/.test(props[key])) {
      return new Error("Validation failed!");
    }
  },
};