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) 字 ...
随机推荐
- 【传智播客VIP用户专享】Swift教程最新更新
(1)[传智播客VIP用户专享]Swift教程最新更新 特地贡献出来忘帮顶!!(传智内部学院给的) http://pan.baidu.com/s/1jGmRRIu 提取码:i11g 相关资料下载 ...
- java根据内容生成二维码图片
package util; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; ...
- 【cocos2d-x 3.7 飞机大战】 决战南海I (十二) 游戏结束场景
游戏结束的时候,要显示分数.还要可以选择是返回主场景还是退出游戏 // 退出游戏 void menuCloseCallback(cocos2d::Ref* pSender); // 返回主界面 voi ...
- 数据库技术_Orcale技术(0002)_5分钟会用存储过程_存储过程实例
基础技术: 样例业务功能: 1.依据传入的类型A_TYPE联合查询PROCEDURE_TEST_A表.PROCEDURE_TEST_A_SUB表中的数据.并显示主要内容. 2.依据传入的类型A_TYP ...
- C++数组类模板
* 作为数组类模板,肯定没有vector做得好,可是普通的数组有1个优点就是能直接操作内存.vector在这方面就不是非常方便了. 网上尽管也有数组类模板.多维的设计基本上都不是非常好.我这个类模板多 ...
- linux logo的格式【转】
本文转载自:http://blog.csdn.net/xiayu98020214/article/details/7394100 =================================== ...
- 怎样在Android.mk上加宏定义【转】
本文转载自:http://blog.csdn.net/ttxgz/article/details/7591282 很简单, LOCAL_CFLAGS += -DWHATEVERDEFINE 就可以了
- bzoj3673: 可持久化并查集 by zky&&3674: 可持久化并查集加强版
主席树可持久化数组,还挺好YY的 然而加强版要路径压缩.. 发现压了都RE 结果看了看数据,默默的把让fx的父亲变成fy反过来让fy的父亲变成fx 搞笑啊 #include<cstdio> ...
- ReflectionSugar 通用反射类
http://www.cnblogs.com/sunkaixuan/p/4635710.html
- 解决xftp失去链接需要重新链接问题。
XFTP 失去连接需要重新连接 打开 Xftp 主程序. 在顶部菜单[文件] – [属性], 打开[默认会话属性]窗口,点击[选项],在连接部分选择勾选"发送保持活动状态消息(s)" ...