前端做界面都要求会组件化 ， 今天咪咪我就来分享一下react怎样编写组件 ， 希望可以帮助到大家 。 工具/材料 电脑
【怎样编写react组件】hbuilder
react.js,react-dom.js,browser.js
操作方法 01 首先 ， 现在HTML页面中定义一个div ， 这个div待会用来存放react组件 。
文章插图
02 接着在HTML页面引入这三个插件 ， 具体可以到react官网下载 ， 需要注意的是react-dom.js要放在react.js的后面 ， 不然会报错哦 。
文章插图
03 接着再写一个script标签 ， 要把type设置成text/babel哦 。
文章插图
04 然后自定义一个组件名 ， 比如我这里自定义为Zhinan ， 注意 ， react的组件名开头一定要大写字母哦 。
文章插图
05 然后我们调用React.createClass({})来创建一个组件 。
文章插图
06 接着在React.createClass({})里面调用rer:function 。 rer:function()是一个渲染函数 。
文章插图
07 然后我们在渲染函数里面开始编写代码 ， 这里我就设置显示一个<h1>标签 。 这样 ， 一个简单的react组件就编写完成了 。
文章插图
08 接着调用ReactDOM.rer()来把组件插入到之前定义好的div里就可以了 。
文章插图
09 如图 ， 插入方法如下 ， 把组件当做是一个HTML标签 ， 注意要有/斜杠哦 ， 并且要加上一个逗号 ， 还有就是document语句后面不可以加分号 。
文章插图
10 最后浏览一下HTML界面 ， 显示成功 ， 说明组件已经成功插入到div里面了 。
文章插图
以上内容就是怎样编写react组件的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- ps里怎样快速的去掉水印
- 怎样正确处理手上扎刺
- 老年人头晕是什么原因引起的，该怎样治疗？
- 芦荟怎样种植？芦荟一般用分株法种植
- 怎样用双皮奶粉制成双皮奶
- 报春花怎样扦播
- 怎样治疗白带发黄
- 双面玻璃擦吸住了怎么打开 怎样分开玻璃擦
- 怎样防治黄水疮？
- 拔牙是怎样的一个流程？