码迷,mamicode.com
首页 > 其他好文 > 详细

react 简单在页面中输出一段文字

时间:2018-12-26 01:14:30      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:export   turn   页面   inf   class   art   pre   port   多个   

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

 

技术分享图片

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

技术分享图片

现在我们进入到hello.jsx

 1 import React from ‘react‘;
 2 //声明组件
 3 class Hello extends React.Component{
 4   //写虚拟DOM元素,要卸载render函数里面
 5   render(){
 6     return(
 7       // 如果要写多个标签一定要记得要写在一个根元素里面
 8       <div>
 9         <h1>我是Hello组件中的h1标签</h1>
10         <p>我是Hello组件中的p标签</p>
11       </div>
12     );
13   }
14 }
15 //最后一定要记得向外输出这个组件
16 export default Hello;

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

 

react 简单在页面中输出一段文字

标签:export   turn   页面   inf   class   art   pre   port   多个   

原文地址:https://www.cnblogs.com/TreeCTJ/p/10177114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!