react 简单在页面中输出一段文字
之前用脚手架创建了一个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 简单在页面中输出一段文字的更多相关文章
- javascript小实例,在页面中输出当前客户端时间
时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每 ...
- 在JSP页面中输出JSON格式数据
JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...
- 在jsp中用一数组存储了数据库表中某一字段的值,然后在页面中输出其中的值。
List<String> list = new ArrayList<String>(); String sql = "select userName from us ...
- 在Label中显示一段文字
Let’s create a new Xamarin.Forms PCL solution, named Greetings, using the same process described abo ...
- 在Excel表格中输入一大段文字
1.有时为了注释的需要,在excel中需要输入一大段文字,这时候可以使用—视图-工具-绘图,然后选择下面的文本框,即可自定义文本框大小,如需要文本框和表格边框完全重合,在鼠标画文本框时按住 Alt键.
- h5页面关于复制某段文字
上次的项目有一段内容是点击复制按钮 然后复制一段文字,此段方法我才用的是range.selectNodeContents方法,range对象的SelectNodeContents方法将于range对象 ...
- NieR:Automata中的一段文字
还没开始玩这个游戏,但在网易云音乐上听到一首歌,很好听 http://music.163.com/#/m/song?id=468490570 搜了一下相关视频,发现这首歌是在与一个叫做歌姬的boss战 ...
- [HTML]在页面中输出空格的几种方式
JS中如何输出空格 在写JS代码的时候,大家可以会发现这样现象: document.write(" 1 2 3 "); 结果: 1 2 ...
- cut 从文本中提取一段文字并输出
1.命令功能 cut 从每个文件中截取选定部分并输出. 2.语法格式 cut option file 参数说明 参数 参数说明 -b (–bytes) 字节 -c (--characters) 字 ...
随机推荐
- php模拟并发
原文: http://blog.csdn.net/zhang_xinglong/article/details/16339867 ----------------------------------- ...
- QQ好友列表数据模型封装
QQ好友中的信息较多.假设我们单独从plist 中直接取出数据 是能够解决这个问题 可是相当复杂.以为列表中分组 .每组中还有不同信息 大致模型是 数组套数组 数组套字典 所以我们要封装数据模型 / ...
- luogu2303 [SDOI2012] Longge的问题
题目大意:给出n,求sum foreach i(1<=i<=n) (gcd(n, i)). 1~n有太多的数,但是n与m的最大公约数却有很多重复.所以我们枚举最大公约数k,然后让k乘以与n ...
- 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 ...
- 谷歌浏览器(chrome) —— 扩展应用程序
工具的使用--谷歌浏览器(chrome) (二) 1. 设置和下载方法 右上角菜单按钮 ⇒ 更多工具(more tools) ⇒ 扩展(Extensions) 打开该页面之后,会首先进入扩展(已安装应 ...
- Node.js:常用工具
ylbtech-Node.js:常用工具 1.返回顶部 1. Node.js 常用工具 util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简 ...
- [JavaEE] DWR框架简介
DWR框架简介 DWR框架是一个可以允许你去创建AJAX WEB站点的JAVA开源库.它可以让你在浏览器的JavaScript代码中调用Web服务器的Java代码,就像Java代码在浏览器中一样.DW ...
- npm中的 --save-dev
当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里 ...
- thrift RPC 框架的自我搭建
安装thrift rpc 安装的系统是Centos 7 未成功的方法 :(原因没找到,但是还是要记录下) 安装依赖库 yum install automake libtool flex bison ...
- BZOJ 1531 二进制优化多重背包
思路: 讲道理我应该写单调队列优化多重背包的 但是我不会啊 但是我现在! 还不会啊 我就写了个二进制优化的.. 过了 //By SiriusRen #include <cstdio> #i ...