React初入门（一）

赤鞘
276 阅读2分钟

跟着阮一峰老师2015年的入门文章学习react，主要通过demo和讲解了解react单独功能和方法的实现。

DEMO主要引用三个文件： 

1、react.js
2、react-DOM.js
3、browser.min.js


前两个分别是react核心文件和reactDOM操作的库

browser文件是将JSX语法转化为js语法的库

使用JSX语法的script标签的type属性要写成 text/babel

react.render()方法，插入内容在元素中

react.render()方法会直接替换掉目标元素中的内容
有三个参数： 
第一个参数：要添加的内容
第二个参数：添加进入的元素,可以使用随意的获取元素的方式
第三个参数：回调函数

JSX语法允许html和js混写，html部分可以直接书写，js部分需要用{}号包裹起来

let arr=["shit","dick","ass"]


ReactDOM.render(
		<ul>
			{
				arr.map(function(value,index){
					return <li key={index}>{value}</li>
				})
			}
		</ul>,
	document.getElementsByClassName("wangbadan")[0]
)

疑点：似乎新版本的react（不清楚具体版本，比阮一峰博文http://www.ruanyifeng.com/blog/2015/03/react.html要晚的版本）中添加数组内容需要加上key属性不然会报错

但并不影响正常显示，改变数组中设置好的key值也不会改变数组遍历的顺序

react创建一个组件：react.creatClass({})

//最新ES6语法写 : class Zujian extends React.Component{} 创建一个Zujian类，继承的是React.Component

其中的内容为对象，目前已知属性有：render

render的值为一个函数，return返回要添加的内容 render:function(){} //es6语法写为render(){}

return返回的值必须为一个元素，如果出现两个及以上元素会报错。所以建议使用div包起来。如果要在组件添加的内容中使用组件的属性，可以使用this.props.attr获取组件的属性 添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

react中定义的组件名称必须为开头大写，不然会报错

class Zujian extends React.Component{
		render() {
			return <div>
				<h1>Hello,Please{this.props.id}</h1>
				<p>这是一行p标签</p>
			</div>
		}
	};

	ReactDOM.render(
		<Zujian  id="suck my dick"></Zujian>,
		app
	)

组件中获取属性使用 this.props,但有一个例外是this.props.children. this.props.children用来选取组件中包含的所有子元素。 使用 React.children.map(this.props.children,function(){})可以遍历所有子节点，如果直接使用this.props.children.map进行遍历，在组件中不包含子元素的情况下会报错，使用React.children则不会。

avatar
文章
阅读
粉丝