functionMyComponent(){return(<div>helloworld<div>);}

classExampleextendsReact.Component{render(){return[<divkey="1">firstelement</div>,<divkey="2">secondelement</div>,];}}

classBuggyCounterextendsReact.Component{constructor(props){super(props);this.state={counter:0};this.handleClick=this.handleClick.bind(this);}componentWillMount(){thrownewError('I am crash');}handleClick(){this.setState(({counter})=>({counter:counter+1}));}render(){if(this.state.counter===5){// Simulate a JS errorthrownewError('I crashed!');}return<h1onClick={this.handleClick}>{this.state.counter}</h1>;}}functionApp(){return(<div><p><b>ThisisanexampleoferrorboundariesinReact16.<br/><br/>Clickonthenumberstoincreasethecounters.<br/>Thecounterisprogrammedtothrowwhenitreaches5.ThissimulatesaJavaScripterrorinacomponent.</b></p><hr/><p>Thesetwocountersareinsidethesameerrorboundary.Ifonecrashes,theerrorboundarywillreplacebothofthem.</p><BuggyCounter/><hr/></div>);}ReactDOM.render(<App/>,document.getElementById('root'));

//先定一個組件ErrorBoundaryclassErrorBoundaryextendsReact.Component{constructor(props){super(props);this.state={error:null,errorInfo:null};}componentDidCatch(error,errorInfo){// Catch errors in any components below and re-render with error messagethis.setState({error:error,errorInfo:errorInfo})// You can also log error messages to an error reporting service here}render(){//有錯誤的時候展示回退if(this.state.errorInfo){// Error pathreturn(<div><h2>Somethingwentwrong.</h2><detailsstyle={{whiteSpace:'pre-wrap'}}>{this.state.error&&this.state.error.toString()}<br/>{this.state.errorInfo.componentStack}</details></div>);}//正常的話，直接展示組件returnthis.props.children;}}classBuggyCounterextendsReact.Component{constructor(props){super(props);this.state={counter:0};this.handleClick=this.handleClick.bind(this);}componentWillMount(){thrownewError('I am crash');}handleClick(){this.setState(({counter})=>({counter:counter+1}));}render(){if(this.state.counter===5){// Simulate a JS errorthrownewError('I crashed!');}return<h1onClick={this.handleClick}>{this.state.counter}</h1>;}}functionApp(){return(<div><p><b>ThisisanexampleoferrorboundariesinReact16.<br/><br/>Clickonthenumberstoincreasethecounters.<br/>Thecounterisprogrammedtothrowwhenitreaches5.ThissimulatesaJavaScripterrorinacomponent.</b></p><hr/><ErrorBoundary><p>Thesetwocountersareinsidethesameerrorboundary.Ifonecrashes,theerrorboundarywillreplacebothofthem.</p><BuggyCounter/></ErrorBoundary><hr/></div>);}ReactDOM.render(<App/>,document.getElementById('root'));

classMyComponentextendsReact.Component{constructor(props){super(props);this.state={error:null};this.handleClick=this.handleClick.bind(this);}handleClick(){try{// Do something that could throw}catch(error){this.setState({error});}}render(){if(this.state.error){return<h1>Caughtanerror.</h1>}return<divonClick={this.handleClick}>ClickMe</div>}}

class A extends React . Component { render () { // 此错误无法被捕获，渲染时组件正常返回`<div></div>` setTimeout (() => { throw new Error ( 'error' ) }, 1000 ) return ( < div >< /div> ) } }

<divclass="app"><div>...</div>{needDialog?<Dialog/>:null}</div>

<divid="app-root"></div>// 这里为我们定义Dialog想要放入的位置
<divid="modal-root"></div>

// These two containers are siblings in the DOMconstappRoot=document.getElementById('app-root');constmodalRoot=document.getElementById('modal-root');// Let's create a Modal component that is an abstraction around// the portal API.classModalextendsReact.Component{constructor(props){super(props);// Create a div that we'll render the modal into. Because each// Modal component has its own element, we can render multiple// modal components into the modal container.this.el=document.createElement('div');}componentDidMount(){// Append the element into the DOM on mount. We'll render// into the modal container element (see the HTML tab).//這邊會將我們生成的portal element插入到modal-root裡。modalRoot.appendChild(this.el);}componentWillUnmount(){// Remove the element from the DOM when we unmountmodalRoot.removeChild(this.el);}render(){// Use a portal to render the children into the elementreturnReactDOM.createPortal(// Any valid React child: JSX, strings, arrays, etc.this.props.children,// A DOM elementthis.el,);}}// The Modal component is a normal React component, so we can// render it wherever we like without needing to know that it's// implemented with portals.classAppextendsReact.Component{constructor(props){super(props);this.state={showModal:false};this.handleShow=this.handleShow.bind(this);this.handleHide=this.handleHide.bind(this);}handleShow(){this.setState({showModal:true});}handleHide(){this.setState({showModal:false});}render(){// Show a Modal on click.// (In a real app, don't forget to use ARIA attributes// for accessibility!)constmodal=this.state.showModal?(//注意~~~~~~~~~~~~~這裡可以自行加上這個調試// <Modal><divclassName="modal"><div>Withaportal,wecanrendercontentintoadifferentpartoftheDOM,asifitwereanyotherReactchild.</div>Thisisbeingrenderedinsidethe#modal-containerdiv.<buttononClick={this.handleHide}>Hidemodal</button></div>//</Modal>):null;return(<divclassName="app">Thisdivhasoverflow:hidden.<buttononClick={this.handleShow}>Showmodal</button>{modal}</div>);}}ReactDOM.render(<App/>,appRoot);

renderToString(<div>Thisissome<span>server-generated</span> <span>HTML.</span> </div> );

<divdata-reactroot=""data-reactid="1"data-react-checksum="122239856"><!--react-text:2-->Thisissome<!--/react-text--><spandata-reactid="3">server-generated</span><!--react-text:4--><!--/react-text --><spandata-reactid="5">HTML.</span></div>

<divdata-reactroot="">Thisissome<span>server-generated</span> <span>HTML.</span> </div>

// using Expressimport{renderToNodeStream}from"react-dom/server"importMyPagefrom"./MyPage"app.get("/",(req,res)=>{res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");res.write("<div id='content'>");conststream=renderToNodeStream(<MyPage/>);stream.pipe(res,{end:false});stream.on('end',()=>{res.write("</div></body></html>");res.end();});});

// server:// using Express clientimport{renderToString}from"react-dom/server"importMyPagefrom"./MyPage"app.get("/",(req,res)=>{res.write("<!DOCTYPE html><html><head><title>My Page</title></head><body>");res.write("<div id='content'>");res.write(renderToString(<MyPage/>));res.write("</div></body></html>");res.end();});// clientimport{render}from"react-dom"importMyPagefrom"./MyPage"render(<MyPage/>,document.getElementById("content"));

// client import { hydrate } from "react-dom" import MyPage from "./MyPage" hydrate ( < MyPage /> , document . getElementById ( "content" ));

render(){return(<><ChildA/><ChildB/><ChildC/></>);}

Some text. < h2 > A heading </ h2 > More text. < h2 > Another heading </ h2 > Even more text.

render () { return ( // Extraneous div element :( < Fragement > Some text . < h2 > A heading < /h2> More text . < h2 > Another heading < /h2> Even more text . < /Fragement> ); }

render(){return["Some text.",<h2key="heading-1">Aheading</h2>,"More text.",<h2key="heading-2">Anotherheading</h2>,"Even more text."];}

function Glossary ( props ) { return ( < dl > { props . items . map ( item => ( // Without the `key`, React will fire a key warning < Fragment key = { item . id } > < dt > { item . term } < /dt> < dd > { item . description } < /dd> < /Fragment> ))} < /dl> ); }

// Context lets us pass a value deep into the component tree// without explicitly threading it through every component.// Create a context for the current theme (with "light" as the default).constThemeContext=React.createContext('light');classAppextendsReact.Component{render(){// Use a Provider to pass the current theme to the tree below.// Any component can read it, no matter how deep it is.// In this example, we're passing "dark" as the current value.return(<ThemeContext.Providervalue="dark"><Toolbar/></ThemeContext.Provider>);}}// A component in the middle doesn't have to// pass the theme down explicitly anymore.functionToolbar(props){return(<div><ThemedButton/></div>);}classThemedButtonextendsReact.Component{// Assign a contextType to read the current theme context.// React will find the closest theme Provider above and use its value.// In this example, the current theme is "dark".staticcontextType=ThemeContext;render(){return<Buttontheme={this.context}/>;}}

functionPage(props){constuser=props.user;//簡單來說就是直接父組件將props傳下去constuserLink=(<Linkhref={user.permalink}><Avataruser={user}size={props.avatarSize}/></Link>);return<PageLayoutuserLink={userLink}/>;}// Now, we have:<Pageuser={user}/>// ... which renders ...<PageLayoutuserLink={...}/>// ... which renders ...<NavigationBaruserLink={...}/>// ... which renders ...{props.userLink}

classMyComponentextendsReact.Component{constructor(props){super(props);}//通過this.refs.textInput來獲取render(){return<inputtype="text"ref='textInput'/>;}}callback:classMyComponentextendsReact.Component{constructor(props){super(props);}//通過this.textInput來獲取render(){return<inputtype="text"ref={element=>this.textInput=element}/>;}}

classMyComponentextendsReact.Component{constructor(props){super(props);this.inputRef=React.createRef();}render(){return<inputtype="text"ref={this.inputRef}/>;}componentDidMount(){this.inputRef.current.focus();}}

functionMyFunctionComponent(){return<input/>;}classParentextendsReact.Component{constructor(props){super(props);this.textInput=React.createRef();}render(){// 这个不能工作
return(<MyFunctionComponentref={this.textInput}/>);}}

function CustomTextInput ( props ) { // textInput must be declared here so the ref can refer to it let textInput = React . createRef (); function handleClick () { textInput . current . focus (); } return ( < div > < input type = "text" ref = { textInput } /> < input type = "button" value = "Focus the text input" onClick = { handleClick } /> < /div> ); }

constTextInput=React.forwardRef((props,ref)=>(<inputtype="text"placeholder="Hello forwardRef"ref={ref}/>))constinputRef=React.createRef()classAppextendsComponent{constructor(props){super(props)this.myRef=React.createRef()}handleSubmit=event=>{event.preventDefault()alert('input value is:'+inputRef.current.value)}render(){return(<formonSubmit={this.handleSubmit}><TextInputref={inputRef}/><buttontype="submit">Submit</button></form>)}}constFancyButton=React.forwardRef((props,ref)=>(<buttonref={ref}className="FancyButton">{props.children}</button>));// You can now get a ref directly to the DOM button:constref=React.createRef();<FancyButtonref={ref}>Clickme!</FancyButton>;

functionExampleApplication(){return(<div><Header/><React.StrictMode><div><ComponentOne/><ComponentTwo/></div></React.StrictMode><Footer/></div>);}