學習 React Native 的前期準備

作者： cfscc
發布時間：2020-05-11
971 次瀏覽
暫無評論
3033字數
分類：程序代碼

Loading...

1，學習 React Native 的前期準備

SYOL
2017.03.18 16:57:27
字數 664
閱讀 167
React 與 React Native 之間的關系
簡單來說前者用于WEB開發，后者用于移動端開發:

首先得先了解 ：React 可到菜鳥教程進行了解http://www.runoob.com/react/react-tutorial.html

React的學習儲備(HTML，CSS， JavaScript)，可以到http://www.w3school.com.cn/ 進行學習。
配置React 的開發環境。
新建一個小工程

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Hello React!</title>
      <script src="js/react.js"></script>//reacr.js是react的核心庫
      <script src="js/react-dom.min.js"></script>//react-dom.js 的作用是提供dom的相關功能
      <script src="js/boowser.min.js"></script>// boowser.min.js的作用是將JSX語法轉換成Javascipt語法
    </head>
    <body>
      <div id="example"></div>
      <script type="text/babel">
    //有三個參數
    //第一個：模版渲染內容（HTML形式）
    //第二個：需要插入DOM的節點
    //第三個： 渲染后的回調（一般不用）
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
      </script>
    </body>
    </html>

創建組件的注意事項
React中創建的組建類以大寫字母開頭，遵循駝峰命名法
在React中使用React.createClass方法創建一個組建類
核心代碼：每個組件類必須實現自己的render方法 。輸出定義好的組件模版。返回值：null、false、組件模板
注意：組件類只能包含一個頂層標簽

var Demo = React.createlClass({
    render:function{
    return <h1>Hello Demo<h1>
    }
    });
    React.render (
    //插入<Demo />會自動生成一個實例
    <Demo />,
    document.getElementById("container")
    );

組件樣式
 組件樣式
內聯樣式
對象樣式
選擇器樣式//選擇使用他的時候一定要注意class要寫成className,還有不能直接使用for,要使用HTMLFor
注意事項 在React和HTML5中設置樣式時shi是有區別的
 HTML5是以;結尾  而React以,結尾
HTML5中的KEY、value 都不加引號,React中屬于JavaScript對象，key的名字不能出現“-”，需要使用駝峰命名法。如果value為字符串，需要加引號
HTML5中，value如果是數字的話，需要加單位，React不需要
復合組件：創建多個組件合成一個組件

props 組件
props 是組件自身的屬性，一般用于嵌套的內外層組件中，負責傳遞信息（通常是由父層組件向子層組件傳遞）
注意：props對象中的屬性與組件的屬性是一一對應的。不要直接去修改props中屬性的值

this.props
props提供的語法糖，將父組件中的全部屬性都復制給子組件

this.props.children
children是一個例外，不是跟組件的屬性對應的，表示組件的所有子節點
![2020-05-11T03:43:49.png][1]
![2020-05-11T03:44:15.png][2]
屬性驗證
propTypes
用于驗證組件實例的屬性是否符合要求

![Paste_Image.png][3]
事件綁定
![2020-05-11T03:45:22.png][4]
state
也是與props是組件自身的屬性
在一個對象中設置的屬性，將會存儲在state
組件的生命周期
Mounting:組件掛載，已插入真實 DOM
![2020-05-11T03:45:35.png][5]
Updating:組件更新，正在被重新渲染
![2020-05-11T03:45:43.png][6]
Unmounting:組件移出，已移出真實DOM
![2020-05-11T03:45:54.png][7]
![2020-05-11T03:46:06.png][8]

組件的生命周期fenwei4個階段
創建、實例化、更新、銷毀
JSX語法的儲備(JSX是React的核心組成部分，它使用XML標記的方式去直接聲明界面，界面組件之間可以互相嵌套?？梢岳斫鉃樵贘S中編寫與XML類似的語言,一種定義帶屬性樹結構（DOM結構）的語法，它的目的不是要在瀏覽器或者引擎中實現，它的目的是通過各種編譯器將這些標記編譯成標準的JS語言。)。 網上有很多相關的知識了解。
JSX 必須借助React環境運行
如：

React.render(
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    );

在JSX中運行JavaScript代碼

//使用｛｝括起來   ｛表達式｝
    var demo = "這是一個demo"；
    React.render (
    <h1>{demo}</h1>
    docunment.getElementById("container")
    );

ES6的知識儲備

[1]: http://www.matrixbk.com/usr/uploads/2020/05/2217960656.png
  [2]: http://www.matrixbk.com/usr/uploads/2020/05/1080127667.png
  [3]: http://www.matrixbk.com/usr/uploads/2020/05/2621917273.png
  [4]: http://www.matrixbk.com/usr/uploads/2020/05/4061322568.png
  [5]: http://www.matrixbk.com/usr/uploads/2020/05/3127624328.png
  [6]: http://www.matrixbk.com/usr/uploads/2020/05/4222323136.png
  [7]: http://www.matrixbk.com/usr/uploads/2020/05/1374879675.png
  [8]: http://www.matrixbk.com/usr/uploads/2020/05/1246087752.png

最后修改：

? 允許規范轉載

如果覺得我的文章對你有用，請隨意贊賞

發表評論取消回復
使用cookie技術保留您的個人信息以便您下次快速評論，繼續評論表示您已同意該條款

