react入門基礎(chǔ)

現(xiàn)在還沒有打算深入學(xué)習(xí)react,只是為了了解,免得被人問到什么都說不上來藏研,所以初略的做一下筆記

  1. react推薦使用jsx來寫js寄啼,所以我們會(huì)多鏈接一個(gè)庫(kù)來支持jsx編譯背率,現(xiàn)在想使用jsx是需要引用cdn babel下的browser庫(kù)
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"
<script type="text/babel">
//這里就可以使用jsx語法了
</script>
  1. jsx語法最特別的地方就是可以將html結(jié)構(gòu)直接寫在js中,不用加什么引號(hào)什么的羡铲,他別方便
  2. 然后要引入react
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js></script>"
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js</script>"
  1. 然后就是官網(wǎng)上一個(gè)最簡(jiǎn)單的例子
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<body>
  <div id="container"></div>
  <script type="text/babel">
    var Hello=React.createClass({
      render:function(){
        return <div>Hello {this.props.name}</div> 
      }
    });
    React.render(
      <Hello name="請(qǐng)加油">,
      document.getElementById("container")
    )
  </script>
</body>

然后就會(huì)在頁(yè)面中渲染出一個(gè)react組件蜂桶,顯示為 Hello 請(qǐng)加油

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市也切,隨后出現(xiàn)的幾起案子扑媚,更是在濱河造成了極大的恐慌,老刑警劉巖雷恃,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疆股,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡褂萧,警方通過查閱死者的電腦和手機(jī)押桃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來导犹,“玉大人唱凯,你說我怎么就攤上這事』蚜。” “怎么了磕昼?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)节猿。 經(jīng)常有香客問我票从,道長(zhǎng)漫雕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任峰鄙,我火速辦了婚禮浸间,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘吟榴。我一直安慰自己魁蒜,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布吩翻。 她就那樣靜靜地躺著兜看,像睡著了一般。 火紅的嫁衣襯著肌膚如雪狭瞎。 梳的紋絲不亂的頭發(fā)上细移,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音熊锭,去河邊找鬼弧轧。 笑死,一個(gè)胖子當(dāng)著我的面吹牛球涛,可吹牛的內(nèi)容都是我干的劣针。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼亿扁,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼捺典!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起从祝,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤襟己,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后牍陌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體擎浴,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年毒涧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了贮预。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡契讲,死狀恐怖仿吞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情捡偏,我是刑警寧澤唤冈,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站银伟,受9級(jí)特大地震影響你虹,放射性物質(zhì)發(fā)生泄漏绘搞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一傅物、第九天 我趴在偏房一處隱蔽的房頂上張望夯辖。 院中可真熱鬧,春花似錦挟伙、人聲如沸楼雹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至榨咐,卻和暖如春介却,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背块茁。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工齿坷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人数焊。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓永淌,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親佩耳。 傳聞我的和親對(duì)象是個(gè)殘疾皇子遂蛀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

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

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記干厚,個(gè)人覺得該教程講解深入淺出李滴,比目前大...
    leonaxiong閱讀 2,834評(píng)論 1 18
  • 現(xiàn)在最熱門的前端框架,毫無疑問是 React 蛮瞄。上周所坯,基于 React 的 React Native 發(fā)布,結(jié)果一...
    sakura_L閱讀 431評(píng)論 0 0
  • 現(xiàn)在最熱門的前端框架挂捅,毫無疑問是React芹助。在基于React的React Native發(fā)布一天之內(nèi),就獲得了 50...
    Mycro閱讀 1,013評(píng)論 3 6
  • JSX 知識(shí)準(zhǔn)備 JSX 并不是一門全新的語言闲先,僅僅是一個(gè)語法糖状土,允許開發(fā)者在javascript中編寫XML語言...
    艾倫先生閱讀 4,505評(píng)論 4 20
  • JSX是React的核心組成部分,它使用XML標(biāo)記的方式去直接聲明界面饵蒂,界面組件之間可以互相嵌套声诸。可以理解為在JS...
    可樂愛上咖啡閱讀 71,947評(píng)論 1 64