元素是构成React的最小单位,用于描述屏幕上输出的内容,但是他有别于浏览器的DOM元素,React中元素就是普通的对象,ReactDOM可以确保浏览器DOM数据内容与React元素保持一致,这就是所谓的虚拟DOM吗?...额先这么认为吧,只是以前听说React采用虚拟DOM
我们要将React的元素渲染到DOM中我们需要有一个'根'DOM节点,然后在这个根DOM节点中的所有内容都将由ReactDOM来管理.一般来说采用React开发应用时只会定义一个根节点,但是如果是在已有仙姑中引入React那么就需要在不同部分单独定义React根节点
将React元素渲染到根DOM节点中,需要采用ReactDOM,render()方法
ReactDOM.render( '自定义的对象或者说是要渲染 的内容' , '指定的根节点DOM元素')
ReactDOM.render( ' <div>hello </div>' , document.getElementById('div'))
React使用JSX来代替常规的JavaScript
JSX是一个看起来很像XML的JavaScript语法扩展,推荐在React中使用
我们知道就是元素是构成React应用的最小单位,而JSX就是用来声明React当中的元素.
注意:JSX就是JavaScript(虽然说是扩展但是也属于他的范畴),所以像JavaScript里面的标识符class和for等等便不再使用于做JSX的属性名,而是采用className和htmlFor
JSX看起来类似HTML,但是需要注意一下几点:
1.可以写多个HTML标签,但是要用一个div元素将其包裹起来
2.添加自定义属性要加上 data- 这个前缀
3.可以将React JSX 代码放在一个独立的js文件里面,引入时要指定script标签的类型为text/babel如下
<script type="text/babel" src="helloworld_react.js"></script>
4.可以在JSX中使用JavaScript表达式,但是表达式要写在{}花括号中,并且不能使用if else语句但可以使用三元运算符
5.React推荐使用内联样式,并采用camelCase语法(驼峰命名)来设置,React会在指定元素后面自动添加px
var myStyle = { fontSize: 100,
color: '#FF0000'};ReactDOM.render( <h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example'));
6.注释需要写在花括号内 {/*注释...*/}
7.JSX允许在模板中插入数组,数组会自动展开所有item
var arr = [ <h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render( <div>{arr}</div>,
document.getElementById('example'));
