React学習記録(一)

6899 ワード

ノートは網易雲教室から抜粋します-Leo先生
3つのフレームワークの比較
  • angular
  • 1.xバージョンMVC
  • 2.xバージョンMVVM
  • フレーム高さパッケージ
  • vue
  • mvvmフレーム
  • インタラクション制限なし
  • 推奨vue-resource axios xmlhttp//ajax原生
  • react
  • view層に集中

  • Reactのメリット
  • 仮想DOM
  • 性能が高い
  • 端末の問題解決(pc、モバイル側の問題)
  • JSX構文
  • JSとの対比
    //js - string
    let a = '
    hello react!
    '
    //jsx
    let a = <div>hello react!</div> 
    
  • 表記形式:単一タグの表記形式
      let a = <div>hello react!</div>
    
  • 複数のタグの書式-外にルート要素//vue 2を包む必要がある.xコンポーネントルート(react参照)
      let a = <div><div>sadasd</div><span>asdasd</span></div>		  
    
  • インデント可能//特性
    // An highlighted block
    let a = <div>
    				<div>sadasd</div>
    				<span>asdasd</span>
    			</div>
    	//     
    let a = (<div>
    			<div>sadasd</div>
    			<span>asdasd</span>
    		</div>)
    
  • シングルラベルルール-必ず閉じる
    	<img/>
    	<input/>
    	<br/>
    	<div></div>
    
  • class - className
      	<div className='aaa'></div>
    
  • jsxでjsコード{}を使う
    	var a = 'hello react!'; //  
    	let b = <div>{a}</div>
    
  • React開発モデル
  • ダイレクト導入-シンプル(初心者好みモード)cdn導入
      // An highlighted block
      <script type="text/javascript" src="bower_components/react/react.js"></script>
      <script type="text/javascript" src="bower_components/react/react-dom.js"></script>
      <script type="text/javascript" src="bower_components/babel/browser.js"></script>
    
    3つのファイルを導入する必要があり、reactを先に導入する必要がある.jsはreact-domを再導入する.js