React入門介紹（1）-ReactDOM.render()等基礎

時間 2019-11-11

標籤 react 入門介紹 reactdom.render reactdom render 基礎欄目 React 简体版

原文原文鏈接

React入門介紹-ReactDOM.render()等基礎

首先，React是一個用於構建用戶界面的Javascript庫,但Peact並非一套完整的MVC或MVVM的框架，它僅涵蓋V-view視圖層。JSX是javascript的擴展，像Typescript,coffeeScript等同樣，都是Javascript的語法糖，最終都要變編譯成JS執行，建議使用JSX的代碼進行React的開發。由於Javascript代碼與JSX代碼並不兼容，凡是使用JSX的地方咱們都須要加上 type="text/babel"。
在使用React以前，咱們必需要先引入三個庫——react.js/react-dom.js/browser.min.jsjavascript

<html>
  <head>
    <script src="../../react.js"></script>
    <script src="../../react-dom.js"></script>
    <script src="../../browser.min.js"></script>
  </head>
  <body>
  </body>
</html>

JSX比較特殊的是容許Javascript和HTML的混寫，看一個簡單的例子：html

<div id="container"></div>

    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
      ReactDOM.render(
        <div>
          <input type="text" value={value}/> //注意單標籤必定要閉合「/」,不然會報錯
          <button>{buttonName}</button>//在{}中插入變量
        </div>,
        document.getElementById("container")
      )
    </script>

ReactDOM.render是React的最基本方法用於將模板轉爲HTML語言，並插入指定的DOM節點。ReactDOM.render(template,targetDOM),該方法接收兩個參數：第一個是建立的模板，多個dom元素外層需使用一個標籤進行包裹，如<div>；第二個參數是插入該模板的目標位置。若要爲建立的某個元素增長class屬性，不能直接定義class而要用className，由於class是javascript中的保留字。例如給input添加className並更改樣式：java

<input type="text" className="userName" value={value}/> 
 
    .userName{background: yellow}//在CSS樣式中定義

一樣能夠定義行內樣式,將全部的樣式包裹在一個對象中,以相似變量的形式給style屬性賦值,注意樣式屬性要用駝峯命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size,react

<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>

另外能夠直接將樣式賦值給一個變量，把變量賦值給style屬性，以下：babel

<div id="container"></div>
    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
    let inputStyle = {
      "backgroundColor":"yellow",
      "color":"red"
    };
      ReactDOM.render(
        <div>
          <input type="text" style={inputStyle} value={value}/> 
          <button>{buttonName}</button>
        </div>,
        document.getElementById("container")
      )
    </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。