react.js只是一个库,并不是一个框架,只提供UI层面的解决方案,一个完整的react项目需要结合其他库完成,例如Redux,React-router等.
在react.js中一切都是组件,在编写react.js组件的时候,一般需要继承react.js的Component
,该方法按照我的理解是创建有个基于此的类,然后一定要有一个render方法必须返回一个JSX元素,
eg:
class TestComponent extends Component{
render(){
return(
<div>
<div>one</div>
<div>one</div>
</div>
)
}
}
前面已标注一个,返回多个的话会报错,所以如果写多个标签的话,最外层用一个标签包裹起来.
上面的例子中可以看到其中有JavaScript
也有html
代码,这种形式就是JSX格式,如果不懂这种格式化,建议自己慢慢理解,自己去查资料领悟这种JavaScript里包含HTML的形式.
不过简单来说就是在JSX文件中,在浏览器解析时遇到{}
会解析成JavaScript,遇见<>
会解析成HTML,所以这种形式十分灵活.
在这种形式里写HTML有两点需要注意的地方:
1.不能使用
class
给元素添加类名,因为class
是JavaScript的关键字(构造类),所以添加类名时要是用className
2.for
属性也是不能再HTML里写的,比如<label for='one'>one</label>
,因为for
也是JavaScript的关键字,所以在JSX中用htmlFor
代替
一个完整的组件还包含其他东西,这一章就这样了