Learn the Render method of the React component

React: Each component has only one render function, and the JSX function returns the JSX root tag, or the JSX root tag must be wrapped around it.

// Error
render () {
  return (
    <div>The first one</div>
    <div>The second</div>)}Copy the code

Render () {render () {return (
  <div>
    <div>The first one</div>
    <div>The second</div>
  </div>)}Copy the code

In the render function, if you want to render an expression, then you need to use {}, vue uses {{}}, it will render your content to the page, comfortable, of course, can also use teradic operators for conditional judgment, etc.

render () {
  const className = 'header'
  return (
    <div className={className}>
      <h1>The React little book</h1>
    </div>)}Copy the code

Keep in mind that there can only be one render function, and the return must be JSX!!!!!!!!