1.img introduces picture paths

Local Picture
Method 1:

<img src={require('../img/icon1.png')} alt="" />

Method 2:

import search from '../img/search.png'
import user from '../img/user.png'

<img src={search} alt="" />
<img src={user} alt="" />

Background Picture Reference Method

const divStyle = {
  color: 'red',
  backgroundImage: 'url(' + imgUrl + ')',
  // Or background: `url${require("1.jpg")}`
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Variable Picture Address

<img src={item.img} />

2.React Component Property Part Classes (propTypes) Checks

1. Basic JavaScript data types, including arrays, Booleans, functions, numbers, objects, strings

optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

2. If it cannot be empty isRequired

React.PropTypes.array.isRequired

...Other uses as above
3. Specify the data type as an array

React.PropTypes.arrayOf(React.PropTypes.number)

4. Specify data type to object

React.PropTypes.objectOf(React.PropTypes.number)

How to use:
Component name.propTypes = {
key1: Validator,
}

Example:

class NvHead extends Component {
    constrctor() {
        super();
    }
}
NvHead.propTypes = {
  data: React.PropTypes.array.isRequired
}

NvHead.defaultProps = {
  data: [
    {
      value: '1',
      label: 'Food',
    }, {
      value: '2',
      label: 'Supermarket',
    },
    {
      value: '3',
      label: 'Extra',
      isLeaf: true,
    },
  ]
}

3. Create slot secondary insertion nodes in subcomponents

Mode 1: Use the children attribute to pass child elements directly to the output
Subcomponents

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

Allow other components to pass subcomponents through nested JSX:

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

Mode 2: Multiple entries use their own agreed properties instead of children

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

4. Implement parent component invoke child component method via ref

<script type="text/babel">
    ///Sub Component
    var HelloMessage = React.createClass({
        childMethod: function(){
            alert("Successful communication between components");
        },
        render: function() {
            return <div> <h1>Hello {this.props.name}</h1>  <button onClick={this.childMethod}>Subcomponents</button></div>
        }
    });

    //Parent Component
    var ImDaddyComponent = React.createClass({
        getDS: function(){
            //Call component for communication
            this.refs.getSwordButton.childMethod();
        },
        render: function(){
            return (
                    <div>
                        <HelloMessage name="John" ref="getSwordButton" />
                        <button onClick={this.getDS}>Parent Component</button>
                    </div>
            );
        }
    });

    ReactDOM.render(
            <ImDaddyComponent  />,
            document.getElementById('correspond')
    );

</script>

5. Subcomponents transfer data to parent components

Steps:
1. Transfer (with parameters) functions directly from parent to child components at work
2. When you need to pass a change in value within a child component to the parent component, take the value you need to pass (json, arrays can pass, and so on) as a parameter to the function.

//A child component, the handleVal function handles user-entered characters, calls the parent element method through props, and passes it to the parent component's handelEmail function
var Child = React.createClass({
    handleVal: function() {
        var val = this.refs.emailDom.value;
        val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
        this.props.handleEmail(val);
    },
    render: function(){
        return (
            <div>
                //Please enter mailbox: <input ref="emailDom" onChange={this.handleVal}/>
            </div>
        )
    }
});
//Parent component, the parameter received through handleEmail, the value of the child component
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(val){
        this.setState({email: val});
    },
    render: function(){
        return (
            <div>
                <div>User Mailbox:{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

6. Routing Cut, component lazy loading react-router3.0

bundle-loader still dependent on webpack

{
    path: 'city/:id',
    getComponent(nextState, cb) {
            require.ensure([], (require) => {
                cb(null, require('./views/city').default)
            })
        }
    }