//如下 JSX 代碼：
	<MyButton color="blue" shadowSize={2}>
	  Click Me
	</MyButton>
    //會(huì)編譯為：
    React.createElement(
	  MyButton,
	  {color: 'blue', shadowSize: 2},
	  'Click Me'
	)
		//如果沒(méi)有子節(jié)點(diǎn)，你還可以使用自閉合的標(biāo)簽形式，如：
	  <div className="sidebar" />
	  //會(huì)編譯為:
	  React.createElement(
		  'div',
		  {className: 'sidebar'}
		)

 //在如下代碼中，雖然 React 和 CustomButton 并沒(méi)有被直接使用，但還是需要導(dǎo)入：
   import React from 'react';
   import CustomButton from './CustomButton';
   function WarningButton() {
     // return React.createElement(CustomButton, {color: 'red'}, null);
     return <CustomButton color="red" />;
   }

   import React from 'react';
   const MyComponents = {
     DatePicker: function DatePicker(props){
       return <div>Imagine a {props.color} datepicker here.</div>
     }
   }
  function BlueDatePicker() {
    return <MyComponents.DatePicker color="blue" />   
  }

 import React from 'react';
// 正確！組件需要以大寫(xiě)字母開(kāi)頭：
function Hello(props) {
  // 正確！ 這種 <div> 的使用是合法的，因?yàn)?div 是一個(gè)有效的 HTML 標(biāo)簽：
  return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
  // 正確！React 知道 <Hello /> 是一個(gè)組件，因?yàn)樗谴髮?xiě)字母開(kāi)頭的：
  return <Hello toWhat="World" />;
}

import React from 'react';
import { PhotoStory, VideoStory } from './stories';
   const components = {
     photo: PhotoStory,
     video: VideoStory
   };
   //錯(cuò)誤寫(xiě)法：
   function Story(props) {
     // 錯(cuò)誤！JSX 類型不能是一個(gè)表達(dá)式。
     return <components[props.storyType] story={props.story} />;
   }
  //正確寫(xiě)法：
  function Story(props) {
     // 正確！JSX 類型可以是大寫(xiě)字母開(kāi)頭的變量。
     const SpecificStory = components[props.storyType];
     return <SpecificStory story={props.story} />;
 }

 <MyComponent foo={1 + 2 + 3 + 4} />

function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
     description = <strong>even</strong>;
   } else {
     description = <i>odd</i>;
   }
   return <div>{props.number} is an {description} number</div>;
 }

//等價(jià)
<MyComponent message="hello world" />
<MyComponent message={'hello world'} />

//等價(jià)
 <MyComponent message="&lt;3" />
<MyComponent message={'<3'} />

//等價(jià)
 <MyTextBox autocomplete />
<MyTextBox autocomplete={true} />

 function App1() {
    return <Greeting firstName="Ben" lastName="Hector" />;
}
  function App2() {
    const props = {firstName: 'Ben', lastName: 'Hector'};
    return <Greeting {...props} />;
  }

<MyComponent>Hello world!</MyComponent>

 <MyContainer>
   <MyFirstComponent />
   <MySecondComponent />
 </MyContainer>

//等價(jià)
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
function Item(props) {
 return <li>{props.message}</li>;
}
function TodoList() {
 const todos = ['finish doc', 'submit pr', 'nag dan to review'];
 return (
   <ul>
     {todos.map((message) => <Item key={message} message={message} />)}
   </ul>
 );
}

 // 調(diào)用子元素回調(diào) numTimes 次，來(lái)重復(fù)生成組件
function Repeat(props) {
 let items = [];
 for (let i = 0; i < props.numTimes; i++) {
   items.push(props.children(i));
 }
 return <div>{items}</div>;
}
function ListOfTenThings() {
 return (
   <Repeat numTimes={10}>
     {(index) => <div key={index}>This is item {index} in the list</div>}
   </Repeat>
 );
}
//可以將任何東西作為子元素傳遞給自定義組件，只要確保在該組件渲染之前能夠被轉(zhuǎn)換成 React 理解的對(duì)象。這種用法并不常見(jiàn)，但可以用于擴(kuò)展 JSX。

<div>
   My JavaScript variable is {String(myVariable)}.
 </div>