已发文 ：鸡汤·概述篇 > JSX篇>JSX属性篇，同步更新ES6教程，感兴趣的可以看看

————致力于最简单的前端教程，每天一篇文章，轻松进阶前端

什么是组件？

组件将ui分割成一个个小块，类似html中的节点，每个节点下面有多个标签，组件也是如此，React的ui复用就是因为组件。

组件的2种定义方式

组件应该：名称大写、接受属性、返回jsx标签

1. 函数

函数定义组件

props是使用组件时传递过来的属性，直接return一个jsx标签。

2. 类

类定义组件

属性props使用this获取，render方法需要return一个jsx标签。

组件的使用

jsx创建后像一个普通标签一样使用，以 / 号封闭标签。

属性会被传入组件的props对象里。

//使用上面定义的组件
<Welcome name='cc'/>

组件的渲染

react使用ReactDom.render方法渲染组件到浏览器，语法：

ReactDOM.render(element,dom)

比如，把前面的Welcome组件渲染到页面id为root标签里：

渲染组件到浏览器

实例

我们使用的前面create-react-app创建的项目。

如图你可以看到在index.js使用ReactDOM.render渲染代码：

index.js

<App/>指的是App.js中的App组件，先不用管如何导入导出的，后续的es6中会提到。

APP.js修改代码如下：

App.js

渲染到浏览器：

浏览器效果图

本篇文章到此结束，下篇文章讲组件的属性等，关注后收到更新推送！