React組件(3種)

React組件(3種)

當做自定義標簽使用菱肖,定義的組件名稱首字母必須大寫冲粤,渲染的時候也要首字母大寫楣富,一般組件都是寫成直觀閉的 < /> 組件可以嵌套組件

1.React.createClass


let Hello = React.createClass({
render:function(){
 return (
   <div>
     <h1>我是第一種組件的創(chuàng)建方式占卧,即將廢棄</h1>
   </div>
 )
}
})
// ReactDOM.render(<Hello></Hello>, document.querySelector('#root'))
ReactDOM.render(<Hello />, document.querySelector('#root'),function(){console.log('回調(diào)函數(shù)');})

2.function(){}

function World() {
return(
 <h2>我是 hello World</h2>
)
}
function Hello() {
let x = 666;
return(
 <div>
   <h1>我是第二種組{x}件的創(chuàng)建方式涣觉,必須有返回值贵涵,而且返回值必須是 JSX elements</h1>
   <World></World>
 </div>
)
}
ReactDOM.render(<Hello />, document.querySelector('#root'))

3.class 組件名 extends React.Component{render(){}}

class Hello extends React.Component{
render(){
 return(
   <div>
     <h1>我是第三種組件的創(chuàng)建方法</h1>
   </div>
 )
}
}

render(){} === render:function(){}
引入本地圖片也和引入模塊一樣列肢,把圖片當做模塊引入 例如:import img from './avater.jpg' 網(wǎng)上的圖片直接寫圖片地址

引入css文件可以直接引入 import './xxx.css'

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市宾茂,隨后出現(xiàn)的幾起案子瓷马,更是在濱河造成了極大的恐慌,老刑警劉巖跨晴,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件决采,死亡現(xiàn)場離奇詭異,居然都是意外死亡坟奥,警方通過查閱死者的電腦和手機树瞭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門拇厢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晒喷,你說我怎么就攤上這事孝偎。” “怎么了凉敲?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵衣盾,是天一觀的道長。 經(jīng)常有香客問我爷抓,道長势决,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任蓝撇,我火速辦了婚禮果复,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘渤昌。我一直安慰自己虽抄,他們只是感情好,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布独柑。 她就那樣靜靜地躺著迈窟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪忌栅。 梳的紋絲不亂的頭發(fā)上车酣,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音索绪,去河邊找鬼湖员。 笑死,一個胖子當著我的面吹牛者春,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播清女,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼钱烟,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了嫡丙?” 一聲冷哼從身側(cè)響起拴袭,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎曙博,沒想到半個月后拥刻,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡父泳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年般哼,在試婚紗的時候發(fā)現(xiàn)自己被綠了吴汪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡蒸眠,死狀恐怖漾橙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情楞卡,我是刑警寧澤霜运,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站蒋腮,受9級特大地震影響淘捡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜池摧,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一焦除、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧险绘,春花似錦踢京、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至代咸,卻和暖如春蹈丸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背呐芥。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工逻杖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人思瘟。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓荸百,卻偏偏與公主長得像,于是被迫代替她去往敵國和親滨攻。 傳聞我的和親對象是個殘疾皇子够话,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記光绕,個人覺得該教程講解深入淺出女嘲,比目前大...
    leonaxiong閱讀 2,813評論 1 18
  • react 基本概念解析 react 的組件聲明周期 react 高階組件,context, redux 等高級...
    南航閱讀 1,057評論 0 1
  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,051評論 2 35
  • React的四個概念簡單介紹 React主要有四個主要概念構(gòu)成诞帐,下面分別來介紹一下: Virtual DOM 虛擬...
    birdshome閱讀 4,376評論 1 5
  • 心中一直有個聲音欣尼,想要寫出我的生命感受。最開始不為分享停蕉,只為表達自己的感悟愕鼓,留下印記钙态。再后來,也許想...
    蘿絲去散步閱讀 256評論 0 3