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