評論 *

私密評論

名稱 *

??

郵箱

地址

學習 React Native 的前期準備

cfscc ? 2020 年 05 月 11 日

Loading...

1，學習 React Native 的前期準備

SYOL
2017.03.18 16:57:27
字數 664
閱讀 167
React 與 React Native 之間的關系
簡單來說前者用于WEB開發，后者用于移動端開發:

首先得先了解 ：React 可到菜鳥教程進行了解http://www.runoob.com/react/react-tutorial.html

React的學習儲備(HTML，CSS， JavaScript)，可以到http://www.w3school.com.cn/ 進行學習。
配置React 的開發環境。
新建一個小工程

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Hello React!</title>
      <script src="js/react.js"></script>//reacr.js是react的核心庫
      <script src="js/react-dom.min.js"></script>//react-dom.js 的作用是提供dom的相關功能
      <script src="js/boowser.min.js"></script>// boowser.min.js的作用是將JSX語法轉換成Javascipt語法
    </head>
    <body>
      <div id="example"></div>
      <script type="text/babel">
    //有三個參數
    //第一個：模版渲染內容（HTML形式）
    //第二個：需要插入DOM的節點
    //第三個： 渲染后的回調（一般不用）
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
      </script>
    </body>
    </html>

創建組件的注意事項
React中創建的組建類以大寫字母開頭，遵循駝峰命名法
在React中使用React.createClass方法創建一個組建類
核心代碼：每個組件類必須實現自己的render方法 。輸出定義好的組件模版。返回值：null、false、組件模板
注意：組件類只能包含一個頂層標簽

var Demo = React.createlClass({
    render:function{
    return <h1>Hello Demo<h1>
    }
    });
    React.render (
    //插入<Demo />會自動生成一個實例
    <Demo />,
    document.getElementById("container")
    );

組件樣式
 組件樣式
內聯樣式
對象樣式
選擇器樣式//選擇使用他的時候一定要注意class要寫成className,還有不能直接使用for,要使用HTMLFor
注意事項 在React和HTML5中設置樣式時shi是有區別的
 HTML5是以;結尾  而React以,結尾
HTML5中的KEY、value 都不加引號,React中屬于JavaScript對象，key的名字不能出現“-”，需要使用駝峰命名法。如果value為字符串，需要加引號
HTML5中，value如果是數字的話，需要加單位，React不需要
復合組件：創建多個組件合成一個組件

props 組件
props 是組件自身的屬性，一般用于嵌套的內外層組件中，負責傳遞信息（通常是由父層組件向子層組件傳遞）
注意：props對象中的屬性與組件的屬性是一一對應的。不要直接去修改props中屬性的值

this.props
props提供的語法糖，將父組件中的全部屬性都復制給子組件

this.props.children
children是一個例外，不是跟組件的屬性對應的，表示組件的所有子節點
![2020-05-11T03:43:49.png][1]
![2020-05-11T03:44:15.png][2]
屬性驗證
propTypes
用于驗證組件實例的屬性是否符合要求

![Paste_Image.png][3]
事件綁定
![2020-05-11T03:45:22.png][4]
state
也是與props是組件自身的屬性
在一個對象中設置的屬性，將會存儲在state
組件的生命周期
Mounting:組件掛載，已插入真實 DOM
![2020-05-11T03:45:35.png][5]
Updating:組件更新，正在被重新渲染
![2020-05-11T03:45:43.png][6]
Unmounting:組件移出，已移出真實DOM
![2020-05-11T03:45:54.png][7]
![2020-05-11T03:46:06.png][8]

組件的生命周期fenwei4個階段
創建、實例化、更新、銷毀
JSX語法的儲備(JSX是React的核心組成部分，它使用XML標記的方式去直接聲明界面，界面組件之間可以互相嵌套?？梢岳斫鉃樵贘S中編寫與XML類似的語言,一種定義帶屬性樹結構（DOM結構）的語法，它的目的不是要在瀏覽器或者引擎中實現，它的目的是通過各種編譯器將這些標記編譯成標準的JS語言。)。 網上有很多相關的知識了解。
JSX 必須借助React環境運行
如：

React.render(
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    );

在JSX中運行JavaScript代碼

//使用｛｝括起來   ｛表達式｝
    var demo = "這是一個demo"；
    React.render (
    <h1>{demo}</h1>
    docunment.getElementById("container")
    );

ES6的知識儲備

[1]: http://www.matrixbk.com/usr/uploads/2020/05/2217960656.png
  [2]: http://www.matrixbk.com/usr/uploads/2020/05/1080127667.png
  [3]: http://www.matrixbk.com/usr/uploads/2020/05/2621917273.png
  [4]: http://www.matrixbk.com/usr/uploads/2020/05/4061322568.png
  [5]: http://www.matrixbk.com/usr/uploads/2020/05/3127624328.png
  [6]: http://www.matrixbk.com/usr/uploads/2020/05/4222323136.png
  [7]: http://www.matrixbk.com/usr/uploads/2020/05/1374879675.png
  [8]: http://www.matrixbk.com/usr/uploads/2020/05/1246087752.png

天天日天天干天天_黄片免费在线播放_性开放按摩av片_18禁裸体黑丝美女自慰网站。