1. 程式人生 > >react 簡單在頁面中輸出一段文字

react 簡單在頁面中輸出一段文字

span inf com render 圖片 tar 文件夾刪除 ren ()

之前用腳手架創建了一個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 簡單在頁面中輸出一段文字