## 1.占位符 ~~~ import React,{Component,Fragment} from 'react' //直接使用就可以了 <Fragment> </Fragment> ~~~ ## 2.注釋 ~~~ {/* 注釋 */} ~~~ ## 3.樣式 ~~~ //1.單獨定義index.css文件 .input{ border:1px solid #333; } <input className="input"/> //2.在index.js組件中引入 import './index.css' ~~~ ## 4.將js中html放入jsx語法中 ~~~ import React, { Component, Fragment } from 'react'; import './index.css'; class App extends Component { constructor(props) { super(props); this.state = { list: [ "<h2>hello world</h2>", "<h3>hello world</h3>", "<h4>hello world</h4>", ] } } render() { return ( <div> <div>{this.state.list.map((item,index)=>{ return <div key={index} dangerouslySetInnerHTML={{__html:item}} ></div> })}</div> </div> ) } } export default App; ~~~ ## 5.input與label ~~~ <label htmlFor="input">輸入內容</label> <input id="input"/> ~~~ ## 6.解構state ~~~ var {list} = this.state; ~~~