用户登录

React 应用需要的界面可以定义成一些组件,组件可以重复使用,可以组合在一起构成应用的界面。

React 组件最终返回的东西是 React 元素,也就是要在页面上显示的东西。React 组件可以是一个简单的函数,也可以是一个 Class,也就是类。

我们可以把这个用 JSX 表达的 React 元素放到一个组件里,剪切一下这块代码,在 src 目录的下面新建一个文件,放在 app 目录的下面,名字是 app.tsx。

声明一个函数,组件名字的首字母要用大写的,比如 App,定义一个箭头函数,把之前剪切的代码粘贴到这个函数里面,组件需要返回 React 元素,所以函数最后可以用 return 返回上面这个 element。在文件的最后默认导出这个函数,export default App。

回到 index.tsx,在文件顶部导入 App 组件,相对于当前这个文件,App 组件的位置是在当前目录下面的 app 这个目录里,名字是 app。

再把这个组件交给 root.render 方法,使用组件跟使用 HTML 标签差不多,有开始标签还有结束标签,一组尖括号,然后是组件的名字,结束标签也是一组尖括号,组件的名字是 App,结束标签里面还需要一个 / 。

因为这里要用的这个组件没有子组件,所以可以用自关闭的写法使用这个组件,一组尖括号,名字是 App,加上空格,再加上一个 / ,这个就是组件的自关闭的写法。

在浏览器预览一下,现在页面上显示的这个标题来自我们定义的 App 组件。

React 组件:可重复使用的用户界面《 React.js 前端应用开发:基本概念 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点