之前用脚手架创建了一个react项目,将react自带的src文件夹删除后创建一个空的src文件夹

在src文件夹中创建一个index.jsx文件作为JS入口文件并创建一个hello组件

现在我们进入到hello.jsx

 import React from 'react';
//声明组件
class Hello extends React.Component{
//写虚拟DOM元素,要卸载render函数里面
render(){
return(
// 如果要写多个标签一定要记得要写在一个根元素里面
<div>
<h1>我是Hello组件中的h1标签</h1>
<p>我是Hello组件中的p标签</p>
</div>
);
}
}
//最后一定要记得向外输出这个组件
export default Hello;

最后我们在终端中输入npm start 就好了

react 简单在页面中输出一段文字的更多相关文章

  1. javascript小实例,在页面中输出当前客户端时间

    时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每 ...

  2. 在JSP页面中输出JSON格式数据

    JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...

  3. 在jsp中用一数组存储了数据库表中某一字段的值,然后在页面中输出其中的值。

    List<String> list = new ArrayList<String>();  String sql = "select userName from us ...

  4. 在Label中显示一段文字

    Let’s create a new Xamarin.Forms PCL solution, named Greetings, using the same process described abo ...

  5. 在Excel表格中输入一大段文字

    1.有时为了注释的需要,在excel中需要输入一大段文字,这时候可以使用—视图-工具-绘图,然后选择下面的文本框,即可自定义文本框大小,如需要文本框和表格边框完全重合,在鼠标画文本框时按住 Alt键.

  6. h5页面关于复制某段文字

    上次的项目有一段内容是点击复制按钮 然后复制一段文字,此段方法我才用的是range.selectNodeContents方法,range对象的SelectNodeContents方法将于range对象 ...

  7. NieR:Automata中的一段文字

    还没开始玩这个游戏,但在网易云音乐上听到一首歌,很好听 http://music.163.com/#/m/song?id=468490570 搜了一下相关视频,发现这首歌是在与一个叫做歌姬的boss战 ...

  8. [HTML]在页面中输出空格的几种方式

    JS中如何输出空格 在写JS代码的时候,大家可以会发现这样现象: document.write("   1      2                3  "); 结果: 1 2 ...

  9. cut 从文本中提取一段文字并输出

    1.命令功能 cut 从每个文件中截取选定部分并输出. 2.语法格式 cut  option  file 参数说明 参数 参数说明 -b (–bytes) 字节 -c (--characters) 字 ...

随机推荐

  1. php模拟并发

    原文: http://blog.csdn.net/zhang_xinglong/article/details/16339867 ----------------------------------- ...

  2. QQ好友列表数据模型封装

    QQ好友中的信息较多.假设我们单独从plist 中直接取出数据 是能够解决这个问题 可是相当复杂.以为列表中分组 .每组中还有不同信息 大致模型是 数组套数组  数组套字典 所以我们要封装数据模型 / ...

  3. luogu2303 [SDOI2012] Longge的问题

    题目大意:给出n,求sum foreach i(1<=i<=n) (gcd(n, i)). 1~n有太多的数,但是n与m的最大公约数却有很多重复.所以我们枚举最大公约数k,然后让k乘以与n ...

  4. spark 按照key 分组 然后统计每个key对应的最大、最小、平均值思路——使用groupby,或者reduceby

    What you're getting back is an object which allows you to iterate over the results. You can turn the ...

  5. 谷歌浏览器(chrome) —— 扩展应用程序

    工具的使用--谷歌浏览器(chrome) (二) 1. 设置和下载方法 右上角菜单按钮 ⇒ 更多工具(more tools) ⇒ 扩展(Extensions) 打开该页面之后,会首先进入扩展(已安装应 ...

  6. Node.js:常用工具

    ylbtech-Node.js:常用工具 1.返回顶部 1. Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简 ...

  7. [JavaEE] DWR框架简介

    DWR框架简介 DWR框架是一个可以允许你去创建AJAX WEB站点的JAVA开源库.它可以让你在浏览器的JavaScript代码中调用Web服务器的Java代码,就像Java代码在浏览器中一样.DW ...

  8. npm中的 --save-dev

    当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里 ...

  9. thrift RPC 框架的自我搭建

    安装thrift rpc   安装的系统是Centos 7 未成功的方法 :(原因没找到,但是还是要记录下) 安装依赖库 yum install automake libtool flex bison ...

  10. BZOJ 1531 二进制优化多重背包

    思路: 讲道理我应该写单调队列优化多重背包的 但是我不会啊 但是我现在! 还不会啊 我就写了个二进制优化的.. 过了 //By SiriusRen #include <cstdio> #i ...