jsx——一種JavaScript的語法擴展,在html中寫入js
在jsx中使用表達式,在jsx當中的表達式要包含在大括號中,列如:2+2 ; user.name ; formatName(user) 都是可以使用的
class=> className; tabindex=> tabIndex 駝峰命名來定義屬性
jsx防注入攻擊
元素渲染
元素是構成React應用的最小單位
ReactDOM.render()方法
const ele = <h1>hello,word</h1>;
ReactDOM.render(
??? ele,
??? document.getElementById('root')
);
當元素被創建之后,你是無法改變其內容或屬性的,一個元素就好像是動畫里的一幀,它代表應用界面在某一時間點的樣子
組件&Props
組件可以將UI切分成一些的獨立的,可復用的部件,這樣你就只需專注于構建每一個單獨的部件
定義組件的方式:
1.最簡單的方式是使用JavaScript函數
function Demo(props){
??????? return <h1>hello,{ props.name } </h1>;
}
2.使用es6 的class
class Demo extends React.Component {
?? render(){
????? return <h1>hello,{ this.props.name }</h1>
?? }
}
Props的只讀性
所有的React組件必須像純函數那樣使用它們的props