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) 字 ...
随机推荐
- SecureCRTPortal保存的密码位置
SecureCRTPortal保存的密码位置 Options> Global Options > Configuration Folder 一般为:C:\Users\Administrat ...
- 18124 N皇后问题
18124 N皇后问题 时间限制:2000MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC;VC Description 有N*N的国际象棋棋盘,要 ...
- LINQ查询知识总结
-------适合自己的才是最好的!!! LINQ查询知识总结:案例分析 案例:汽车表car,系列表brand,厂商表productor private MyCarDataContext _Cont ...
- 问题3-Error occurred during initialization of VM Could not reserve enough space for object heap
初步断定是内存方面的问题 于是决定修改配置文件 D:\study\eclipse\eclipse\eclipse.ini -startupplugins/org.eclipse.equinox.lau ...
- Fitnesse Page 简单使用
more information- http://www.fitnesse.org/FitNesse.UserGuide 1.1 Edit 点击该按钮,则可以开始编辑(如果该按钮没有出现,则这个页 ...
- Android端 配置极光推送
由于业务须要,androidclient须要加推送.原来採用的百度推送.可是小米手机有时候收不到.后来换成了极光推送,极光的话全部设备都能收到推送,可是在高峰的时候会推迟.博主说的免费版的,收费的没用 ...
- 2017-3-8 leetcode 380 381 532
l两周以来,第一次睡了个爽,开心! ================================= leetcode380 https://leetcode.com/problems/insert ...
- Node.js:路由
ylbtech-Node.js:路由 1.返回顶部 1. Node.js 路由 我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数,随后路由需要根据这些数据来执行相应的代码. 因 ...
- DBS-PowerDesginer:PowerDesigner最基础的使用方法入门学习
ylbtech-DBS-PowerDesginer:PowerDesigner最基础的使用方法入门学习 1.返回顶部 1. 1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其 ...
- BZOJ 4756 线段树合并(线段树)
思路: 1.最裸的线段树合并 2. 我们可以观察到子树求一个东西 那我们直接DFS序好了 入队的时候统计一下有多少比他大的 出的时候统计一下 减一下 搞定~ 线段树合并代码: //By SiriusR ...