怎样编写react组件

前端做界面都要求会组件化,今天咪咪我就来分享一下react怎样编写组件,希望可以帮助到大家。

操作方法

  • 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({})里面调用render:function()。render:function()是一个渲染函数。

  • 07

    然后我们在渲染函数里面开始编写代码,这里我就设置显示一个<h1>标签。这样,一个简单的react组件就编写完成了。

  • 08

    接着调用ReactDOM.render()来把组件插入到之前定义好的div里就可以了。

  • 09

    如图,插入方法如下,把组件当做是一个HTML标签,注意要有/斜杠哦,并且要加上一个逗号,还有就是document语句后面不可以加分号。

  • 10

    最后浏览一下HTML界面,显示成功,说明组件已经成功插入到div里面了。

(0)

相关推荐

  • 使用.NET2.0 编写COM组件供Visual Basic调用

    使用.NET2.0 编写COM组件供Visual Basic调用

  • 使用java编写随机数抽奖小程序

    本篇介绍如何用java编写一个简单的随机数字抽奖器,主要用到的知识是Swing编程和线程知识,最终程序开始界面如下图: 操作方法 01 在我们要做出这个程序前,我们先在画图板上大概的画出我们程序最终的 ...

  • WebStorm 2017.3最新汉化激活破解及安装教程(附汉化包+原版下载)

    WebStorm 2017中文破解版是一款用于JavaScript编程的开发软件,该软件由著名的jetbrains公司研发.WebStorm 2017.3.3是目前最新版本,是前端web开发人员使用率 ...

  • WebStorm 2018全新汉化破解及安装激活教程(附注册码)

    WebStorm2018是一款专业的HTML编辑工具,新版进行了全面优化和改进,包括Extract React组件进行了重构:与Angular CLI的新集成:新的检查工具提示:使用新的代码覆盖功能可 ...

  • 2019年 UI 和 UX 设计趋势

    写在前面: 2019年已经来了,新年新气象!给自己写一个可以量化的新年计划,然后努力的去给自己的计划清单打卡,等到年底了,看着收获满满,想想是不是还有点小激动呢?一起加油吧,骚年! 2019年的第一次 ...

  • C#控件之Button控件使用

    记录一下C#编程下的Button控件的使用方法,希望也能帮助大家! 操作方法 01 Button控件是一个很常见也是用的比较多的一个控件,其实它的实现正和它的使用一样的简单明了.该控件的使用很简单,直 ...

  • solidworks操作面板上怎么编写文字?

    Solidworks软件功能强大,组件繁多. Solidworks有功能强大.易学易用和技术创新三大特点,这使得SolidWorks 成为领先的.主流的三维CAD解决方案.SolidWorks 能够提 ...

  • 如何用VS2015编写简单的C++程序

    如今,对于大多数电脑初学者,C++是一门十分重要的编程语言.在求职就业中C++对于程序员是十分基本的技能,但要精通并掌握C++是比较困难的,这需要我们经常练习,上机实践.接下来我们看看如何用VS201 ...

  • solidworks如何在操作面板上编写文字

    Solidworks软件功能强大,组件繁多. Solidworks有功能强大.易学易用和技术创新三大特点,这使得SolidWorks 成为领先的.主流的三维CAD解决方案.SolidWorks 能够提 ...